/*CSS for INDEX*/
@font-face {
  font-family: "coolfont";
  src: url("KAISG___.TTF");
}

html, body{
         background-color: rgb(0,0,0);
         background-image: url("400warning.gif");
         background-repeat:repeat;
         margin:0;
         padding:0px;
         height:100%;
         cursor: url(https://files.catbox.moe/ezhtq6.ani), default;
}
.backbutton{
  position:absolute;
  z-index:150;
}
  .padding{
   height:5%;
   width:100%;
   top:0%;
  }
    .main {
 height:90%;
 width:75%;
 margin-top:10%;
 background-image:url("towerbg.gif");
 background-size: 100% 100%;
 background-repeat: no-repeat;
 max-width:10000px;
 max-height:10000px;
 min-width: 500px;
 min-height: 500px;
 margin: 0 auto;
 border: 5px solid #2B0200;
}
  
header {
  position:relative;
    width:89%;
    height:10%;
   font-family:"coolfont";
   color:white;
   margin: 0 auto;
   padding:20px;
   text-align: center;
   font-size: calc(1px + 8vw);
   z-index:1;
   } 
   
   .mobileheader{
    display:none; 
   }
   
   .gamelink{
     width:7%;
     height:84%;
     position:absolute;
     left:39%;
     cursor:pointer;
     display:none; 
     }
   
   .button {
  border: none;
  font-family:serif;
  color: red;
  text-align: center;
  text-decoration: none;
  font-size: calc(1px + 2vw);
	border-bottom: calc(1px + .5vw) inset rgba(0,0,0,.5);
	border-left: calc(1px + .5vw) inset rgba(0,0,0,.5);
	border-right: calc(1px + .5vw) inset rgba(255,255,255,.5);
	border-top: calc(1px + .5vw) inset rgba(255,255,255,.5);
	min-width: 10%; /*important*/
	min-height:10%;
	background-image:url("button2.png");
	background-size:calc(1px + 18vw);
  width: 15%;
  height: 8%;
  position:absolute;
  max-width: 18%;
  max-height:8%;
  right:15%;
  bottom:10%;
}

.tension {
  position:absolute;
  width:5%;
  height:auto;
  top:6%;
  right:12%;
  margin: 0;
  padding: 0;
}

.attention{
  position:relative;
  margin: 0 auto;
  line-height: 0.8;
  width:20%;
  color: #6d0000;
  margin-left:77%;
  bottom:2%;
  text-align:center;
  font-size: calc(1px + 1vw);
  font-family: "Times New Roman", Times, serif;
}
  
.crude {
  position:absolute;
  color: #f9f9f9;
  margin-right:0%;
  left:64.7%;
  bottom:8%;
  font-size: calc(1px + .8vw);
} 
.crude2 {
  color: #f9f9f9;
  position:absolute;
  bottom:6.5%;
  left:67.5%;
  font-size: calc(1px + .8vw);
} 
  
 .birthday {
  font-family:"coolfont";
  color: #f9f9f9;
  position:absolute;
  bottom:4%;
  margin:1%;
  font-size: calc(1px + 1vw);
 }
  
.popup-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}

.popup-content {
    background-color: #B53126;
    padding: 20px;
    position: relative;
}

.close-btn {
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.tension:hover {
    display: block;
}

	.comments {
	position:absolute;
	bottom:9%;
	left:14%;
  border: none;
  color: red;
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
	font-family: 'VT323', monospace ;
	border-bottom: 6px inset rgba(0,0,0,.5);
	border-left: 6px inset rgba(0,0,0,.5);
	border-right: 6px inset rgba(255,255,255,.5);
	border-top: 6px inset rgba(255,255,255,.5);
	box-sizing: border-box;
	cursor: pointer;
	min-width: 50px; /*important*/
	text-transform: uppercase;
	width: 50px;
	height: 10px;
	background-image:url("comments.png");
	}
	
	.discord{
	  height:38px;
	  width:38px; 
	  position:absolute;
	  left:20.3%;
	  bottom:8.5%
	  }
	  
	.email {
   height:40px;
	 width:40px; 
	 position:absolute;
	 left:18%;
	 bottom:9%
  }
  
	.popup-container2 {
    display: none;
    position: fixed;
    top: 0;
    left: 0px;
    width: 100%;
    height: 120%;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}

.popup-content2 {
    background-color: #384125;
    padding: 20px;
    position: relative;
}

.close-btn2 {
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.comments:hover {
      background-image:url("comment2.png");
      transition: 0.7s;
}
	
.button:hover {
      background-image:url("buton.png");
      transition: 0.7s;
}

#timer {
  top:-100px;
  font-size: 30px;
  color: red;
  position: relative; 
  z-index:999;
  bottom:;
  white-space: nowrap;
  animation: scroll 15s linear infinite;
}
  
.youare{
position:relative;
color:red;
bottom:30px;
left:0px;
font-size:30px;
white-space: nowrap;
animation: scroll 15s linear infinite;
}

.closer{
position:relative;
color:red;
bottom: 160px;
font-size: 30px;
left:574px;
white-space: nowrap;
animation: scroll 15s linear infinite;
}

.timerbox {
 max-width:10000px;
 max-height:10000px;
 min-width: 300px;
 min-height: 35px;
 margin: 0 auto;
 margin-top:0.2%;
height:35px;
width:900px;
background-color: #000000;
border-top:4px inset #363636;
border-bottom:4px #111111;
border-left:4px inset #212121;
border-right:4px inset #222021;
overflow: hidden;
}


@keyframes scroll {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }
    

/*CSS FOR MOBILE*/
@media only screen and (max-device-width: 800px) {
html, body{
max-width:700px;
height:100%
}  
.main {
min-width:100px;
margin: 0 auto;

background-size:100% 100%;
background-image:url("mobilebg.gif");
}

header{
  display:none;
}

.gamelink{
 display: none; 
}
.mobileheader {
   position:relative;
    width:89%;
    height:10%;
   font-family:"coolfont";
   color:white;
   margin: 0 auto;
   padding:20px;
   text-align: center;
   font-size: calc(10px + 15vw);
}

    }
.sign{
  position:absolute;
 width:auto;
 height:10%;
 left:%;
 top:6%;
}
.counterdiv{
 position:absolute;
 left:14%;
  bottom:18%;
  color:white;
  
}
.asof{
   position:absolute;
 left:14%;
  bottom:14.5%;
  color:white;
  font-size:10px;
  
}