/* fonts */
@font-face {
    font-family: "Blackboard";
    src: url("Fonts/Blackboard.ttf");
}

/* variables */
:root {
    --clr-primary-400: hsl(111, 33%, 25%);
    --clr-primary-100: hsl(111, 33%, 40%);
    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-neutral-900: hsl(0 0% 0%);
    --clr-neutral-100-opaque: hsl(0, 0%, 100%, 80%);
    --clr-navigation-100: hsl(308, 75%, 90%);
    --ff-primary: "Comic Neue", serif;
    --ff-blackboard: "Blackboard";
    --ff-body: var(--ff-primary);
    --fw-regular: 400;
    --fw-semi-bold: 550;
    --fw-bold: 900;

    --fs-300: .9rem;
    --fs-350: 1rem;
    --fs-400: .9rem;
    --fs-450: 1.25rem;
    --fs-500: .75rem;
    --fs-600: 1.25rem;
    --fs-650: 1.75rem;
    --fs-700: 2rem;
    --fs-800: 5rem;
    --fs-900: 7rem;
    --fs-950: 7rem;
    

    --size-100: .25rem;
    --size-200: .5rem;
    --size-300: .75rem;
    --size-400: 1rem;
    --size-500: 1.25rem;
    --size-600: 1rem;
    --size-700: 3rem;
    --size-800: 4rem;
    --size-900: 5rem;
}

@media (min-width: 50em) {
    :root {
        --fs-300: .9rem;
        --fs-350: 1rem;
        --fs-400: 1.25rem;
        --fs-450: 1.25;
        --fs-500: 1.5rem;
        --fs-600: 1.5rem;
        --fs-650: 1.75rem;
        --fs-700: 3rem;
        --fs-800: 5rem;
        --fs-900: 5rem;
        --fs-950: 7rem;
    }
}

/* general elements */
.align-self-center {
    justify-self: center;
}

.text-align-center {
    text-align: center;
}

body {
    font-size: var(--fs-400);
    font-family: var(--ff-body);
    color: var(--clr-neutral-900);
}

::placeholder {
    color: var(--clr-neutral-100);
}

/* page */
.page {
    background-image: url(Images/Background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

@media (min-width: 80em) {
    .page {
        min-height: 1800px;
        background-attachment: scroll;
    }
}

.page-title {
    font-size: var(--fs-900);
    font-weight: var(--fw-semi-bold);
    color: var(--clr-navigation-100);
    text-align: center;
    font-family: var(--ff-blackboard);
}

/* button */
.button {
    cursor: pointer;
    border: 0;
    border-radius: 100vmax;
    padding: .5em 2em;
    color: var(--clr-neutral-100);
    background-color: var(--clr-primary-400);
    box-shadow: 0 1.25em 1em -1em var(--clr-primary-400);
    text-decoration: none;
}

.select {
    cursor: pointer;
    color: var(--clr-neutral-100);
    background-color: var(--clr-primary-400);
}

.input {
    color: var(--clr-neutral-100);
    background-color: var(--clr-primary-400);
}

    .button:hover,
    .button:focus-visible {
        background-color: var(--clr-primary-100);
    }

/* logo */
.logo {
    display: grid;
    width: 4rem;
    height: 4rem;
    background: var(--clr-neutral-100);
    background-size: cover;
    border-radius: 100vmax;
    padding: .5rem;
    justify-content: center;
    justify-self: center;
}

.logo-image {
    height: 3rem;
}

@media (min-width: 50em) {
    .logo {
        width: 7rem;
        height: 7rem;
    }

    .logo-image {
        height: 6rem;
    }
}

/* navigation bar */
.nav-bar {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    padding: 0 0 0 1rem;
    background-color: var(--clr-primary-100);
}

@media (min-width: 80em) {
    .nav-bar {
        grid-template-columns: 2fr 1fr 2fr;
    }
}

.nav-list {
    margin: .5rem;
    padding: .5rem;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    color: var(--clr-neutral-100);
}

    .nav-list a {
        text-decoration: none;
        font-size: var(--fs-600);
        font-weight: var(--fw-semi-bold);
    }

@media (min-width: 50em) {
    .nav-list {
        grid-template-columns: repeat(3, 1fr);
    }
}



.nav-element {
    align-content: center;
}

/* banner */
.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--size-600) 0 var(--size-200) 0;
}

.banner-title {
    fill: var(--clr-neutral-100);
    font-size: var(--fs-950);
    font-family: var(--ff-blackboard);
}

/* footer */
.footer-nav {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 0 0 1rem;
    background-color: var(--clr-primary-100);
    font-size: var(--fs-400);
}

.footer-list {
    margin: 1rem;
    padding: 1rem;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    color: var(--clr-neutral-100);
    text-align: center;
}

    .footer-list a {
        text-decoration: none;
    }

.footer-element {
    align-content: center;
}

/* cards */
.card-container {
    --max-width: 70%;
    --padding: 1rem;
    width: min(var(--max-width), 100% - (var(--padding) * 2));
    margin-inline: auto;
}

.grid-card-colums {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    justify-items: center;
}

@media (min-width: 50em) {
    .grid-card-colums {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 80em) {
    .grid-card-colums {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    height: 30rem;
    width: 20rem;
    background: linear-gradient(45deg, var(--clr-primary-100), var(--clr-primary-400));
    box-shadow: 0 0 1rem black;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;
    text-decoration: none;
}

.card-header {
    height: 1.5rem;
    font-size: var(--fs-300);
    text-align: right;
    color: var(--clr-neutral-100);
}

.card-body {
}

.card-image {
    height: 16rem;
    border-radius: 1rem;
    margin: 0 auto;
    display: block;
    background: var(--clr-neutral-100);
}

.card-title {
    text-align: center;
    font-size: var(--fs-650);
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-100);
    margin: 0.5rem;
}

.card-text {
    color: var(--clr-neutral-100);
    margin: 2rem;
    font-weight: var(--fw-bold);
    font-size: var(--fs-350);
}

.card-link {
}

/* articles */
.article {
    --max-width: 1000px;
    --padding: 1rem;
    width: min(var(--max-width), 100% - (var(--padding) * 2));
    margin-inline: auto;
    display: grid;
    background-color: var(--clr-neutral-100-opaque);
}

.article-title {
    justify-self: center;
    text-align: center;
    font-size: var(--fs-700);
    font-weight: var(--fw-bold);
    padding: 3rem;
}

.article-text {
    padding: 0 4rem 4rem 4rem;
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-450);
}

.article-image {
    float: none;
    width: 50%;
    padding: 0 0rem 3rem 0rem;
    justify-self: center;
}

@media (min-width: 50em) {
    .article-image {
        float: right;
        width: 40%;
        padding: 0 0rem 0rem 4rem;
        justify-self: auto;
    }
}

.article-button {
    cursor: pointer;
    border: 0;
    border-radius: 100vmax;
    padding: .5em 2em;
    width: fit-content;
    margin: 1rem;
    font-weight: var(--fw-bold);
    font-size: var(--fs-500);
    color: var(--clr-neutral-100);
    background-color: var(--clr-primary-400);
    box-shadow: 0 1.25em 1em -1em var(--clr-primary-400);
    text-decoration: none;
}

/* generators */
.generator-background {
    background: var(--clr-neutral-100);
    display: grid;
    justify-self: center;
    height: fit-content;
    width: 100%;
    grid-template-areas:
        'headline headline'
        'opgave0 opgave1'
        'opgave2 opgave3'
        'opgave4 opgave5'
        'opgave6 opgave7'
        'opgave8 opgave9';
    justify-content: stretch;
    grid-template-rows: .5fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
}

    .generator-background .headline {
        grid-area: headline;
        height: 5rem;
        display: grid;
        justify-content: center;
        align-content: center;
    }
    .generator-background .opgave-0 {
        display: grid;
        grid-area: opgave0;
        border: 2px solid;
        border-radius: 5px;
        justify-content: center;
        align-content: center;
    }

    .generator-background .opgave-1 {
        display: grid;
        grid-area: opgave1;
        border: 2px solid;
        border-radius: 5px;
        justify-content: center;
        align-content: center;
    }

    .generator-background .opgave-2 {
        display: grid;
        grid-area: opgave2;
        border: 2px solid;
        border-radius: 5px;
        justify-content: center;
        align-content: center;
    }

    .generator-background .opgave-3 {
        display: grid;
        grid-area: opgave3;
        border: 2px solid;
        border-radius: 5px;
        justify-content: center;
        align-content: center;
    }

    .generator-background .opgave-4 {
        display: grid;
        grid-area: opgave4;
        border: 2px solid;
        border-radius: 5px;
        justify-content: center;
        align-content: center;
    }

    .generator-background .opgave-5 {
        display: grid;
        grid-area: opgave5;
        border: 2px solid;
        border-radius: 5px;
        justify-content: center;
        align-content: center;
    }

    .generator-background .opgave-6 {
        display: grid;
        grid-area: opgave6;
        border: 2px solid;
        border-radius: 5px;
        justify-content: center;
        align-content: center;
    }

    .generator-background .opgave-7 {
        display: grid;
        grid-area: opgave7;
        border: 2px solid;
        border-radius: 5px;
        justify-content: center;
        align-content: center;
    }

    .generator-background .opgave-8 {
        display: grid;
        grid-area: opgave8;
        border: 2px solid;
        border-radius: 5px;
        justify-content: center;
        align-content: center;
    }

    .generator-background .opgave-9 {
        display: grid;
        grid-area: opgave9;
        border: 2px solid;
        border-radius: 5px;
        justify-content: center;
        align-content: center;
    }

.generator-image {
    justify-self: center;
    width: 20rem;
    padding: 0 1rem 1rem 1rem;
    justify-items: center;
}

.generator-box {
    display: grid;
    justify-items: center;
    padding: 1rem;
    height: fit-content;
    font-weight: var(--fw-semi-bold);
}

.generator-split-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.generator-button {

}

.generator-select {
    font-size: var(--fs-500);
    font-weight: var(--fw-semi-bold);
    padding: 10px;
    margin: 10px;
}

.generator-input {
    height: fit-content;
}

@media (min-width: 50em) {
    .generator-background {
        width: 80%;
    }
}

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
* {
    margin: 0;
    padding: 0;
    font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

html,
body {
    height: 100%;
}

/* Set core body defaults */
body {
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Make images easier to work with */
img,
picture,
svg {
    max-width: 100%;
    display: block;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

/* Utility classes */

.text-primary-400 {
    color: var(--clr-primary-400);
}

.text-neutral-900 {
    color: var(--clr-neutral-900);
}

.text-neutral-100 {
    color: var(--clr-neutral-100);
}

.bg-primary-400 {
    background-color: var(--clr-primary-400);
}

.bg-neutral-100 {
    background-color: var(--clr-neutral-100);
}

.bg-neutral-900 {
    background-color: var(--clr-neutral-900);
}


.fw-bold {
    font-weight: var(--fw-bold);
}

.fw-semi-bold {
    font-weight: var(--fw-semi-bold);
}

.fw-regular {
    font-weight: var(--fw-regular);
}

.fs-primary-heading {
    font-size: var(--fs-primary-heading);
}

.fs-secondary-heading {
    font-size: var(--fs-secondary-heading);
}

.fs-300 {
    font-size: var(--fs-300)
}

.fs-400 {
    font-size: var(--fs-400)
}

.fs-500 {
    font-size: var(--fs-500)
}

.fs-600 {
    font-size: var(--fs-600)
}

.fs-700 {
    font-size: var(--fs-700)
}

.fs-800 {
    font-size: var(--fs-800)
}

.fs-900 {
    font-size: var(--fs-900)
}

.padding-block-100 {
    padding-block: var(--size-100);
}

.padding-block-200 {
    padding-block: var(--size-200);
}

.padding-block-300 {
    padding-block: var(--size-300);
}

padding-block-400 {
    padding-block: var(--size-400);
}

padding-block-500 {
    padding-block: var(--size-500);
}

.padding-block-600 {
    padding-block: var(--size-600);
}

.padding-block-700 {
    padding-block: var(--size-700);
}

.padding-block-800 {
    padding-block: var(--size-800);
}

.padding-block-900 {
    padding-block: var(--size-900);
}