* {box-sizing: border-box; margin: 0;letter-spacing: -0.1px;}
.bg {background-image: url(images/background.jpg), linear-gradient(var(--bg-gradient-top), var(--bg-gradient-bottom));
  
  background-size: cover; /* or contain */
  background-position: center center;
  animation: scroll 620s linear infinite alternate-reverse; 
}

@keyframes scroll {  0% { background-position: 0 0; }  100% { background-position: 100% 0; } }

body {font-family: Tajawal; font-weight: 500; font-size: 125%; overflow: hidden; background-color: black}
:root {
  --primary: #fff;
  --text: #eff;
  --secondary-text: #cdd;
  --linkcolor: #0ff;
  --linkvisitedcolor: rgb(183, 129, 255);
  --linkhovercolor: #eff;
  --linkvisitedhovercolor: rgb(221, 171, 255);
  --bg-gradient-top: rgba(12, 32, 55, 0.98);
  --bg-gradient-bottom: rgba(12, 155, 155, 0.88);
  --bg-links: #5cc;
  --bg-table-even: #044;
  --bg-table-odd: #066;
  --blockquote-border: #00fffc80;
  --selection-color: rgba(155, 255, 255, 0.5);
  --slighthighlight: #DFF;
  --stronghighlight: #0FF;
}
input {font-family: Tajawal; color: white; background: black; font-size: 125%; font-weight: bold; text-align: center;  border: 0; padding: 10px; box-sizing: border-box; border-radius: 10px; outline: none; border: 2px solid #5555; display: inline-block}

.cyand {color: cyan; box-shadow: 1px 1px 1px black; text-shadow: 1px 1px 1px black}
a {  background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, var(--bg-links) 100%     );    background-position: 0 100%; background-repeat: repeat-x; background-size: 2px 2px;  color: var(--linkcolor); text-decoration: none; transition: background-size .2s; padding: 0 2px 0 2px; /* Padding is a bit of a bandaid to have a larger underline */
  text-shadow: 2px 2px 1px black 
}

a:hover {background-size: 4px 50px; color: var(--linkhovercolor);}
a:active:hover {background: linear-gradient(to bottom, rgba(100, 225, 225, 100%) 0%, rgba(20, 225, 225, 100%) 100%); transition: background .2s;}
a:visited {color: var(--linkvisitedcolor);}
a:visited:hover {color: var(--linkvisitedhovercolor);}

.brassland {background: linear-gradient(to bottom, rgb(202, 173, 130) 0%, rgb(138, 121, 100) 100%); background-size: 4px 50px; }

.beme {background: #05262cbd;  padding: 10px 20px;  border: 2px dashed #00f6ff47; color: white;  border-radius: 25px; margin: 15px; /*animation: slightrotation 4s infinite ease-in-out alternate-reverse; */}
@keyframes slightrotation {0% {transform: rotate(2deg)} 100% {transform: rotate(0deg)}}
.beme h2 {text-decoration: 2px underline cyan}

.beme:hover {  animation: dash 1s linear infinite alternate-reverse; }@keyframes dash {  to {    border: 2px dashed #00f7ffad;}}
.beme.imp {background: radial-gradient(#005170, #05262cbd)}

::-moz-selection { 	background-color: var(--selection-color); 	color: #ffffff;}::selection {	background-color: var(--selection-color); 	color: #ffffff;}


::-webkit-scrollbar {  width: 15px; background-color: #000}::-webkit-scrollbar-thumb {  background-color: #00ffdd;  border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {  background-color: #398080d5;  border-radius: 5px;}

.rester {	border-width: 0 5px 0 5px;	border-style: dotted;	border-color: #122;	background-image: linear-gradient(var(--bg-gradient-top), var(--bg-gradient-bottom));	margin: 0px auto;display: table;}
p {margin-top: 0.4em; margin-bottom: 0.4em;}

figure {  border: thin #c0c0c073 solid;  display: flex;  flex-flow: column;  padding: 5px;  max-width: 380px;  margin: auto; float: right}figcaption {  background-color: #222;  color: #fff;  font: italic smaller;  padding: 3px;  text-align: center;}
img.big {margin: 5px}
spoilers {background: black; color: black}
li {margin-top: 2px; margin-bottom: 8px;}

#maindiv .col {border: 1px solid #82a9a8d1; padding: 10px;}
.col img.mainimg {width: 100%}
.snowFall {  position: absolute;  width: 100%;  height: 100%;  top: 0;  left: 0;  z-index: 11;  display: flex;  justify-content: center;  transform: scale(2) rotate(12deg);}.snowFall div {  position: relative;  display: inline-flex;  flex-shrink: 0;  margin: 3vh;  height: 8vh;  width: 8vh;  top: -30vh;  border-radius: 50%;  background-color: white;  --scaleVar: 0.2;  --delayVar: 0;  animation: fallAnim 3000ms linear infinite;}.delayMe div {  animation-delay: 1200ms;}.snowFall div:nth-of-type(2n) {  animation-delay: -200ms;  animation-duration: 3200ms;  --scaleVar: 0.05;}.snowFall div:nth-of-type(3n) {  animation-delay: -300ms;  animation-duration: 2800ms;  --scaleVar: 0.4;}.biggerSnow {  transform: scale(3);/*   filter: blur(0.2vh); */}.delayMe div:nth-of-type(2n) {  animation-delay: 1500ms;}.delayMe div:nth-of-type(3n) {  animation-delay: 900ms;}.snowFall div::after,.snowFall div::before {  content: "";  position: absolute;  width: 50%;  height: 50%;  top: -250%;  border-radius: 50%;  background-color: white;}.snowFall div::before {  top: -150%;  left: -150%;}.snowFall div:nth-of-type(2n)::after {  top: -250%;}.snowFall div:nth-of-type(2n)::before {  left: -350%;}.snowFall div:nth-of-type(3n)::after {  top: -350%;}.snowFall div:nth-of-type(3n)::before {  top: 350%;}
/*https://codepen.io/Adir-SL/pen/qBEVLdd*/
@keyframes fallAnim {  0% {    transform: translateY(0) scale(var(--scaleVar)); opacity: 0.1;  }  100% {    transform: translateY(100vmin) scale(var(--scaleVar)); opacity: 0;  }
}
.collapsible { background-color: #5c7e78;   cursor: pointer;  padding: 6px;  width: 100%;  border: none;  text-align: left;  outline: none;  font-size: 15px;}
.collapsible:hover {  background-color: #096354;}.collapsiblecontent {  padding: 0 16px;  max-height: 0;  overflow: hidden;  transition: max-height 0.2s ease-out; border: 1px solid rgba(0, 255, 255, 0.514);}


button {	box-shadow:inset 0px 1px 0px 0px #97c4fe;  padding-block-start: 0px;  padding-inline-end: 8px;  padding-block-end: 0px;  padding-inline-start: 8px;  border: 2px outset #3daaaa;  border-radius: 2px;  background-color:#3dcccc;	text-indent:0;	display:inline-block;	color:#ffffff;	font-family:'Tajawal';	font-size:15px;	font-weight:bold;	font-style:normal;	line-height:22px;	text-decoration:none;	text-align:center;	text-shadow:1px 1px 0px #1570cd;  user-select: none} button:hover {	background-color:#5ef6f6;  cursor: pointer;} button:hover:active {	background-color:#019595;	color:#dff;  padding-block-start: 0px;  padding-inline-end: 7px;  padding-block-end: 0px;  padding-inline-start: 9px;  border-style: inset;}:focus{outline: 1px solid cyan;}button:focus{  outline: none;}.focuson button:focus {  box-shadow: 0 0 2px 3px rgba(182, 255, 248, 0.7);}button.dangerous {  background-color: #df3c3c;  border: 2px outset #a33;  box-shadow: inset 0px 1px 0px 0px #fe9797;  text-shadow: 1px 1px 0px #ab1515;}button.dangerous:hover {  background-color: #f30;}button.dangerous:hover:active {  background-color: #8a0000;  color:#fdd;}button.disabled {  background-color: #444;  border: 2px outset #333;  box-shadow: inset 0px 1px 0px 0px #999;  text-shadow: 1px 1px 0px #111;}button.disabled:hover {  background-color: #444;}button.disabled:hover:active {  background-color: #444;}

.chime { font-weight: bold; background-size: 100% 100%;  background-position: 0 0%;  background-repeat: no-repeat;  text-shadow: 1px 1px 1px black,-1px -1px 1px black, 1px -1px 1px black,-1px 1px 1px black, 2px 2px 5px black; padding: 0px 5px; border: 2px solid #055; border-radius: 10px; box-shadow: 2px 2px 4px cyan;}
.chime:hover {transform: scale(10); display: inline-block; transition: transform 3s; cursor: crosshair}

.delusional {animation: wave 2s infinite alternate, shakingtext 0.1s infinite alternate, shakeblah 0.1s infinite alternate, reddify 12s infinite alternate}

@keyframes wave {  0% {    font-size: 100%;    color: rgb(0, 255, 244);  }  50% {    font-size: 110%;    color: rgb(0, 0, 0);  }  100% {    font-size: 100%;    color: rgb(0, 255, 244);  }}
@keyframes shakingtext {  0% {margin-left:   0.01vw; margin-top: 0vw;}  25% {margin-left:  0vw; margin-top: 0.1vw;}  50% {margin-left:  0.05vw; margin-top: 0vw;}  75% {margin-left:  0vw; margin-top: 0.01vw;}  100% {margin-left: 0.01vw; margin-top: -0.05vw;}}
@keyframes reddify {
  0% {
    text-shadow: 1px 1px 1px black, -1px -1px 1px rgb(111, 0, 255);
  }
  50% {
    text-shadow: 1px 1px 1px black, -1px -1px 1px rgb(72, 255, 0);
  }
  100% {
    text-shadow: 1px 1px 1px black, -1px -1px 1px rgb(255, 0, 0);
  }
}
@keyframes shakeblah {
  0%, 100% { transform: translateY(0) }
  10%, 30%, 50%, 70%, 90% { transform: translateY(-.1vh) }
  20%, 40%, 60%, 80% { transform: translateY(.1vh) }
}

.flex-grid-thirds {  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; background: linear-gradient(45deg, #000808, transparent); height: 600px; overflow-y: scroll; padding: 10px;}.flex-grid-thirds .col {  width: 32%;  flex-grow: 1;}.s {text-decoration: 5px line-through #000000;}

textarea {  font-size: 80%; background: #000; background: var(--bg-gradient-top); color: var(--primary);  font-family: Consolas, Lucida Console, Droid Sans Mono, monospace; border: 1px solid var(--primary); border-radius: 2px; padding: 2px
}textarea:focus {  border: 1px solid var(--linkcolor);  outline: none;}

#textinput {animation: boxshadowpulse 2s infinite alternate-reverse}
@keyframes boxshadowpulse {  0% {    box-shadow: 0 0 0 0 var(--primary);  }  100% {    box-shadow: 0 0 10px 5px var(--linkcolor);  }}

#motivation_station_div, #mystery_exacto_div {padding: 6px}
#logbook {padding: 0px 3px; color: white;}
#logbook .hour-label {display: inline-block; width: 5em; font-weight: bold; color: white; padding: 0px 5px; margin-right: 3px; opacity: 0.5; font-size: 80%;     vertical-align: top; text-decoration: underline 2px}
#logbook .activity-input {display: inline-block; width: 80%; padding: 2px}

#logbook .hour-label.has-content {opacity: 1;}
#logbook .hour-label.current-hour {animation: 1s cyanflash infinite alternate-reverse; opacity: 1; }

.hour-slot:nth-of-type(2n) {background: var(--bg-table-even)}
.hour-slot:nth-of-type(2n+1) {background: var(--bg-table-odd)}
@keyframes cyanflash {  0% {    box-shadow: 0 0 0 0 var(--primary);  }  100% {    box-shadow: 0 0 10px 5px var(--linkcolor);  }}