@font-face {
src: url(https://dl.dropbox.com/s/8p8mi5uzbekohv7/Starborn.ttf);
font-family: starborn;
}
 
 
 @font-face {
    font-family: 'PIXEL Arial 14';
    font-style: normal;
    font-weight: 400;
    src: local('PIXEL Arial 14'), url('https://fonts.cdnfonts.com/s/122367/pixel-arial-14.woff') format('woff');
}


@font-face {
font-family: 'basiic';
 src: url('https://file.garden/Zztv0a9yEhr5pmEq/basiic.ttf') format("truetype");
 }


#side{
float:left;
list-style-type: none;
margin-top: -17px;
}

.sidebox{
  width: 260px;
  left: 0px;
  margin: 0px;
  margin-right: 20px;
  margin-top: 17px;
  background-color: var(--bgcolor);
  border:1px dashed var(--bordercolor);
  border-radius:10px;
}


.sidebox-inner{
    background-repeat:no-repeat,no-repeat;
    background-position:left top,right bottom;
    margin:-11px;
    padding:15px;
    }


.mainbox{
  width: 700px;
  margin: 0 auto;
  margin-top: 17px;
  background-color: var(--bgcolor);
  border:1px dashed var(--bordercolor);
  border-radius:10px;

}
    
.mainbox-inner{
    background-repeat:no-repeat,no-repeat;
    background-position:left top,right bottom;
    margin:-10px;
    padding:15px;
    }
    
    
.footer{
  float:left;
  text-align: center;
  width:975px;
  margin-top: 15px;
  background-color: var(--bgcolor);
  border:1px dashed var(--bordercolor);
  border-radius:10px;
}


.footer-inner{
    background-repeat:no-repeat,no-repeat;
    background-position:left top,right bottom;
    margin:-10px;
    padding:15px;
}
    
    
    #navigationbutton {
    width: 200px;
    margin: 5px;
    padding: 15px;
    border-radius: 10px;
    background-color: var(--accentcolor);
  }
  
  
  #littleguy{
  position: fixed;
  bottom: 0px; 
  cursor: pointer;
  }
  
  
  #littleguy:hover{
-webkit-animation: pop 2s ease-in-out infinite alternate;
 animation: pop 2s ease-in-out infinite alternate;
 -moz-animation: pop 2s ease-in-out infinite alternate;
  }
  
  
  #speechbubble{ 
  position: fixed;
  right: 10px;
  bottom: 285px;
  width:255px;
  height:220px;
  background-color: black;
  border: 2px solid white;
  overflow-y: scroll;
  overflow-x: hidden;
  color: white;
  text-align: center;
  display: flex; 
  align-items: center;
  }
  
  
  summary{
  cursor: pointer;
  text-decoration: underline;
  }
  
  
  p{
  padding-left: 15px;
  padding-right: 15px;
  }
  
  
  h1{
  color: var(--accentcolor);
  font-family: starborn;
  font-size: 29px;
  padding-left: 15px;
  padding-right: 15px;
    }
    
    
    a{
  color: var(--linkcolor);
  text-decoration:none;
  padding: 3px;
    }
    
    
    a:hover{
-webkit-animation:rainbow 1s infinite;
-ms-animation:rainbow 1s infinite;
-o-animation:rainbow 1s infinite;
animation:rainbow 1s infinite;
  text-decoration:none;
  background-color: black;
  padding: 3px;
}
    
    
    @-webkit-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-ms-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-o-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}


::-webkit-scrollbar{
width: 6px; 
}
 
::-webkit-scrollbar-track{
background-color: var(--bgcolor);
}
 
::-webkit-scrollbar-thumb{
background-color: var(--accentcolor);
}


#speechbubble::-webkit-scrollbar-track{
background-color: transparent;
}


#speechbubble::-webkit-scrollbar-thumb{
background-color: transparent;
}
        
        
@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}