* {
    box-sizing: border-box;
}

@font-face {
    font-family: Altima;
    src: url("fonts/Altima/Altima.woff");
}

@font-face {
    font-family: Reactor7;
    src: url("fonts/Reactor7/Reactor7.woff");
}

@font-face {
    font-family: Century;
    src: url("fonts/Century/century_normal.ttf");
}

@keyframes tilt {
    from {
        transform: rotate(10deg);
    }
    to {
        transform: rotate(-10deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* bg images */

#scrapbook1 {
    position: absolute;
    z-index: -1;
    left: 50px;
    bottom: 0px;
    filter: sepia(25%);
}

#scrapbook1 > img {
    width: 25vw;
    object-fit: contain;
    transform: rotate(45deg);
}

#scrapbook2 {
    position: absolute;
    z-index: -1;
    right: 0px;
    top: 0px;
    filter: sepia(25%);
}

#scrapbook3 {
    position: absolute;
    z-index: -2;
    left: 0px;
    bottom: -200px;
    filter: sepia(25%);
}

#scrapbook3 > img {
    width: 20vw;
    object-fit: contain;
    transform: rotate(-50deg);
    filter: sepia(25%);
}

#tickets1 {
    position: absolute;
    z-index: -2;
    left: 600px;
    top: -240px;
    filter: sepia(25%);
}

#tickets1 > img {
    width: 20vw;
    object-fit: contain;
    transform: rotate(-80deg);
    filter: sepia(25%);
}

#scrapbook4 > img {
    width: 10vw;
    object-fit: contain;
    transform: rotate();
    filter: sepia(25%);
}

#scrapbook5 {
    position: absolute;
    z-index: -2;
    right: 0px;
    top: 0px;
    filter: sepia(25%);
}

#scrapbook5 > img {
    width: 30vw;
    object-fit: contain;
    transform: rotate(30deg);
    filter: sepia(25%);
}

#philippines_stamp {
    position: absolute;
    left: 5px;
    top: 80px;
    z-index: -1;
    filter: sepia(25%);
}

#philippines_stamp > img {
    width: 10vw;
    object-fit: contain;
    transform: rotate(10deg);
    filter: sepia(25%);
}

#arizonastamp {
    position: absolute;
    left: 0px;
    top: -10px;
    z-index: -2;
    filter: sepia(25%);
}

#arizonastamp > img {
    width: 8vw;
    object-fit: contain;
    transform: rotate(20deg);
    filter: sepia(25%);
}

#money {
    position: absolute;
    z-index: -3;
    right: 250px;
    top: -100px;
    filter: sepia(25%);
}

#money > img {
    width: 20vw;
    object-fit: contain;
    transform: rotate(50deg);
    filter: sepia(25%);
}

.border {
    border: double 5px;
    border-radius: 0.5em;
}
/* main body */

body {
    overflow-x: hidden;
    font-size: 20px;
    font-family: Reactor7;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url("images/bgs/boat.jpg");
}

.container {
    scale: 0.925;
    width: 90vw;
    max-width: 100%;
    padding: 1em;
    filter: sepia(25%);
}

.content {
    display: grid;
    row-gap: 0.5em;
    column-gap: 0.75em;
    grid-template: "nav main" auto "nav main" auto "nav main" "footer footer" auto;
    margin: 0.5em;
}

.content > * {
    text-align: center;
    background-image: url(images/bgs/newspaperbg.jpg);
}

#footer {
    grid-area: footer;
    padding: 0.5em;
}

/* nav bar */
nav {
    grid-area: nav;
    padding: 1em;
    border: outset;
    border-color: #5d6b71;
    border-width: 6px;
}

ul {
    list-style: none;
}

ul > li {
    text-align: center;
    padding: 0.25em;
    margin: 0.15em;
    font-size: 1.25em;
    background-color: rgba(20, 20, 20, 0.15);
    border: hidden;
    border-radius: 0.2em;
    display: flex;
    flex-direction: row;
}

li > img {
    width: 0.8em;
    max-width: 100%;
    object-fit: contain;
    margin-right: 0.25em;
}

#nav_flags {
    display: flex;
    justify-content: center;
    align-content: center;
}

a {
    text-decoration: none;
    width: 100%;
    vertical-align: center;
}

a:link,
a:visited {
    color: black;
}

.shrine-dropdown:hover #shrine-dropdown-content {
    display: block;
}

.shrine-dropdown > img {
    width: 0.8em;
    max-width: 100%;
    object-fit: contain;
    margin-right: 0.25em;
}

#shrine-dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
    background-color: #f4f4f4;
    box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.2);
}
#shrine-dropdown-content a {
    text-align: left;
    display: block;
    padding: 0.25em;
}

/* main content */

main {
    overflow-x: hidden;
    overflow-y: auto;
    width: 55vw;
    max-width: 100%;
    height: fit-content;

    /* grid stuff */
    grid-area: main;
    justify-self: start;

    /* flex stuff */
    display: flex;
    flex-direction: column;
    padding: 1em;
    border: outset;
    border-color: #5d6b71;
    border-width: 6px;
}

#main_content-1 {
    display: flex;
    align-items: center;
    text-align: center;
}

main > p {
    margin: 0.5em;
}

main > #main_content-1,
#main_content-2,
#main_content-3 {
    margin: 0.5em;
}

/*aside*/

/*footer*/

@media only screen and (max-width: 601px) {
    #background_images {
        display: none;
    }

    .content {
        grid-template: "nav" auto "main" auto "asideRight" auto "asideLeft" auto;
        row-gap: 0.25em;
        margin: auto;
    }

    .content > * {
        display: block;
    }

    main {
        width: auto;
        font-size: 1.5em;
        max-height: 100%;
    }

    #status_box > p {
        font-size: 0.6em;
    }

    #status_box_header {
        font-size: 0.75em;
    }

    #pompompurin > img {
        width: 4.3em;
    }

    #main_content-1 {
        font-size: 0.75em;
    }

    #main_content-1 > div > img {
        width: 9em;
        margin-bottom: 1em;
    }

    main > #main_content-1 {
        display: block;
        align-content: center;
        justify-content: center;
        text-align: center;
    }

    #main_content-1 > p {
        float: none;
        margin: 0.5em;
    }

    #website_warning {
        font-size: 0.8em;
    }

    nav {
        position: relative;
        right: auto;
        border-left-style: outset;
    }

    li > img {
        display: none;
    }

    li > div > img {
        display: none;
    }

    #home {
        grid-area: home;
    }

    #about_me {
        grid-area: aboutme;
    }

    #media {
        grid-area: media;
    }

    #blog {
        grid-area: blog;
    }

    #exlinks {
        grid-area: exlinks;
    }

    li {
        width: 20vw;
        height: 5vh;
    }

    a {
        font-size: 1em;
        align-content: center;
    }

    ul {
        display: grid;
        grid-template: "home aboutme" auto "media blog" auto "exlinks exlinks" auto;
        font-size: 0.75em;
    }

    ul > li {
        padding: 0.15em;
        text-align: center;
        position: relative;
        right: 0.75em;
    }

    #main_content-2 {
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }

    #main_content-2 > #main_content-2_buttons,
    #wobbuffet,
    #status_box {
        margin: 0.5em;
    }

    #status_box {
        width: 100%;
    }

    #buttons1 > div > img {
        width: 25vw;
        object-fit: contain;
    }

    #buttons2 > div > img {
        width: 25vw;
        object-fit: contain;
    }

    #wobbuffet > img {
        width: 35vw;
        object-fit: contain;
    }

    #main_content-3 {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-evenly;
        align-items: center;
    }

    #chatbox > iframe {
        width: 100%;
    }
}