@font-face {
    font-family: "NDSBIOS";
    src: url("fonts/NDSBIOS.ttf"); /* imports NDSBIOS font */
}


     body {

 font-family: "NDSBIOS" #ffffff; /* applies font to everything in body section */
 
} 




.center { /* style for centering of nav bar */

display: block;
margin-left: auto;
margin-right: auto;
width: 50%;

}

.navbar { /* actual style of navbar */
width: 40%;
margin: auto;
text-align: center;
background-color: #111;
padding: 10px;
border: 1px solid #ffffff;
font-family: "NDSBIOS";
font-size: 30px;

}


.container {  /* style of the grid layout of main page */

display: grid;
grid-template-columns: 350px 1fr 350px;
grid-template-rows: auto 1fr auto;
border: 1px solid white;
 gap: 25px;
  width: 90%;
  margin: 20px auto;
  align-items: start;


grid-template-areas: /* the layout of the grid */

"left main right"
"left main right"
"footer footer footer"
}



.left {grid-area: left; /* style of left area of grid */
border: 1px solid #ffffff;
padding-top: 20px;

display: flex;
  flex-direction: column;
  align-items: center;

}

.currently { /* style of the "currently i am" box */

  border: 1px solid white;
  background-color: #087ac4;
  width: 300px;
  
}





.right {grid-area: right; /* style of right area of grid */
border: 1px solid #ffffff;
padding-top: 20px;

display: flex;
  flex-direction: column;
  align-items: center;


}

.right img { /* styling of the buttons in this section */
  display: block;
  width: 88px;
  height: 31px;
  margin-bottom: 8px;
}

.footer {grid-area: footer; /* style of footer area of grid */
border: 1px solid #ffffff;
}


.pmain  /* the main style of all <p> tags */

{

    color: white; font-family: NDSBIOS; font-size: 25px; margin-top: 10px; padding-left: 35px;
    overflow: auto;
}

.currently .pmain { /* style of p within the currently box */

     padding-left: 0px;
     margin-right: 25px;
}


.pmainpicto /* the main style of all <p> tags */

{

    color: rgb(0, 0, 0); font-family: NDSBIOS; font-size: 20px; padding: 15%; padding-left: 10px; padding-top: 10%; line-height: 20px;
   
}

.changelog .pmain {

padding-left: 6px;


}


.pmainintro  /* the main style of all <p> tags */

{

    color: white; font-family: NDSBIOS; font-size: 25px; margin-top: 10px; padding-left: 25px; padding-right: 25px;
    overflow: auto;
}


.left *{margin-left: 0px;
margin-right: 0px;
}

.intro  {

border: white solid 1px;
margin-bottom: 25px;

}

.todo {

border: white solid 1px;


}

.todoreal {

border: white solid 1px;
height: 300px;
width: 300px;
overflow: auto;
margin: auto;
padding: 10px 10px;
background-color:#087ac4;


}

.todoreal ul {
 
 padding-right: 10px;
  
}

.todoreal li {

  padding-bottom: 10px

}


.changelog {

border: white solid 1px;
border-radius: 15px;
height: 400px;
width: 300px;
overflow: auto;
margin: auto;
padding: 10px 10px;
background-image: url(images/pcbck.png);
position: relative;

}


.purple-box {

position:absolute;
top: 0;
left: 0;
width: 150px;
height: auto;
padding-right: 50px;


}

.log-entry {

background-image: url(images/saladpicto.png);
  background-size: 100% 80%;
 background-repeat: no-repeat;
 height: 150px;
 margin-top: 50px;

}

.copyright {

 color: white; font-family: NDSBIOS;
width: 30%;
margin: auto;
text-align: center;
background-color: #111;
padding: 5px;
border: 1px solid #ffffff;
font-family: "NDSBIOS";
font-size:15px;

}



.webring-boxes {

display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 50px;



}


.webring-boxes .box {

border: solid white 1px;
flex: 1;
height: 170px;
background-image: url(images/TBD.gif);
background-color: white;
max-width: 220px;
}

/* fish related styling */
.fishfriend {
    position: fixed;
    bottom: 12px;
    right: 12px;
    width: 100px;
    z-index: 999;
    cursor: pointer;
}


.fishfriend2 {

    z-index: 999;
    cursor: pointer;
}

.fishfriend2:active {
    animation: fishclicked 0.05s forwards;
}

.fishfriend:active {
    animation: fishclicked 0.2s forwards;
}

@keyframes fishclicked {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0.5);
    }
}



.random-image {
width: 300px;
height: 300px;
margin-left: 100px;
margin-bottom: 25px;
display: block;
margin-right: auto;
border: 1px solid white;

}



.image-generator {
display: flex;



}

.guestbook {

width: 500px;
height: 700px;
margin-left: auto;
margin-right: auto;
display: block;
padding-bottom: 100px;



}