:root {


    --black: rgb(9, 9, 9);
    --dark-green: #0d2818ff;
    --green: #04471cff;
    --sea-green: #058c42;
    --malachite: rgb(22, 147, 64);
    --white: rgb(191, 194, 187);
    --timberwolf: rgb(101, 114, 106);

    --main-font-family: "MS PGothic", 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    --iconsize: 60px;
}


* {
    scrollbar-width: thin;
    scrollbar-color: var(--green) var(--black);
    box-sizing: border-box;
}


body {
    background-color: var(--black);
    color: var(--white);
    font-family: var(--main-font-family);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    background-image: url(/shrines/tma/_img/web-pattern.png);
    background-size: 300px;
    background-blend-mode: overlay;
    position: relative;
}


.container::after {
    content: "";
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    gap: 10px;
    position: relative;
}



.header img {
    max-width: 350px;
    margin-bottom: -20px;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 25px;
    /* font-size: 20px; */
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 4px;
    padding-bottom: 20px;
}

.hidden {
    color: var(--black);
}

#magnus {
    color: var(--malachite);
    font-size: 50px;
    line-height: 40px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}


.main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 5px;
    padding-bottom: 30px;
    align-items: center;
    position: relative;
}




.window {
    border-radius: 2px;
    border: 1px solid var(--dark-green);
    height: fit-content;
}

.window >* {
    padding: 4px;
}

.window .topbar {
    background-color: var(--dark-green);
    border-radius: 2px 2px 0px 0px;
    display: flex;
    justify-content: space-between;
    /* background-image: linear-gradient(var(--sea-green) -100%, var(--dark-green) 60%); */
}

.topbar .buttons::before {
    content: "— ⨉";
    padding-right: 2px;
}

.topbar .title::before {
    content: "> ";
    padding-left: 2px;
}

.window .content {
    display: flex;
    flex-direction: column;
    background-color: var(--black);
    background-color: rgb(12, 12, 12);
}


.window img {
    width: 100%;
    border-radius: 2px;
}


p {
    margin: 8px 3px;
}


#back {
    text-decoration: none;
    color: var(--sea-green);
}

#back:hover {
    text-decoration: underline;
}


.flex-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}


.flex {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}


.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 6px;
    border: 1px solid #00000000;
    width: calc(var(--iconsize) * 2);
    text-align: center;
}

.icon:hover {
    background-color: #bad3b215;
    border-radius: 2px;
    border: 1px solid #bad3b220;
}

.icon img {
    max-width: var(--iconsize);
    height: var(--iconsize);
    object-fit: cover;
    border-radius: 2px;
}

ul {
    margin: 0;
    padding-left: 20px;
}

li {
    list-style: "> ";
}

summary {
    padding-left: 5px;
}

summary:hover {
    cursor: pointer;
    text-decoration: underline;
}


a {
    color: var(--sea-green);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


#fav {
    min-width: 220px;
}


#mainmain {
    position: relative;
}

#mainmain >* {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.left, .right {
    width: 126px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}




.clickable:hover {
    cursor: pointer;
}


#silly, #harvo {
    display: none;
    position: fixed;
    width: 460px;
    max-width: 95%;
    height: auto;
    flex-direction: column;
    z-index: 10;
    top: 10%;
}

#harvo {
    top: 20%;
}


/* eyes */


#eye2 {
    display: none;
    position: absolute;
    top: 10%;
    left: 10%;
}

#eye3 {
    display: none;
    position: absolute;
    left: 20%;
    top: 60%;
}

#eye4 {
    display: none;
    position: absolute;
    right: 20%;
    bottom: 10%;
}

#eye5 {
    display: none;
    position: absolute;
    right: 10%;
    top: 15%;
}


.popup {
    opacity: 0;
    transform: scale(0.5);
    animation: popup 100ms ease-out forwards;
}

.popout {
    animation: popout 100ms ease-in forwards;
}

@keyframes popup {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    80% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes popout {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    20% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}


#bg {
    position: fixed;
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: #0000007c;
    z-index: 0;
}


@media only screen and (max-width: 700px) {

    .main {
        padding-bottom: 60px;
    }

    .flex-row {
        flex-direction: column;
    }

    .flex-row >*, .flex >* {
        width: 100%;
    }

    body {
        background-image: none;
    }

    .container::after {
        background-image: none;
        pointer-events: none;
    }


    .eye {
        display: none !important;
    }

    .right {
        width: 100%;
        flex-direction: row !important;
        flex-wrap: wrap;
        /* --iconsize: 40px; */
    }

}