/**************/
/* CSS REMEDY */
/**************/
*,
*::after,
*::before {
    box-sizing: border-box;
}






/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
    /* startje */
    --color-text: #111;
    --color-background: #eee;
}

/****************/
/* JOUW STYLING */
/****************/


/* SECTION 1 */

/* Section 1 indeling en padding */
main>section:first-of-type {
    display: grid;
    grid-template-rows: 1fr 1fr auto auto auto;
    padding: 1rem;
    gap: 1rem;
    background: var(--ftrs-scton-1-bckgrnd-color);
}

main section:first-of-type h2{
    grid-row-start: 2;
    font-size: var(--font-size-h2);
    justify-self: center;
    text-align: center;
    font-weight: var(--font-weight-h);
    color: var(--color-white);
    margin: 0;
}

main section:first-of-type p {
    grid-row-start: 3;
    font-size: var(--font-size-p);

    /* Hulp bron: W3schools CSS Text Spacing */
    line-height: 1.6;
    justify-self: center;
    text-align: center;
    color: var(--color-white);
}

main section:first-of-type img {
    display: block;
    grid-row-start: 4;
    width: 100%;
    max-width: 70rem;
    height: auto;
    justify-self: center;
}

/* See more projects made with godot button */
main section:first-of-type>a {
    grid-row-start: 5;

    background-color: var(--wtsn-btn-color);
    padding: 1rem 2.1rem;
    width: 80%;
    border-radius: .93rem;
    color: var(--color-white);
    text-decoration: none;
    text-align: center;
    font-size: 1.12rem;
    font-weight: var(--font-weight-btns);
    justify-self: center;
    box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
        /* Bron code van derde: smoothshadows.com */
        0px 0px 1px rgba(3, 7, 18, 0.02),
        0px 0px 2px rgba(3, 7, 18, 0.02),
        0px 0px 4px rgba(3, 7, 18, 0.03),
        0px 0px 6px rgba(3, 7, 18, 0.04),
        0px 0px 9px rgba(3, 7, 18, 0.05),
        0px 0px 12px rgba(3, 7, 18, 0.06),
        0px 0px 15px rgba(3, 7, 18, 0.06),
        0px 0px 19px rgba(3, 7, 18, 0.07),
        0px 0px 24px rgba(3, 7, 18, 0.08);
}

main section:first-of-type>a:hover {
    filter: brightness(var(--hover-brightness));
}

main section:first-of-type>a:focus {
    outline: var(--focus-size) solid var(--color-white);
}

main section:first-of-type>a:active {
    filter: brightness(var(--active-brightness));
}


@media (min-width: 768px) {

    main section:first-of-type a {
        width: 30%;
    }
}


/* SECTION 2 */

/* Section 2 indeling en padding */
main section:nth-of-type(2) {
    display: grid;
    padding: 1rem;
    gap: 1rem;
}

main section:nth-of-type(2) h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-h);
    color: var(--main-txt-color);
}

main section:nth-of-type(2) h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h);
    color: var(--main-txt-color);
}

/* Grid verdeling per lijst met cards */
main section:nth-of-type(2) ul {
    display: grid;
    gap: 1rem;
    list-style-type: "";
    margin: 0;
    padding: 0;
}

/* Alle cards met informtie over de engine */
main section:nth-of-type(2) article {
    background-color: var(--crd-bckgrnd-color);
    padding: 1.25rem;
    padding-top: .5rem;
    border-radius: .93rem;
    height: 100%;
}

/* Alle tekst bovenaan in de cards */
main section:nth-of-type(2) article h4 {
    font-size: var(--font-size-h4);
    color: var(--crd-h4-color);
    font-family: var(--font-weight-h);
}

/* Tekst met informatie over de engine in de cards*/
main section:nth-of-type(2) article p {
    color: var(--scnd-txt-color);
    font-size: var(--font-size-p);
    line-height: 1.6;
}

/* Linkjes in de tekst in de cards */
main section:nth-of-type(2) article p a {
    color: var(--lnk-txt-color);
}

main section:nth-of-type(2) article p a:hover {
    color: var(--lnk-txt-hover-color);
}

main section:nth-of-type(2) article p a:focus {
    outline: var(--focus-size) solid var(--blue-focus);
}

main section:nth-of-type(2) article p a:active {
    color: var(--lnk-active-color);
}

/* Alle strongs in de cards (rode tekst) */
main section:nth-of-type(2) article strong {
    color: var(--str-txt-color);
}

/* Choice of many developers section */
main section:nth-of-type(2)>section {
    background-color: var(--ftrs-scnd-bckgrnd-color);
    padding: 1rem;

    /* Hulp bron: Stackoverflow: Ignore parent padding */
    /* overschrijving van de padding van de parrent vanwege de achtergrondkleur */
    margin: -1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* h3 in de choice of many developers section */
main section:nth-of-type(2)>section h3 {
    color: var(--color-white);
}

/* tekst in de choice of many developers section */
main section:nth-of-type(2)>section p {
    text-align: start;
    justify-self: start;
}

/* Lijst met link images */
main section:nth-of-type(2)>section ul {
    display: grid;
}

main section:nth-of-type(2)>section ul a:hover {
    filter: brightness(var(--hover-brightness));
}

main section:nth-of-type(2)>section ul a img:focus {
    outline: var(--focus-size) solid var(--color-white);
}

main section:nth-of-type(2)>section ul a:active {
    filter: brightness(var(--active-brightness));
}

/* Styling per link image */
main section:nth-of-type(2)>section ul a img {
    border-radius: .93rem;
    /* max-width: 16.37rem; */

    box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
    /* Bron code van derde: smoothshadows.com */
    0px 0px 1px rgba(3, 7, 18, 0.02),
    0px 0px 2px rgba(3, 7, 18, 0.02),
    0px 0px 4px rgba(3, 7, 18, 0.03),
    0px 0px 6px rgba(3, 7, 18, 0.04),
    0px 0px 9px rgba(3, 7, 18, 0.05),
    0px 0px 12px rgba(3, 7, 18, 0.06),
    0px 0px 15px rgba(3, 7, 18, 0.06),
    0px 0px 19px rgba(3, 7, 18, 0.07),
    0px 0px 24px rgba(3, 7, 18, 0.08);
}

/* View a complete list of features button */
main>section:nth-of-type(2)>a:first-of-type {
    background-color: var(--main-btn-color);
    padding: 1rem 2.1rem;
    border-radius: .93rem;
    color: var(--main-txt-color);
    text-decoration: none;
    text-align: center;
    font-size: 1.12rem;
    font-weight: var(--font-weight-btns);
    justify-self: center;
    box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
        /* Bron code van derde: smoothshadows.com */
        0px 0px 1px rgba(3, 7, 18, 0.02),
        0px 0px 2px rgba(3, 7, 18, 0.02),
        0px 0px 4px rgba(3, 7, 18, 0.03),
        0px 0px 6px rgba(3, 7, 18, 0.04),
        0px 0px 9px rgba(3, 7, 18, 0.05),
        0px 0px 12px rgba(3, 7, 18, 0.06),
        0px 0px 15px rgba(3, 7, 18, 0.06),
        0px 0px 19px rgba(3, 7, 18, 0.07),
        0px 0px 24px rgba(3, 7, 18, 0.08);
}

/* View a complete list of features button */
main>section:nth-of-type(2)>a:last-of-type {
    background-color: var(--main-btn-color);
    padding: 1rem 2.1rem;
    border-radius: .93rem;
    color: var(--main-txt-color);
    text-decoration: none;
    text-align: center;
    font-size: 1.12rem;
    font-weight: var(--font-weight-btns);
    justify-self: center;
    box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
        /* Bron code van derde: smoothshadows.com */
        0px 0px 1px rgba(3, 7, 18, 0.02),
        0px 0px 2px rgba(3, 7, 18, 0.02),
        0px 0px 4px rgba(3, 7, 18, 0.03),
        0px 0px 6px rgba(3, 7, 18, 0.04),
        0px 0px 9px rgba(3, 7, 18, 0.05),
        0px 0px 12px rgba(3, 7, 18, 0.06),
        0px 0px 15px rgba(3, 7, 18, 0.06),
        0px 0px 19px rgba(3, 7, 18, 0.07),
        0px 0px 24px rgba(3, 7, 18, 0.08);
}

main>section:nth-of-type(2)>a:first-of-type:hover,
main>section:nth-of-type(2)>a:last-of-type:hover {
    filter: brightness(var(--hover-brightness));
}

main>section:nth-of-type(2)>a:first-of-type:focus,
main>section:nth-of-type(2)>a:last-of-type:focus {
    outline: var(--focus-size) solid var(--blue-focus);
}

main>section:nth-of-type(2)>a:first-of-type:active,
main>section:nth-of-type(2)>a:last-of-type:active {
    filter: brightness(var(--active-brightness));
}

@media (min-width: 626px) {

    /* Grid indeling middelkleinscherm Choice of many developers */
    main section:nth-of-type(2)>section ul {
        grid-template-columns: 1fr 1fr;
    }
}


@media (min-width: 800px) {

    /* Grid indeling ul met 3 cards voor middelscherm */
    main section:nth-of-type(2) ul:first-of-type,
    main section:nth-of-type(2) ul:nth-of-type(3),
    main section:nth-of-type(2) ul:nth-of-type(4),
    main section:nth-of-type(2) ul:nth-of-type(5) {
        grid-template-columns: 1fr 1fr;
        gap: 2.25rem;
    }
}


@media (min-width: 893px) {
    
    /* Grid layout middelscherm Choice of many developers */
    main section:nth-of-type(2)>section ul {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}


@media (min-width: 1020px) {

    /* Grid indeling ul met 3 cards voor grootscherm */
    main section:nth-of-type(2) ul:first-of-type,
    main section:nth-of-type(2) ul:nth-of-type(3),
    main section:nth-of-type(2) ul:nth-of-type(4),
    main section:nth-of-type(2) ul:nth-of-type(5) {
        grid-template-columns: 1fr 1fr 1fr;
    }

    /* Grid indeling ul met 2 of 4 cards voor grootscherm */
    main section:nth-of-type(2) ul:nth-of-type(2),
    main section:nth-of-type(2) ul:nth-of-type(6) {
        grid-template-columns: 1fr 1fr;
    }
}


@media (min-width: 1159px) {

    /* Grid layout grootscherm Choice of many developers */
    main section:nth-of-type(2)>section ul {
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
    }
}


@media (min-width: 1400px) {

    main section:nth-of-type(2) {
        padding-left: 10rem;
        padding-right: 10rem;
    }

    /* Choice of many developers section */
    main section:nth-of-type(2)>section {
        /* overschrijving van de padding van de parrent */
        margin-left: -10rem;
        margin-right: -10rem;

        padding-left: 10rem;
        padding-right: 10rem;
    }
}


/* SECTION 3 */

/* Derde section algemene indeling */
main section:nth-of-type(3) {
    display: grid;
    background-color: var(--ftrs-scnd-bckgrnd-color);
    gap: 1rem;
}

main section:nth-of-type(3) h2 {
    font-size: var(--font-size-h2);
    color: var(--color-white);
    justify-self: center;
}

main section:nth-of-type(3) p {
    font-size: var(--font-size-p);
    color: var(--color-white);
    text-align: center;
}

/* Download latest button algemene styling */
main section:nth-of-type(3)>a:first-of-type {
    justify-self: center;

    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: stretch;

    background: var(--color-white);
    color: var(--dwnl-btn-txt-color);
    border-radius: .94rem;
    font-weight: var(--font-weight-btns);
    text-decoration: none;
    text-align: center;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
        /* Bron code van derde: smoothshadows.com */
        0px 0px 1px rgba(3, 7, 18, 0.02),
        0px 0px 2px rgba(3, 7, 18, 0.02),
        0px 0px 4px rgba(3, 7, 18, 0.03),
        0px 0px 6px rgba(3, 7, 18, 0.04),
        0px 0px 9px rgba(3, 7, 18, 0.05),
        0px 0px 12px rgba(3, 7, 18, 0.06),
        0px 0px 15px rgba(3, 7, 18, 0.06),
        0px 0px 19px rgba(3, 7, 18, 0.07),
        0px 0px 24px rgba(3, 7, 18, 0.08);
}

main section:nth-of-type(3)>a:first-of-type:hover {
    filter: brightness(var(--hover-brightness));
}

main section:nth-of-type(3)>a:first-of-type:focus {
    outline: var(--focus-size) solid var(--color-white);
}

main section:nth-of-type(3)>a:first-of-type:active {
    filter: brightness(var(--active-brightness));
}

/* Download latest button styling blauwe gedeelte */
main section:nth-of-type(3)>a:first-of-type em {
    background: var(--ltst-btn-color);
    color: var(--color-white);
    padding: 1.2rem 1rem;
    border-radius: 0 .6rem .6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

main section:nth-of-type(3) p:nth-of-type(2) a {
    color: var(--color-white);
}

main section:nth-of-type(3) p:nth-of-type(2) a:hover {
    color: var(--a-lnks-hover-color);
}

main section:nth-of-type(3) p:nth-of-type(2) a:focus {
    outline: var(--focus-size) solid var(--color-white);
}

main section:nth-of-type(3) p:nth-of-type(2) a:active {
    color: var(--a-active-color);
}