:root {
    --background:rgb(27,27,30);
    --sidebar:rgb(31,32,38);
    --text1:rgb(198,198,198);
    --text2:rgb(67, 70, 110);
    --link1:rgb(68, 27, 191);
    --alertBG: rgb(201, 198, 120);
    --alertBG2: rgb(243, 239, 127);
    --alertText: rgb(100, 102, 67);
    --colGDD200:rgb(250, 138, 0);
    --cal: rgb(47, 43, 38);
    --cl: rgb(65, 69, 77);
    --cr: rgb(57, 72, 63);
    --calDue: rgb(171, 56, 56);
}

html, body{
    background-color: var(--background);
    color: var(--text1);
    scroll-behavior: smooth;
}

a{
  color: var(--link1);
}

a:visited{
  color: var(--link1);
  text-shadow: 2px 2px red;
}

.navbar{
    background-color: var(--background);
    color: var(--text1);
}

.calendar{
  text-align: center;
  width:100%;
  margin-top: 1em;
  padding: 5%;
}

.date{
  font-size: 1.20em;
  font-family: 'Reem Kufi Fun', sans-serif;
  letter-spacing: 1pt;
  word-spacing: 1.4pt;
  color: var(--text1);
  height: 16em;
  margin: 0.4em;
  padding-top: 0.45em;
}

.today{
  box-shadow: 0px 4px 15px 5px rgb(115, 193, 223);
}

.calList{
  list-style: none;
  line-height: 1em;
}

 .calList li{
  list-style:none;
 }

.coll{
  margin-right: 0.5em;
}

.date:hover{
  background-color: rgba(228, 186, 95);
  box-shadow: 0px 2px 12px 5px rgba(223, 216, 115, 0.5);
  color:black;
}

.date dayl{
  font-size: 0.7em;
  padding: 0em 1em;
  background-color: rgb(47, 47, 47);
  border-radius: 0.6em;
  color:rgb(148, 205, 255);
  border-right: 3px solid rgb(0, 0, 0);
  border-bottom: 2px solid rgb(0, 0, 0);
  float:left;
}

.date dayr{
  font-size: 0.7em;
  padding: 0em 1em;
  background-color: rgb(47, 47, 47);
  border-radius: 0.6em;
  color:rgb(255, 158, 253);
  border-right: 3px solid rgb(0, 0, 0);
  border-bottom: 2px solid rgb(0, 0, 0);
  float:left;
}

.dateHidden{
  display: none;
}

.cl{
  background-color: var(--cl);
}

.cr{
  background-color: var(--cr);
}

.info{
  background-color: rgb(172, 176, 145);
  color :rgb(47, 43, 38);
  border-radius: 0 0 0.5em 0.5em;
  border-top: 5px double black;
  position: absolute;
  top: 2.5em;
  left: 0;
  height: 85%;
  width: 100%;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  letter-spacing: 0.9pt;
  word-spacing: -0.1em;
  line-height: 1.25em;
  font-size: 0.9em;
}

.info li{
  text-align: left;
  margin-left: -1em;
  list-style: inside url('./media/listDec.png');
}

.due{
  background-color: rgb(154, 39, 62);
  color:white;
  border-radius: 1em;
  font-size: 0.65em;
  height: 2.1em;
  width: 5em;
  right: 1em;
  margin-top: 0.15em;
  position: absolute;  
}

.info:hover .due{
  animation: punch 0.3s;
}

.info:hover .duebg{
  animation: warn 0.5s;
}

.noclass{
  background-color: rgb(200, 20, 220);
  color:rgb(1, 1, 1);
  border-radius: 1em;
  font-size: 0.6em;
  padding: 0.20em 0.8em;
  right: 1em;
  margin-top: 0.1em;
  position: absolute;
}

h3{
  padding:0px;
  margin:0px;
  letter-spacing: 3pt;
  word-spacing: 4pt;
}

@keyframes punch {
  0% { transform: translate(6px, 5px) rotate(5deg); }
  10% { transform: translate(-3px, -5px) rotate(-4deg); }
  20% { transform: translate(4px, -3px) rotate(3deg); }
  30% { transform: translate(3px, 3px) rotate(-1deg); }
  40% { transform: translate(2px, -2px) rotate(2deg); }
  50% { transform: translate(-2px, 2px) rotate(-2deg); }
  60% { transform: translate(-2px, 1px) rotate(1deg); }
  70% { transform: translate(2px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(0deg); }
  90% { transform: translate(1px, 1px) rotate(0deg); }
  100% { transform: translate(1px, -1px) rotate(0deg); }
}
@keyframes warn {
  0% {background-color: rgba(255,0,0,0.2);transform: translate(1px, -3px) }
  30% {background-color: rgba(255,0,0,0);}
  40% {background-color: rgba(255,0,0,0.1); }
  70% {background-color: rgba(255,0,0,0);}
  80% {background-color: rgba(255,0,0,0.1);}
  100% {background-color: rgba(255,0,0,0.0);transform: translate(0px, 0px)}
}