@font-face {
font-family: 'Squirrel';
src:  url('../things/fonts/squirrel.woff') format('woff'),
      url('../things/fonts/squirrel.woff2') format('woff2'),
      url('../things/fonts/squirrel.ttf') format('truetype');
font-weight:normal;
}

::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #454545;
  border: 0px none #590002;
  border-radius: 0px;
  height: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background: pink;
}
::-webkit-scrollbar-thumb:active {
  background: #ffb00d;
}
::-webkit-scrollbar-track {
  background: #000000;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: #000000;
}
::-webkit-scrollbar-track:active {
  background: #000000;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
html{
  cursor: url(../amigacur.png), default;
}
body{


  background-image: url(../lionsuit1b.jpg);
  background-size: 25%;
  font-family: serif;
  background-color:black;
  color: pink;
  margin:0;
  overflow-x:hidden;
  position:absolute;
  right:20px;
  margin-left: 450px;
  min-height:110vh;
  text-align: right;
}

@keyframes updgrow{
  0%{width: 40px; height: 40px; max-height: 40px;}
  0.01%{pointer-events: none; }
  75%{transform:rotate(-10deg);}
  75.999%{transform:rotate(-5deg);}
  89.999%{transform:rotate(1deg);}
  100%{pointer-events: all;width: 45vw; min-height:40px; height: auto; max-height:99999vh; box-shadow: 0px 0px 0px rgba(0,0,0,0.5); padding:20px;}
}

@keyframes updgrow2{
  0%{width: 80px; height: 80px; max-width: 80px; max-height: 80px;}
  50%{width:15vw;}
  75%{transform:rotate(-10deg);}
  75.999%{transform:rotate(0deg);}
  100%{width: auto; height: auto; min-height:80px; min-width: 15vw; max-width:75vw; max-height:99999vh; background-position: top left, top left;  padding-left: 100px;}
}
.updbox{
  vertical-align: bottom;
  display:none;
  font-size:28px;
  font-color: pink;
  overflow: hidden;
  background-color: black;
  width:40px;
  height: 40px;
  padding:10px;
  margin:10px;

  vertical-align: top;
  text-align: left;
  box-shadow:10px 10px 0px rgba(0,0,0,0.5);
  font-weight: normal;
  font-style:normal;
  border:3px ridge #2d2a1e;
  float:left;
}

.year .updbox{display: inline-block;
-webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0); }
.anim2 .updbox{display: inline-block;}



.anim{
  animation-name: updgrow;
  animation-duration: 0.4s;
  animation-timing-function: steps(4);
  /* animation-play-state: paused;*/
  animation-fill-mode: forwards;
}
a {
    filter:inherit;
    color: red;
}

  a.fn{
    
    text-decoration: none;
    color: #A07DFF;
  }
  
  a.fn:visited{
    color: #A07DFF;
  }
  
  a:hover{
    color: pink;
    background-color: black;
    cursor: url(../amigacurinv.png), auto;
  }
  
  a:visited{
    color: grey;
  }
  
  a.clean{
    color: pink;
  }
  
  a.clean:hover{
  
  color:pink;
  background-color:transparent;
  cursor: auto;
  
  }
  

#new{
  border: 15px double pink;
}

.month{
  font-size:28px;
  font-weight: bold;
  font-style: italic;
  display: inline-block;
  border: 15px ridge #383838;
  background-color: #252525;
  padding: 10px;
  margin: 20px;

  width:80px;
  height: 80px;
  text-align: center;

  vertical-align: bottom;
  background-repeat:no-repeat, no-repeat;
  background-position: center, center;

  vertical-align: top;
  overflow:hidden;
  float:left;
}

.month img{
padding: 0px;
}

.anim2{
  animation-name: updgrow2;
  animation-duration: 0.5s;
  animation-timing-function: steps(4);
  animation-play-state: running;
  animation-fill-mode: forwards;
  background-repeat: repeat-x, repeat-y;
}

img{
  padding: 10px;
}

@keyframes blink{
  0%{opacity: 1;}
  49.999%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 0;}
}

.blink{
  animation-iteration-count: infinite;
  animation-name: blink;
  animation-duration: 3s;
}


@keyframes moonzoom{
  0%{left: 10vw; top: 97vh; width:3vw; height: 3vw; z-index: -2;}
  25%{width:1vw; height: 1vw;}
  50%{left: 90vw; top: 3vh; width:3vw; height: 3vw; z-index: -2;}
  50.001% {z-index: -4;}
  25%{width:23vw; height: 23vw;}
  100%{left: 10vw; top: 97vh; width:3vw; height: 3vw; z-index: -4;}
}

@keyframes sunzoom{
  0%{left: -5vw; top: 50vh; width:2vw; height: 2vw; z-index: -6;}
  50%{left: 105vw; top: 0vh; width: 2vw; height: 2vw; z-index: -6;}
  100%{left: 105vw; top: 0vh; width: 2vw; height: 2vw; z-index: -6;}
}

.mapbox{
  width: 60px;
  height: 60px;
  overflow: hidden;
  position: fixed;
  left: 0;
  bottom: 0;
  background: black;
  background-image: url(../things/img/compass.gif);
  background-repeat: no-repeat;
  background-position: 10px 10px;
  border-right: 1px solid grey;
  border-top: 1px solid grey;
  font-family: 'Batang', serif;
  font-size:16px;
  color: transparent;
  padding: 10px;
  z-index:9999;
  text-shadow: none;
  letter-spacing: 2px;
  line-height:10vh;
}

.mapbox:hover{
  text-align:left;
  color: white;
  width: 650px;
  height: 356px;
  padding-left: 95px;
  overflow-y: hidden;
  background-image: url(../things/img/compass.gif), url(../things/img/greystripe1.gif);
  background-repeat: no-repeat, repeat;
  background-position: 10px 10px, 0px 0px;
  background-size: auto, 100px;
  line-height: 16px;
}

.mapbox img{
vertical-align: bottom;
padding:0;
}

table, th, td {
   border: 1px solid #333333;
   background: white;
   color: black;
   font-size: 12px;
}

td{
  padding: 5px;
  width: 125px;
}

td:hover{
  background: #FFEDED;
}

.note{
  background-color: #1D1D1D;
}

.spacer{
  width:100%;
  height:100px;
  pointer-events: none;
}

.anim2 > .spacer{
  height:0px;
}

.year{
  image-rendering:pixelated;
  -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0); 
  background-color:transparent;
  background-image:url(gradient.gif);
   border-right:20px solid black;
    border-bottom:20px solid black;
    background-position: right;
    background-size: auto;
    background-repeat:repeat-y;
  display: inline-block;
  text-align:left;
  text-indent:10px;
  margin-right:20px;
  margin-bottom:20px;
  padding-right:20px;
  padding-bottom: 20px;
  padding-left:20px;
}

.oldyear{
  image-rendering:pixelated;
  -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0); 
    background-image: url(gradient2.gif), url(gradient.gif);
    background-position: left, right;
    background-repeat: repeat-y;
    border-left: 20px solid black;
    border-right: none;
    padding-right: 50px;
    margin-right: -50px;
    padding-left: 30px;
}

@font-face {
	font-family: 'vcr';
	src: url('../things/fonts/VCROSDMono.woff2') format('woff2'),
		url('../things/fonts/VCROSDMono.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

.yearname{
  letter-spacing: 25px;
      line-height: 20px;
      margin-right: -20px;
      font-size: 41px;
      -webkit-text-stroke: 2px black;
      text-stroke: 2px black;
      background-color: black;
      font-family: 'vcr';
    padding-left: 20px;
    /* this was 20 */
    margin-left: -25px;
    /* this is new */
    width: calc(100% + 34px);
}

.oldyear > .yearname{
    /*text-align: right;*/
    margin-left: -30px;
    padding-left: 30px;
}
 ::selection {
  background: pink;
  color: black;
}
::-moz-selection {
  background: pink;
  color: black;
}

.container{
position:relative;
width:100%;
height:auto;
}
.closebutton{opacity:0; pointer-events:none;transition-delay:1s;height:0px; background-position:1000px 1000px;}

.anim2 > .closebutton{
    opacity:1;
    pointer-events:all;
    position: relative;
    top: -10px;
    left: calc(100% - 34px);
    height: 31px;
    width:44px;
    background-image:url(x2.png);
    background-repeat:no-repeat;
    background-position:center;
    margin-bottom:-31px;
    transition-delay:0s;
}

.anim > .closebutton{
    opacity:1;
    pointer-events:all;
    position: relative;
    width: 20px;
    top: -16px;
    left: calc(100% - 4px);
    height: 20px;
    background-image:url(x.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin-bottom:-20px;
    transition-delay:0s;
}



.closebutton:hover{
filter:saturate(150%);
}

.closebutton:active{
filter:hue-rotate(180deg) invert(1);
}

.anim2 > .closebutton:active{
filter:hue-rotate(-90deg);
}

@keyframes cwfade{
0%{color:transparent; text-shadow:0px 0px 20px pink;}
49.5%{color:transparent; text-shadow:0px 0px 0px pink;}
50%{color:pink; text-shadow:0px 0px 0px transparent;}
70%{color:pink;}
100%{color:transparent; text-shadow:0px 0px 20px pink;}
}
.cw{
color:#2b2021;
background-color:#2b2021 !important;
animation-name:cwfade;
animation-duration:2s;
animation-play-state:paused;
animation-direction:normal;
animation-iteration-count:infinite;
animation-fill-mode:forwards;
user-select:none;
}

.cw:active{
animation-play-state:running;
}