@import url('https://fonts.bunny.net/css2?family=Amiko');

body {
     background:#0d0c0c;
     background-image: url("https://file.garden/ZRbGhcpOlUzNliHb/ramm/pinktartan_bg.png");
     background-repeat: repeat;
     font-family: 'Amiko';
     letter-spacing: 1px;
     text-align: center;
     font-size: 13px;
     color: #dad8d8;
     line-height: 1.4;
}

h1, h2, h3, h4 {
     font-family: 'Inria Serif';
}

html, a {
     cursor: url("https://file.garden/ZRbGhcpOlUzNliHb/ramm/bow_cursor.png"), auto;
}

b {
     color: #ff0073;
}

i {
     color: #d290a3;
}

::-webkit-scrollbar{
     width: 8px;
}
 ::-webkit-scrollbar-track{
     background-color: #505455;
}
 ::-webkit-scrollbar-thumb{
     background-color: #bebebe;
}

a {
     text-decoration: none;
     color: #e74d9f;
}
 a:visited{
     color: #9c9393;
}
 a:hover{
     font-style: italic;
}
 a:active{
     font-style: italic;
}

#bigcontainer {
     display: flex;
     flex-flow: row-reverse nowrap;
     margin: 20px auto;
     width: 90svw;
     min-height: 90svh;
     gap: 10px; 
}

#sidebar {
     width: 30svw;
     color: #dad8d8;
     text-align: left;
}

#sidebar > div,
main > section > div{
     border-radius: 5px;
     padding: 1em 2em;
     background: #3f3e3e;
     border-radius: 5px;
     border: 2px solid #e4e9ea;
     margin: 5px;
     margin-bottom: 10px;
     box-sizing: border-box;
}

h1 {
     text-transform: uppercase;
     font-size: 20px;  
}

h2 {
     font-size: 18px;
     color: #f07f9f; 
}

main {
     flex: 2;
}

main > div {
     border-radius: 5px;
     padding: 1em 2em;
     background: #3f3e3e;
     border-radius: 5px;
     border: 2px solid #e4e9ea;
     margin: 5px;
     margin-bottom: 10px;
     color: #dad8d8;
     box-sizing: border-box;
     text-align: left;
     overflow-y: scroll;
     max-height: 55svh;
}

main > section {
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     gap: 5px;
}

main > section > div {
    width: 25svw;
    color: #dad8d8;
}

@media (max-width: 1024px) {

    #bigcontainer {
        flex-direction: column;
        width: 95vw;
        gap: 15px;
        align-items: center; 
    }

    /* sidebar first */
    #sidebar {
        order: -1;
        width: 100%;
    }

    main {
        width: 100%;
    }

    main > section {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    main > section > div {
        width: 90%;
        max-height: none;
    }

    #sidebar > div,
    main > div,
    main > section > div {
        max-height: none;
        overflow-y: visible;
    }

    .footerbox {
        width: 100%;
        padding: 10px;
        align-items: center;
    }

    .footertext {
        width: 90%;
        margin: 10px 0;
    }

    .gallery {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }

    .gallery img {
        height: auto;
        max-width: 45%;
        margin: 2px;
    }

    /* tiny baby phone */

    @media (max-width: 600px) {
        body {
            font-size: 14px;
        }

        h3 {
            font-size: 14px;
        }

        .gallery img {
            max-width: 90%;
        }

        .footertext {
            width: 95%;
        }
    }
}