*{
    display: grid;
    box-sizing: border-box;
}

html {
    scrollbar-color: #b9e8bb rgba(255, 173, 79, 1);
    scrollbar-width: thin;
        }

title{
    display: none;
}

textarea{
    max-width: 165px;
    min-width: 155px;
    min-height: 80px;
    max-height: 160px;
    background-color: #b9e8bb;
    color: rgb(198, 73, 35);
    margin-left: auto;
    margin-right: auto;
}

.myfaves{
    display: none;
}

#counter{
    max-height: 20px;
    margin: auto;
    border: 1px solid;
    margin-bottom: 30px;
}

#counter img{
    height: 100%;
    width: auto;
}

.myfaves img{
    
    min-height: 90px;
    max-height: 110px;
}

#contentbox{
    margin: auto;
    
}

.faveheadings{
    display: none;
}

img{
    max-height: 230px;
    width: 100%;
    object-fit: cover;
}



div img{
    width: 100%;
}

a{
    display: inline;
}

#statusBox{
    background-image: url(backgrounds/bluesquarebg.png);
    grid-row-start: 4;
    grid-row-end: 6;
    grid-column-start: 3 ;
    max-width: 200px;
    max-height:250px;
    height: fit-content;
    border-bottom: 5px solid;
    padding-bottom: 5px;
}

#statuscafe {

    background-color: rgb(240, 212, 153);
        background-image: url(images/orangestar.jpg);
            background-size: 280px ;
                background-position: right;
                    background-blend-mode:screen;
                    

    border: 1px solid rgb(65, 43, 155);

    min-width: 80%;
    max-width: 90%;
        min-height: 90%;
            height: fit-content;
                margin: auto;
                    margin-top: 5px;
                    overflow: hidden;
                        
}


#statuscafe-username {
    margin-bottom: 1px;
    height: fit-content;
    width: 100%;
        color: white;
            font-size: 13px;
                padding-left: 2px;
                    
                        background: linear-gradient(lightblue 0%, rgb(102, 102, 234) 80%)
}

#statuscafe a{
    font-size: 14px;
    color: rgb(67, 67, 182);
}

#statuscafe-content {
    font-size: 0.8em;
    text-align: left;
    padding: 3px;
}

#statusframe{
  font-size: 0.8em;
  max-width: 100%;
  max-height:80px;
  padding: 3px;
}

.column1{
    grid-column-start: 1;
    max-width: 200px;
}

    .column2{
        grid-column-start: 1;
    }

.row4{
    grid-row-start: 4;
}


body {
    z-index: 3;
        font-family: "Chakra Petch", monospace;
            font-weight: lighter;
                width: 900px;
    margin-left: auto;
        margin-right: auto;
    position: relative;
        display: grid;
    background-image: url("backgrounds/orangeufobg.png");
        background-color: rgb(170, 108, 97);
            background-size: auto;
                background-blend-mode: lighten;
    color: rgb(229, 97, 25);      
    }

p{
    margin: 5px;
    font-size: 12px;
}

a{
   font-size: 12px;
}

h4{
    font-size: 11px;
    font-family: "Vend Sans";
    font-weight: 100;
}

#titleBox{
    text-decoration: underline;
    color: whitesmoke;
    grid-column-start: 1;
    grid-column-end: 5 ;
    grid-row-end: 2;
    padding: 10px;
    background-color: sienna;
    font-family: "Vend Sans", sans-serif;
    font-style: italic;
    font-size: 30px;
    height: 150px;
    background-image: url(images/greenfish.jpg);
    background-size: 900px;
    padding-top: 80px;
    border-bottom: 3px solid midnightblue;
}

#titleBox h2{
    text-align: end;
}

.titleStyle{
    background: #fffced;
    background: linear-gradient(180deg, rgb(254, 245, 214) 0%, 
     rgb(247, 200, 143) 14%,
     rgba(255, 173, 79, 1) 85%, rgb(243, 178, 121) 99%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 30px;
    color: rgb(255, 255, 255);
    max-width: 95%;
    padding-left: 8px;
    margin-top: 2px;
    height: min-content;
    font-family: "Vend Sans",monospace;
    border: 2px solid orangered;
    border-left: none;
    font-style: italic;
    z-index: 2;
    margin-bottom: 0px;
}

.titleStyle img{
    object-fit: contain;
    width: min-content;
    height: 18px;
    margin: auto;
    margin-left: 10px;
}

h2{
    margin: 0px;
    padding: 0px;
}

h3{
    margin: 0px;
    padding: 0px;
}

.imgBox{
    width:fit-content;
    height: fit-content;
}

#mainBox{
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        border: 3px solid rgb(65, 43, 155);
        border-radius: 10px;
        border-top-left-radius: 40px ;
        border-bottom-right-radius: 40px;
        width: 900px;
        background-color: rgb(65, 43, 155);  
        background-image: url("backgrounds/bluemoonbg.png");
        background-blend-mode: lighten 0.5;
        grid-template-columns: 170px auto 190px 165px;
        grid-template-rows: auto auto auto auto auto auto auto;
       } 

#intro{
    max-height: 370px;
    position: relative;
        border: 3px solid rgb(149, 82, 82);
            border-bottom: 8px solid orangered;

        margin-left: auto;
            margin-right: auto ;
        
        background-image: url("backgrounds/yellowsquarebg.png");
        
        grid-column-start: 2;
            grid-column-end: 4;
        
        grid-row-start: 2;
            grid-row-end: 4;
        
        padding: 10px;
       }

       #introText{
        display: flex;
        background-color: antiquewhite;
        border: 2px solid rgb(229, 97, 25); 
        flex-flow: column;
        line-height: 1.5;
        padding: 10px;
        padding-bottom: 5px;
        padding-left: 0;
       }

       #fishglobe{
        max-height: 160px;
        max-width: 200px;
         margin: auto;
        margin-left: 10px;
        overflow: hidden;
        object-fit: contain;
       
       }

       #fishglobe img{
        max-height: 260px;
        max-width: 100%;
       }

       #intro p{
        height: fit-content;
        float: left;
        padding: 5px;
        display: inline;
       }


       #visitcount{
        margin-left: auto;
        margin-right: auto;
       }

       #date{
        color: #e97859;
        display: inline;
       }

       span{display: inline;}

.alignleft{
    text-align: left;
}   

li{
   text-align: right;
   padding: 0;
   line-height: 12px;
   border-top: 1px dashed;
 
}

li p{
      font-size: 11px;
}

.head{
    background-color: #e97859;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: right;
    border: 1px solid;
}

#updatecontainer{
    position: relative;
    align-items: end;
    margin-left: 75px;
    margin-right: auto;
    border-right: 1px dashed;
    padding-right: 10px;
    
}

#fishcomputer{
    object-fit: contain;
    margin: 0;
    min-height: 50px;
    display: inline;
    height: 140px;
    position: absolute;
    z-index: 4;
    left:-120px;
    top: -20px;


}

#updaterow{
    border-top: 2px dashed;
    padding-top: 10px;
    margin-left: 5px;
   
   
}

#updatebox{
    width:200px ;
    padding: 0;
    margin-right: 0px;
    border-radius: 5px;
    border: 1px solid #e97859;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: antiquewhite, orange;
    
    

background: #faf0d7;
background: linear-gradient(90deg,rgba(250, 240, 215, 1) 0%, 
                                    
                                            rgba(255, 203, 158, 1) 90%, 
                                                rgba(255, 194, 140, 1) 99%);

}

.scrollbox{
    overflow: scroll;
    scrollbar-width: thin;
    scrollbar-color: antiquewhite, orange;
}

ul{
    max-height: 100px;
    width: 100%;
    float: right;
    padding: 0;
    margin: 5px;
    border: 1px solid;
    border-top: 0;
}

#updatebox h3{
    color: rgb(250, 239, 226);
    text-decoration: underline dashed;
    padding-right: 3px;
    text-align: right;
}

#navBox{
    flex-direction: column;
     max-width: 300px;
    background-color:  rgb(203, 148, 128);
    grid-row-start: 2;
    grid-row-end: auto;
}

    .navButton{
        border: 1px solid rgb(229, 97, 25);
        text-decoration: dotted;
        color: rgb(229, 97, 25);
        width: 100%;
        max-height: 30px;
        border-radius: 5px;
        padding-top: 3px;
        padding-left: 5px;
        margin-left: auto;
        margin-right: auto;
        background: #f7f3da;
        background: linear-gradient(180deg,rgb(252, 249, 231) 0%,
                                            rgba(250, 240, 215, 1) 45%,
                                             rgba(250, 240, 215, 1) 85%,
                                             rgba(242, 191, 114, 1) 100%);
    }

.basicBox{
    border: 1px solid midnightblue;
    background-color: #e8f7da;
    height: fit-content;
}

#chat{
    color: orangered;
    max-width: 200px;
}

#mushrooms{
    border-bottom: 3px dashed orange;
}

#statuscolumn{
    grid-row-start: 4;
    grid-row-end: 6 ;
    grid-column-start: 3;
    grid-column-end: 4 ;
    background-image: url("backgrounds/buttonsbg.png");
    border-bottom: 2px solid;
    border-right: orangered 1px solid;
    overflow: hidden;
}

#blinkierow{
    
     border: 2px solid orangered;
     flex-wrap: wrap;
     object-fit: contain;
     margin-left: auto;
     margin-right: auto;
     position: absolute;
     bottom: 0;
     background-color: midnightblue;
    
}

#blinkierow img{
   width: 33%;
   margin-left: 1px;
   
}

#badgerow{
    height: fit-content;
}


#listeningBox{
    background-color: rgb(173, 243, 126);
    min-height: fit-content;
    width: 170px;
    max-height: 200px;
    padding: 0;
    background-image: url(backgrounds/greenapplebg.png);
    background-blend-mode: lighten;
    grid-column: 1;
    margin-bottom: 0;
    border-bottom: 4px solid;
    border-top: 1px solid;
    z-index: 2;
}

    #listeningBox iframe{
        font-size: 12px;
        margin: 0;
        
        position: relative;
        top:20px;
        width: 120px;
            max-height: 50px;
    
        background-color: rgb(208, 228, 174);
            background: linear-gradient(white 0%,rgb(208, 228, 174) 30%, rgb(136, 213, 136) 100%);
    
        padding: 2px;
    
    margin-left: auto;
        margin-right: 0;

    text-align: center;
        border: inset 2px rgb(96, 178, 66);
            border-bottom-left-radius: 5px;
                border-top-left-radius: 5px;
                    border-right: 0;
    z-index: 2;
    color: green;
}

#listeningBox a{
    color: orange;
}

#headphonefish{
    margin-left: auto;
    margin-right: auto;
    margin-top: -5px;
    margin-bottom: -10px;
    max-height: 100px;
    overflow: hidden;
    border: 3px dashed green;
    border-radius: 3px;
}

#headphonefish img{
    height: 100px;
}

#lightfish{
    overflow: hidden;
    border-top: 2px solid;
    border: 1px solid;
    width: 190px;
}

#lightfish img{
    width: 110%;
    object-fit: contain;
}

.sideimg{
    border-top: 3px dashed orange;
}

#aboutMe{
    grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 4;
        grid-row-end: 6;
        max-height: fit-content;
        padding-left:0 ;
        padding-right: 0;
        padding-bottom: 15px;
        border: orangered 2px solid;
        position: relative;
        background-image: url("backgrounds/flowerleafbg.png") ;
        max-width: 550px;
}

#aboutrow{
    padding: 0;
    margin-bottom: 5px;
}


#ipod{
    border:none;
    height: 30px;
    z-index: 3;
    float: right;
    position: relative;
    bottom: 10px;
    left:80%;
    transform: rotate(10deg);
}

.row{
    display: flex;
        flex-flow: row;
}
.column{
    display: flex;
    flex-flow: column;
}

#aboutText{
    border: 2px rgb(237, 167, 117) inset;
        background-color: rgb(222, 241, 179);
    padding: 8px;
    width: 90%;
    height: fit-content;
    border-radius: 5px;
    padding: 10px;
    margin-left: 8px;
    position: relative;
    top:-15px;
    margin-bottom: 3px;
}

#aboutText h4{
    font-size: 14px;
    text-decoration: dashed;
    padding-left: 5px;
    margin: 0;
    margin-left: 0;
    border-bottom: 1px orangered dashed;
    float: left;
} 

#aboutbox{
    height: 100%;
    padding: 0;
    padding-bottom:10px;

}

p{
    display: inline;
}

#abtimg{
    height: 120px;
    width: auto;
    border: 3px dashed;
    overflow: hidden;
    margin-left: 22px;
    margin-right:2%;
    display: inline;
}

#abtimg img{
    height: 100%;
    width: 100%;
}

#torophone{
    transform: rotate(-15deg);
        z-index: 4;
        max-height: min-content;
        position: absolute;
        height: 100px;
        width: fit-content;
        object-fit: contain;
        top:60px;
        
}

#chao{
    max-width: fit-content;
    align-self: flex-end;
    float: right;
    position: absolute;
    bottom: 18px;
}

#rightbox{
    background: linear-gradient(lightblue 0%, slateblue 100%);
    grid-column-start: 4;
    grid-column-end: 5;
    overflow: hidden;
    grid-row-start: 2;
    grid-row-end:7;
}

#leftbox{
    background-image: url("backgrounds/flowerleafbg.png");
    grid-row-start: 3;
    grid-row-end: 7;
    overflow: hidden;
    width: 170px;
}

.gradientbg{
    padding: 2px;
    background: #fffced;
    background: linear-gradient(90deg,rgba(255, 252, 237, 1) 0%,
                                 rgba(250, 240, 215, 1) 8%,
                                 rgba(254, 191, 116, 1) 34%,
                                 rgba(255, 173, 79, 1) 85%,
                                 rgba(255, 154, 66, 1) 99%);
}

.button{
    height: 35px;
    width: 92px;
    border: inset 2px rgb(57, 167, 57) ;
    margin: auto;
}

#linkme{
    grid-column: 1;
    max-height:fit-content;
    max-width: 170px;
    padding-bottom: 5px;
}

#linkme .button{
    margin-top: 5px;
    margin-bottom: 5px;
}

.buttons{
   border-bottom: orange 2px solid;
   border-top: orange 2px solid;
   overflow: hidden;
   width: 170px;
} 

.stampBox{
    margin-top: 0;
    max-width: 170px;
    margin-left: 0;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(90deg, white 0%, antiquewhite 60%, orange 100%);

}
.stampBox img{
    float: left;
    width: 50%;
    height: auto;
    object-fit: contain;
 
}

#footer{
    grid-row-start: 7 ;
    grid-row-end: 8;
    grid-column-start: 1;
    grid-column-end: 5;
    min-height: 32px;
    max-height: 38px;
    border: 1px solid;

    object-fit: contain;
    
}

#footer img{
    height: 100%;
    max-width: 100px; 
    border: 1px solid;
    
}

.absolute{
    position: absolute;
    max-height: 200px;
    max-width: 200px;
}

#solong{
    bottom: 30px;
    right: -170px;
    height: 140px;
    width: auto;
}

#balloon1{
    top: 100px;
    left:-80px;
    width: auto;
    max-height: 40px;
}

#balloon2{
    top: 40px;
    right: -120px;
    width: auto;
    max-height: 60px;
}

#balloon3{
    top:200px;
    left:-60px;
    width: auto;
    max-height: 50px;
}

#bottombox{
    grid-row-start: 6;
    grid-row-end: 7 ;
    grid-column-start: 2;
    grid-column-end: 4;
    border: 1px solid orangered;
    border-left: 2px solid;
    width: 100%;
    height: auto;
    background-image: url("backgrounds/greendandelionbg.png");
}

#bottombox p{
    visibility:hidden;
}

#faveheader{
    margin-top: 0;
    background: linear-gradient(lightblue 0%, rgb(102, 102, 234) 80%);
    margin-bottom: 4px;
    color: white;
    border-bottom: 2px solid orangered;
    padding: 2px;
    height: 27px;
    text-align: center;
    font-family: "VT232",monospace;
}

#faveheader h4{
    padding: 0px ;
    margin: 0px;
    margin-right: 30px;
    font-family: "VT323",monospace;
    font-size: 20px;
    line-height: 20px;
}

#faves{
    padding: 0;
    min-height: 160px;
}

#favebox{
    width: 90%;
    background-size: 100% 10px;
    background: linear-gradient(
  to bottom,
  #e8f7da,
    #e8f7da 50%,
    #d8ecc4 50%,
  #d8ecc4
);
    border: 2px solid orangered;
    border-radius: 6px;
    margin: auto;
    margin-top: 5px;
    overflow: hidden;
    margin-bottom: 5px;
    
}

#favebox img{
    width: 80%;
    margin:auto;
    max-height: 90%;
    object-fit: contain;
}

button{
    object-fit: contain;
    max-height: 17px;
    max-width: 17px;
    color: grey;
    border: 2px inset darkgray; 
    position: relative;
    margin: auto;
    float: right;
}




button p{
    margin: auto;
    padding: 0;
}

h4{
    flex-flow: row;
}


#alignright{
    text-align: right;
}