h1 {
    text-align: center;
    color: WHITE;
    font-family: 'Times New Roman', Times, serif;
}

h3, h4 {
    margin: 2px;
    font-family: Courier, Courier, monospace;
}

.main p, h2, h3 {
    text-align: center;
    font-family: Courier, Courier, monospace;
}

body {
    font-family: Courier, Courier, monospace;
}

p, ul {
    font-family: Courier, Courier, monospace;
}

.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.header-wrapper {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -20px;
}

.header-gif {
    position: relative;
    height: 100px;
    margin-left: 5px;
    margin-right: 5px
}

.nyan {
    display: flex
}

.nyan img {
    margin-bottom: 5px;
}

.cat-head {
    width: calc((300/1272) * 100%);
}

.trail {
    width: calc((162/1272) * 100%);
}

.welcome-image {
    margin-top: -100px;
    margin-bottom: -100px;
}

/* contains all stamps */
.stamp-container {
    text-align: center;
}

/* container that is inside the main containers */
.inner-container {
    background-color: rgb(4, 9, 29);
    width: 80%;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    overflow-y: auto;
    border: 2px outset rgb(84, 116, 190)
}


.log {
    border: 1px solid rgb(136, 215, 255);;
    padding: 5px;
}

.log p, h4 {
    color: rgb(136, 215, 255);
}

/* contains all columns */
.parent {
    display: flex;
    justify-content: center; 
    gap: 7px;
}

.container {
    background-color: white;
    padding: 20px;
    border: 5px ridge lightgray;
}

.main {
    width: 35%;
}

.side {
    width: 15%;
}

.side h4 {
    color: rgb(54, 84, 168);
}

/* left panel*/

.fish-link {
    position: relative;
}

.fish-image {
    position: relative;
}
    
.fish-text {
    text-align: center;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; 
    position: absolute;
    width: 100%;
    inset-block-start: calc(50% - 8px);
}

/* making sure text is in front of image on navigation fish */
.fish-text {
    z-index: 2;
}

.fish-image {
    z-index: 1;
}

/* formatting what navigation links look like */

.left {
    /* WHY IS THIS HAPPENING??*/
    margin-left: -50px;
}

.left a:visited {
    color: black;
}

.left a:hover {
    color: rgb(58, 96, 177);
}

.left a:active {
    color: red;
}

.fish-tin img {
    width: 126%;
}

.fish-tin img {
    margin-right: -13%;
    margin-left: -13%
}

.fish-link:hover {
    transform: rotate(8deg);
}

/* right panel*/

.right {
    display: flex;
    margin-left: 0;
    flex-direction: column;
    gap: 7px;
}

.inner-right {
    width: 100%;
}

#status-label {
    display: flex;
    margin-left: 15%;
}

#status-label img{
    width: 110%;
    max-width: 80px;
    margin: 5px;
}



#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

#socials {
    height: 100%;
}




body {
    background-image: url(../images/background.gif)
}


/*mobile layout*/
@media only screen and (max-width: 800px) {
    .parent {
        flex-direction: column;
    }

    .main, .side {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        
    }


    .right, .left{
        flex-direction: row;
    }

    #socials {
        margin-top: 0;
        margin-bottom: 0; 
        width: 100%;
    }

    .fish-tin {
        display: flex;
        align-items: center;
    }

    .fish-link {
        width: 90%;
    }

    .cat-head {
    width: calc((300/786) * 100%);
    }

    .trail {
    width: calc((162/786) * 100%);
    }

    .end {
        display: none;
    }

}