@font-face {
  font-family: 'Streetbomber';
  src: url('/Streetbomber PersonalUseOnly.ttf')
  }
    
html {
  background-image: url('cutelyFUCKTHESYSTEM.png');
}
.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 2fr .5fr;
  grid-template-rows: 0.5fr 2.5fr .2fr;
  grid-template-areas: 
  "nav nav nav"
  "sidebar main sidebar2"
  "sidebar footer footer";
  grid-gap: 0.2rem
}

nav {
  
  grid-column: 1 / 4;     
  background: url("punk.jpg");
  grid-area: nav;
  border-radius: 30px;
   border-width: 5px;
  border-style: solid;
  background-size: cover;
  background-position: center;
  background-color: #302244;
  border: 5px solid transparent;
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);  
  border-image-slice: 1;
  /* test seperated*/
  padding: 10px 20px;   
  padding: 5px;                          
  width: fit-content;
    margin: 0 auto;                            
}

main {
    background: black;
  grid-column: 2;
  grid-row: 2;
  grid-area: main;

}
#importanttext {
  height:10px;
  display: flex;
  align-items: center; 
  grid-area: text;
    font-family: 'Streetbomber';
    font-size:2;
    color: #39FF14;
}
#sidebar {
  grid-column: 1;
  grid-row: 2;
  grid-area: sidebar;
  background: url("TOUGHSHIT.gif") ;
    border-radius: 30px;
}
#Coolprofile{
 position: absolute;
 top:140px;
 left: 100px;
 height:150px;
 width: 150px;
}
#sidebar2 {
  background-size: cover;
  background-position: center;
  border-width: 5px;
  border-style: solid;
  border: 5px solid transparent;
border-color: blue;
  grid-column: 3;
  grid-row: 2;
  grid-area: sidebar2;
  background: url("fuckassbackground.jpeg") ;
  border-radius: 30px;
z-index: 1
}
.boringolbox{
  grid-column: 1;
  grid-row: 2;
  color:RED;
      font-size: 10px;
      font-family: "MS Sans Serif";
      line-height: 1.5;
      position: absolute;
      left: 40px;
      top: 300px;  
      background:blue;
      border-radius: 20px;
      padding: 20px;
}

footer {
  grid-column: 1 / 4;    
   grid-area: footer;
   background: url(weirdass.gif);
}
#tablelogo {
  grid-column: 2;
  grid-row: 2;
 Position: absolute;
 Width: 310px;
 height:150px;
  display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    top: 150px;
      left: 30%;  
}
#usyay{
    grid-column: 2;
  grid-row: 2;
  position: absolute;  
  top:  57%;   
  left: 42%;     
  transform: translate(-45%, -50%) rotate(18deg);  
  font-family: Impact, Arial Black, sans-serif;
  font-size: 1.3vw;
  letter-spacing: 1px;
  line-height: 1vw;
  text-align: center;
  white-space: nowrap;
  pointer-events: none; 
      z-index: 1;
}
#cuntyskull{
 position: absolute;  
  top:  60%;   
  left: 30%;  
  width: 200px;
  height: 200px
}
#awwbabyad{
  Position: absolute;
  align-items: center;
  bottom:40px;
  right: 2.1%;
  grid-column: 3;
  grid-row: 2;
  z-index:10
}

#content2 {
  bottom: 5%;
  left: 2%;
  Position: absolute;
  grid-area: sidebar;
  background: darkblue;
  height:200px;
  width:300px;
  background-color: #e4f4f7;
  border: 3px double #1a81e8;
  padding: 5px;
  overflow:auto;
  color: black;
 overflow-y: scroll; 
}
#credits4us{
     grid-column: 2;
  grid-row: 2;
    grid-area: main;
 Position: absolute;
 width: auto;
 height: 50px;
 right:14.8%;
 z-index:700;
 top: 17%;
}
.drawnbymechyyay{
 position: absolute;  
  top:  28%;   
  right: 15%;  
  width: auto;
  height: 400px;
  transform: rotate(-18deg);
  z-index: 0
}
#CLICKBAE{
  position: absolute;
   grid-column: 2;
  grid-row: 2;
    grid-area: main;
  right: 24%;
  top: 50%;   
  width: 220px;
  height: 50px;
  z-index: 5;
  -webkit-animation: pop 1s ease-in-out infinite alternate;
-moz-animation: pop 1s ease-in-out infinite alternate;
animation: pop 1s ease-in-out infinite alternate;
}

.theevilbox{
 position: absolute;
 z-index:1
}
/* animation for this!*/

@keyframes pop {
from { transform:scale(0.95) }
50% { transform:scale(1) }
to { transform:scale(0.95) }
}

@-webkit-keyframes pop {
from { -webkit-transform:scale(0.95) }
50% { -webkit-transform:scale(1) }
to { -webkit-transform:scale(0.95) }
}
/* ends */