* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

img {
        image-rendering: auto;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        image-rendering: -webkit-optimize-contrast;
}

@font-face {
    font-family: kirsch;
    src: url(./asset/font/minecraft/Minecraft.ttf);
}

body {
    font-family: kirsch;
    font-size: 15px;
    color: #c0c8cf;
    background-color: #1c2023;
    background-image: url("/asset/bg/flagwaver_dark.png");
    z-index: 1;
}

.header {
    display: flex;
    align-items: center;
    overflow: auto;
    
    padding: 10px;
}

.content {
    z-index: inherit;
    position: fixed;
    right: 2%;
    bottom: 0;
    align-items: flex-end;
    display: flex;
    justify-content: right;

    margin: 1% auto;

    width: 100%;
    gap: 10px;
}

.AboutMe {

    width: 24rem;
    height: 24rem;

    text-align: center;
    font-size: inherit;

    padding: 1rem 0;
    
    background-color: #252a2d;

    mask-image: url(./asset/bg/AboutMe.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;
}


.pfp {
    width: 140px;
    height: auto;
}

.border-left {
    margin: 10px;
    padding: 10px;
    border-style: double;
    border-width: 10px;

    border-color: #3a4044;
}

.sidebar {
    
    text-align: center;
    font-size: 14px;
    line-height: 30px;

    height: 100rem;
    max-height: 24.1rem;

    width: 100rem;
    max-width: 13rem;

    background-color: #252a2d;

    padding: 1rem auto;

    mask-image: url(./asset/bg/Links.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;
}

.buttons {
    position: fixed;
    left: 1%;
    bottom: 0%;
    align-items: center;
    display: flex;
    justify-content: left;
    flex-direction: column;
    text-align: center;
    width: 100% auto;
    max-width: 700px;
    margin: 1% auto;
    background-color: #252a2d;
}

/*Test buttons*/

h5 {
    line-height: normal;
}

.page {
    font-size: 16px;
    justify-content: center;
    display: flex;
    align-items: center;
    transition:
    cubic-bezier(0.075, 0.82, 0.165, 1)
            background-color 1s;
    animation-delay: 0ms;

    margin: 26% auto;
    height: 100%;
    max-height: 12%;
    width: 100%;
    max-width: 80%;

    background-color: #2e3438;
}

.page:hover {
    color: #1c2023;
    background-color: #c2bf88;
}

/*phone thingamajig LMAOOO*/
@media screen and (max-width: 670px) {

    .header {
        height: 40px;
    }

    body {
        background-position: 90%;
        background-repeat: no-repeat;
    }
    
    .content {
        position: relative;
        right: auto;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        display: flex;
        margin: 6% auto;
        gap: 10px;
    }

    .AboutMe {
        height: auto;
        width: 200%;
        max-width: 90%;
        mask: inherit;
        
    }

    .people *:has(img) {
        display: contents;
    }

    .sidebar {
        align-items: center;
        height: 90px;
        width: 200%;
        max-width: 90%;
        mask: inherit;
        display: flex;
    }

    .item {
        align-items: center;
        flex-direction: column;    
        display: flex;
        height: 80%;
        
        object-fit: cover;
    }

    .page {
        max-height: 40%;
        margin: 10px auto;
        padding: 6% 0%;
    }

    .pfp {
        width: 200px;
        height: auto;
    }

    .buttons {
        position: static;

        margin: 1% auto;
        max-width: 90%;
    }

    .links {
        overflow: auto;
        max-height: 200px;
    }
}