.balls {
    font-size: 50;
    color: rgb(255, 255, 255);
    background-color: rgb(6, 0, 65);
    padding: 20;
    float: left;
    border-style: groove;
    border-color: white;
}

.textst {

}

body {
background-image: url("./img/background/background1.png");
background-repeat: no-repeat;
background-size: contain;
background-color:black;
width:99.6vw;
height:95vh;
display:grid;
grid-template-rows: 3fr 24fr 0.5fr;
grid-template-columns: 1fr 16fr 1fr;
overflow:hidden;
}

#friend {
    width: 10%;
    height: 10%;
    display:flex;

    object-fit: contain;
    position:absolute;
    left:0%;
    scale: 1;
}

#debug1 {
    font-size:large;
    color:rgb(255, 142, 142);
}

.hidden {
    width: 0px;
    height: 0px;
}

.container1 {
display: flex;
  background-color: rgb(0, 105, 32);
}

#header {
grid-row: 1;
}

.main {
display:grid;
grid-area: 2 / 2;
grid-template-columns: 1.75fr 8fr 2.5fr;
grid-template-rows: 1fr;
overflow:hidden;
}

#footer {
grid-row: 3;
}

.center {
display:grid;
grid-area: 1 / 2;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
overflow:hidden;
}

.right {
display:grid;
grid-area: 1 / 3;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(16, 1fr);
background-color:rgba(68, 48, 160, 0);
overflow: hidden;
}

.left {
display:grid;
grid-area: 1 / 1;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(16, 1fr);
overflow:hidden;

}

.navfield {
display:grid;
grid-area: 1 / 1 / span 14 / span 4;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(16, 1fr);
background-color:rgb(122, 155, 192);
gap: 0.3em;

}

.navbuttoncontainer {
display:grid;
grid-template-rows:repeat(16, 1fr);
grid-template-columns:1fr;
grid-area: 3 / 2 / span 11 / span 8;
background-color:rgb(82, 154, 243);
gap: 0.2em;
padding: 2%;
object-fit: contain;
}

.navbuttoncontainer input {

width:100%;
height:100%;
}

.navicon {
grid-area: 2 / 2 / span 1 / span 8;
background-color:rgb(88, 255, 158);
}

@keyframes blink {
    0% {transform: translatex(-600%);}
    100% {transform: translatex(100%);}
}


.blinkies {
    display:flex;
    grid-area: 1 / 1 / span 1 / span 8;
    background-color:rgb(255, 91, 247);
    align-items:center;
    overflow:hidden;
}

.blinkies div {
    display:flex;
        width: 100%;
    height: 100%;
    padding: 1%;
    object-fit: contain;
    animation-name:blink;
    animation-duration:40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

.blinkies img {

}

.primary {
    display:flex;
    grid-area:2 / 1 / span 8 / span 8;
    background-color:rgb(32, 156, 136);
    border:6px solid;
    border-radius: 30px;
    border-color:rgb(127, 251, 255);
    margin:3px;
}

.guestbook {
    display:flex;
    background-color:rgb(45, 156, 142);
    width:96%;
    height:100%;
    border:8px transparent;
    border-radius: 30px;

}

.guestbook iframe {
scrollbar-width: thin;
}

.lbox1 {
    display:flex;
    padding: 4%;
    justify-content: center;
    background-color:rgb(58, 199, 140);
    grid-area: 4 / 1 / span 6 / span 8;
    border:6px solid;
    border-radius: 30px;
    border-color:rgb(170, 255, 237);
    margin:2%;
    overflow-x:hidden;
}

.lbox2 {
    display:flex;
    padding: 4%;
    justify-content: center;
    background-color:rgb(58, 199, 140);
    grid-area: 10 / 1 / span 6 / span 8;
    border:6px solid;
    border-radius: 30px;
    border-color:rgb(170, 255, 237);
    margin:2%;
}

.content1 {
    display:flex;
    flex-direction: column;
    padding: 20px;
    justify-items: left;
    overflow-y:auto;
    scrollbar-width: thin;
    overflow-x: hidden;
    width:100%
}

.content1 p {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 24px;
    color: rgb(255, 255, 255);
    float: left;
    text-indent: 5%;
    line-height: 130%;
}

.content1 figcaption {
    font-family:'Times New Roman', Times, serif;
    font-size: 18px;
    color: rgb(238, 238, 238);
    line-height: 105%;
    max-width: 100%;
    text-align: center;
    
}

.content1 figure {
    
    width: fit-content;
    height: fit-content;
    align-self: center;
    align-items: center;
    text-align: center;
    
}

.content1 h1 {
    font-family:fantasy;
    font-size: 30px;
    color: rgb(255, 255, 255);
    align-self: center;
    text-align: center;
}

.content1 img {
    max-width: 100%;
    max-height: 600px;
    object-fit: contain;
}

.content1 a {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    color: rgb(128, 255, 249);
    float: left;
    text-decoration: none;
    text-align: center;
    line-height: 150%;
}

.content2 {
    display:flex;
    flex-direction: column;
    padding: 6px;
    justify-items: left;
    overflow-y:auto;
    scrollbar-width: thin;
    overflow-x: hidden;
    width:100%
}

.content2 p {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    color: rgb(255, 255, 255);
    float: left;
    text-indent: 5%;
    
}

.content2 figcaption {
    font-family:'Times New Roman', Times, serif;
    font-size: 2-px;
    color: rgb(238, 238, 238);
    line-height: 105%;
    max-width: 100%;
    
}

.content2 figure {
    
    width: fit-content;
    height: fit-content;
    align-self: center;
    align-items: center;
    text-align: center;
    
}

.content2 h1 {
    font-family:fantasy;
    font-size: 22px;
    color: rgb(255, 255, 255);
    align-self: center;
    text-align: center;
}

.content2 img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

.content3 {
    display:flex;
    flex-direction: column;
    padding: 6px;
    justify-items: left;
    overflow-y:auto;
    scrollbar-width: thin;
    overflow-x: hidden;
    width:100%
}

.content3 p {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    color: rgb(255, 255, 255);
    float: left;
    
}

.content3 figcaption {
    font-family:'Times New Roman', Times, serif;
    font-size: 2-px;
    color: rgb(238, 238, 238);
    line-height: 105%;
    max-width: 100%;
    
}

.content3 figure {
    
    width: fit-content;
    height: fit-content;
    align-self: center;
    align-items: center;
    text-align: center;
    
}

.content3 h1 {
    font-family:fantasy;
    font-size: 22px;
    color: rgb(255, 255, 255);
    align-self: center;
    text-align: center;
}

.content3 img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
}

.ptext1 {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 24px;
    color: rgb(255, 255, 255);
    float: left;
    text-indent: 5%;
    line-height: 130%;
}

.ptext2 {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    color: rgb(255, 255, 255);
    float: left;
    text-indent: 5%;
}

.ptext3 {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    color: rgb(255, 255, 255);
    float: left;
}

.link {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    color: rgb(128, 255, 249);
    float: left;
    text-decoration: none;
    text-align: center;
    line-height: 150%;
}

.captiontext {
    font-family:'Times New Roman', Times, serif;
    font-size: 18px;
    color: rgb(238, 238, 238);
    line-height: 105%;
}