body {
  font-family: sans-serif;

  color:white;
  background-color: black;
}
@font-face {
  font-family: pixel;
  src: url(./assets/rasterforge.ttf);
}

.text {
color: black;
}


/*styling for the buttons*/

.button{
  font-family: pixel, "Courier New" , monospace;
  width: 12%;
  aspect-ratio:10/2;
  border-style: solid;
  display: grid;
  place-items: center;
  font-size:120%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right:20px;
  color: green;
  background-color: black;
  border-color:green;
  position:absolute;
}


/*@keyframes blink { 50% { color: black; } }*/

.button:hover{
	animation: blink .3s step-end infinite alternate;
}
.pdf{
  max-width: 50%;
  aspect-ratio: 4 / 3;
  float: left;
}
.float{
  float: left;
  padding: 10px;
  margin-right: 55%;
  display: grid;
  place-content: left;
  max-width: 50%;
}
/*individual control over the rotation and maybe other stuff later on*/
#week1{
  rotate: 10deg;
  position: absolute;
  top: 10%;
  left: 12%;}
#week2{
  rotate: -2deg;
  position: absolute;
  top: 10%;
  left: 27%;}
#week3{
  rotate: 2deg;
  position: absolute;
  top: 9%;
  left: 44%;}
#week4{
  rotate: -2deg;
  position: absolute;
  top: 7%;
  left: 60%;}
#hidden4{
  rotate:-2deg;
  position: absolute;
  top:7%;
  left:60%;
  width:12%;
  aspect-ratio: 10/2;
  z-index:10;
  padding:10px;
}

#week5{
  rotate: 2deg;
  position: absolute;
  top: 12%;
  right: 10%;}
#week6{
  rotate: -1deg;
  position: absolute;
  left: 9%;
  top: 20%;}
#week7{
  rotate: -7deg;
  position: absolute;
  left: 25%;
  top: 23%;}
#week8{
  rotate: 10deg;
  position: absolute;
  left: 42%;
  top: 25%;}
#week9{
  rotate: -20deg;
  position: absolute;
  left: 60%;
  top: 22%;}
#week10{
  rotate: 35deg;
  position: absolute;
  right: 12%;
  top: 27%;}
#timer{
  width: fit-content;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 25%;
  display: flex;
  align-items: center;
}
.countdown{
  font-size: 10vw;
  width: auto;
  padding-right:10px;
  padding-left:10px;
  color:red;
}
#boom{
  position: absolute;
  left:60%;
  top:-15%;
  visibility: hidden;
}
#fire{
  position: absolute;
  bottom:0%;
  width:85%;
  right:1%;
  visibility:hidden;
  height: 60%;
  opacity: 70%;
}
#bomb{
  top:45%;
  left:75%;
  background: linear-gradient(to right, red , orange , yellow, green, cyan, blue, violet);
  -webkit-background-clip: text;
  color: transparent;
}
#repo{
  width: fit-content;
  position: absolute;
  margin-bottom: 20px;
  display:grid;
  place-items:center;
  grid-template-columns: auto auto;
  bottom: 0px;
}
#eagle{
  aspect-ratio: 4/1;
  width: 25%;
  rotate: 7deg;
  position: absolute;
  visibility: hidden;
  top:0%;
  left:0%;
}
#grab{
  aspect-ratio:4/1;
  width:25%;
  rotate:10deg;
  position:absolute;
  top: 6%;
  right: 10%;
  visibility: hidden;
  opacity:0.5;
}
#americafuckyeaaaaaaaah{
  visibility: hidden;
  height: 59%;
  width:70%;
  position:absolute;
  top:30%;
  left:50%;
  opacity: 20%;
  rotate:-10deg;
}