/* --------------------------------------------------------------------------------- MARK: BASIS 
*/

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

@font-face{ 
    font-family:'Minecraft Heading';
    src: url('../fonts/minecrafter.alt.ttf') format('truetype');
}

@font-face{ 
    font-family:'Minecraft Text';
    src: url('../fonts/minecraft.ttf') format('truetype');
}

/* --------------------------------------------------------------------------------- MARK: THEMA VARIABELEN
*/

:root{
    /* Kleuren */
    --gray: #555555;
    --gray-basic: gray;
    --light-gray: #C6C6C6;
    --another-dark-gray: #4a4a4a;
    --dark-gray: #333333;
    --black: black;
    --white: white;
    --subtekst: #aaaaaa;

    /* Achtergrond & panelen */
    --bg-image: url('../images/background.png');
    --panel-bg: rgba(0, 0, 0, 0.75);

    /* Knop kleuren */
    --btn-border-light: #c8c8c8;
    --btn-border-dark: #4a4a4a;
    --btn-hover-bg: #a0a0ff;
    --btn-hover-light: #d0d0ff;
    --btn-hover-dark: #5050aa;
    --btn-active-light: #c0c0ff;
    --btn-active-dark: #4a4a90;

    /* Border */
    --border: clamp(4px, 0.8vw, 8px) solid;

    /* Scale */
    --scale: clamp(7px, 1.1vw, 14px);
}

/* --------------------------------------------------------------------------------- MARK: NETHER THEMA
*/

/* Achtergrond gegenereerd met AI. Prompt: een nether/underworld biome achtergrond voor mijn minecraft portfolio in pixelart stijl, rood en oranje lava tinten */
[data-theme="underworld"]{
    --gray: #6b2222;
    --gray-basic: #7a2a2a;
    --light-gray: #d4886a;
    --another-dark-gray: #3d1a1a;
    --dark-gray: #2a0f0f;
    --black: #1a0808;
    --white: #ffddcc;
    --subtekst: #bb7755;

    --bg-image: url('../images/background-nether.png');
    --panel-bg: rgba(30, 8, 8, 0.85);

    --btn-border-light: #bb5533;
    --btn-border-dark: #441111;
    --btn-hover-bg: #cc3311;
    --btn-hover-light: #ff5522;
    --btn-hover-dark: #550000;
    --btn-active-light: #ff7744;
    --btn-active-dark: #661100;
}

/* --------------------------------------------------------------------------------- MARK: BODY
*/

body{
    position: relative;

    width: 100vw;
    height: 100vh;

    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;

    p{
        font-family: 'Minecraft Text', sans-serif;
        font-size: calc(var(--scale) * 1);
    }

    h3{
        font-family: 'Minecraft Text', sans-serif;
        font-size: calc(var(--scale) * 1.15);
    }

    /* --------------- Knoppen --------------- */
    button{
        color: var(--white);
        background-color: var(--gray-basic);
        font-family: 'Minecraft Text', sans-serif;

        font-size: calc(var(--scale) * 1.3);
    }

    a{
        display: flex;
        flex-direction: column;

        width: 38vw;
        text-decoration: none;
    }

    .btn{
        border-top:    var(--border) var(--btn-border-light);
        border-left:   var(--border) var(--btn-border-light);
        border-right:  var(--border) var(--btn-border-dark);
        border-bottom: var(--border) var(--btn-border-dark);

        padding: calc(var(--scale) * 0.85) 0;
        font-size: calc(var(--scale) * 1.14);
    }

    .btn:hover{
        background-color: var(--btn-hover-bg);
        border-top-color:    var(--btn-hover-light);
        border-left-color:   var(--btn-hover-light);
        border-right-color:  var(--btn-hover-dark);
        border-bottom-color: var(--btn-hover-dark);
    }

    .btn:active{
        border-top-color:    var(--btn-active-dark);
        border-left-color:   var(--btn-active-dark);
        border-right-color:  var(--btn-active-light);
        border-bottom-color: var(--btn-active-light);
    }
}