body{
    color: var(--text);
    font-family: 'FreePixel', 'Arial';
    background-color: var(--bg);
    align-items: center;
}

#wr{
    height: 100%;
    display: grid;
    width: min(1024px, 95%);
    margin: auto;

    @media (width > 700px){
        align-items: center;
        grid-template-columns: 150px auto;
        column-gap: 20px;
        #side, #main{
            height: 95%;
        }
    }
    @media (width <= 700px){
        grid-template-rows: 100px auto;
        #main{
            margin-top: 40px;
        }
    }

    #headerbg {
        height: 100%;
        width: 100%;

        .titlebv {
            background-image: url('../images/runictitle-bv.png');
        }

        .titlewv {
            background-image: url('../images/runictitle-wv.png');
        }

        .titlebh {
            background-image: url('../images/runictitle-bh.png');
        }

        .titlewh {
            background-image: url('../images/runictitle-wh.png');
        }

        .titlebv, .titlewv, .titlebh, .titlewh {
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;

            a{
                display: flex;
                height: 100%;
            }
        }
    }
}

#kotholder{
    width: 100%;

    #kotbutton{
        border: none;
        background-size: cover;
        background-position: center;
        height: 2rem;
        width: 2rem;
    }
    #kotbutton:hover{
        opacity: 0.9;
        .desaturate{
            opacity: 0.1;
        }
        border: 1px solid #454545;
    }

    .dark{
        background-image: url('../images/kots/ripplekot.gif');
    }
    .light{
        background-image: url('../images/kots/voidkot.gif');
    }
    .grey{
        background-image: url('../images/kots/greykot.png');
    }
    .locked{
        background-image: url('../images/kots/lockedkot.png');
    }
    .red{
        background-image: url('../images/kots/EVILkot.gif');
    }
    .green{
        background-image: url('../images/kots/joykot.gif');
    }
    .alicja{
        background-image: url('../images/kots/kotalicja.gif');
    }
    .tata{
        background-image: url('../images/kots/kottata.png');
    }
    .mooyling{
        background-image: url('../images/kots/kotmooyling.gif');
    }
    .magic{
        background-image: url('../images/kots/kotmagic.png');
    }
    .mexico{
        background-image: url('../images/kots/kotmexico.png');
    }
    .dakras{
        background-image: url('../images/kots/kotdakras.png');
    }
    .tetra{
        background-image: url('../images/kots/kottetra.png');
    }
    .tronsx{
        background-image: url('../images/kots/kottronsx.jpg');
    }
    .detrax{
        background-image: url('../images/kots/kotdetrax.gif');
    }
    .kecalp{
        background-image: url('../images/kots/kecalp.gif');
    }
    .placek{
        background-image: url('../images/kots/placek.png');
    }
    .accordion{
        background-image: url('../images/kots/kotaccordion.webp');
    }
    .ah{
        background-image: url('../images/kots/kotAH.gif');
    }
    .augh{
        background-image: url('../images/kots/kotaugh.gif');
    }
    .baby{
        background-image: url('../images/kots/kotbaby.webp');
    }
    .death{
        background-image: url('../images/kots/kotDEATH.gif');
    }
    .ew{
        background-image: url('../images/kots/koteww.gif');
    }
    .faucetling{
        background-image: url('../images/kots/kotfaucetling.gif');
    }
    .fear{
        background-image: url('../images/kots/kotfear.gif');
    }
    .freak{
        background-image: url('../images/kots/kotfreak.webp');
    }
    .gerardtrax{
        background-image: url('../images/kots/kotgerarddetrax.gif');
    }
    .gulp{
        background-image: url('../images/kots/kotgulp.gif');
    }
    .idiot{
        background-image: url('../images/kots/kotidiot.gif')
    }
    .jumpscare{
        background-image: url('../images/kots/kotjumpscare.gif');
    }
    .looker{
        background-image: url('../images/kots/kotlooker.webp');
    }
    .missile{
        background-image: url('../images/kots/kotmissile.webp');
    }
    .party{
        background-image: url('../images/kots/kotparty.gif');
    }
    .pat{
        background-image: url('../images/kots/kotpat.gif');
    }
    .resonancecascade{
        background-image: url('../images/kots/kotresonancecascade.gif');
    }
    .tiny{
        background-image: url('../images/kots/kottiny.webp');
    }
    .woowoo{
        background-image: url('../images/kots/kotwoowoo.gif');
    }
}


/*
#wr{
    div {
        border: 1px solid;
    }
    p{
        border: 1px solid yellow;
    }

    background-color: indianred;
}
#side{
    background-color: darkseagreen;
}
#main{
    background-color: cornflowerblue;
}