/* Bron: https://cssgradient.io/ */
html {
    color-scheme: light dark;
    --background: #EEAECA;
    --background: radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(217, 177, 209, 1) 25%, rgba(193, 181, 218, 1) 50%, rgba(166, 185, 227, 1) 75%, rgba(148, 187, 233, 1) 100%);
    --heading-color: deeppink;
    --item-color: aqua;
    --box-color: paleturquoise;

    @media (prefers-color-scheme: dark) {
        --background: #833AB4;
        --background: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(189, 44, 109, 1) 25%, rgba(253, 29, 29, 1) 50%, rgba(252, 116, 53, 1) 75%, rgba(252, 176, 69, 1) 100%);
        --heading-color: lightseagreen;
        --item-color: deeppink;
        --box-color: hotpink;
    }
}

body {
    background: var(--background);

    background-size:100dvw 100dvh;
    background-attachment: fixed;
}

.bodyGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-start: 2;
}

main {
    display: grid;
    @media (width > 30rem) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "ik     derdeGrid"
        "prof   derdeGrid"
        "minor  derdeGrid"
        "footer footer";

        img {max-width: 100px};
    }
    @media (width > 50rem) {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "ik     prof   derdeGrid"
            "ik     minor  derdeGrid"
            "footer footer footer";

        img {max-width: 150px};
    }
    
    .ik {
        grid-area: ik;
    }

    .prof {
        grid-area: prof;
    }

    .minor {
        grid-area: minor;
    }

    .derdeGrid {
        grid-area: derdeGrid;
    }

    footer {
        grid-area: footer;
    }

}

.minor {
    grid-column-start: 2;
}

.container {
    display: flex;
    gap: 600px;
    color: var(--heading-color);
}

.item,
.box {
    border: 2px solid lightseagreen;
    padding: 20px;
    margin: 30px;
    border-radius: 10px;
    max-width: 170px;
    display: grid;
    justify-items: center;
}

.item {
    background-color: var(--item-color);
    color: var(--item-color);
}

.box {
    background-color: var(--box-color);
    color: var(--box-color);
}

.derdeGrid {
    grid-column-start: 3;
}

h1 {
    font-family: impact;
    text-align: center
}

h2 {
    color: var(--heading-color);
    font-family: papyrus;
}

h4 {
    font-family: papyrus;
}

p {
    font-family: cursive;
}