/*
$$$$$$$\            $$\            $$\     $$\
$$  __$$\           \__|           $$ |    $$ |
$$ |  $$ | $$$$$$\  $$\ $$$$$$$\ $$$$$$\   $$ | $$$$$$\   $$$$$$$\  $$$$$$$\
$$$$$$$  |$$  __$$\ $$ |$$  __$$\\_$$  _|  $$ |$$  __$$\ $$  _____|$$  _____|
$$  ____/ $$ /  $$ |$$ |$$ |  $$ | $$ |    $$ |$$$$$$$$ |\$$$$$$\  \$$$$$$\
$$ |      $$ |  $$ |$$ |$$ |  $$ | $$ |$$\ $$ |$$   ____| \____$$\  \____$$\
$$ |      \$$$$$$  |$$ |$$ |  $$ | \$$$$  |$$ |\$$$$$$$\ $$$$$$$  |$$$$$$$  |
\__|       \______/ \__|\__|  \__|  \____/ \__| \_______|\_______/ \_______/


 $$$$$$$\  $$$$$$$\  $$$$$$$\
$$  _____|$$  _____|$$  _____|
$$ /      \$$$$$$\  \$$$$$$\
$$ |       \____$$\  \____$$\
\$$$$$$$\ $$$$$$$  |$$$$$$$  |
 \_______|\_______/ \_______/
                               $$\
                              $$ |
 $$$$$$\   $$$$$$\   $$$$$$$\ $$ |  $$\
$$  __$$\  \____$$\ $$  _____|$$ | $$  |
$$ /  $$ | $$$$$$$ |$$ /      $$$$$$  /
$$ |  $$ |$$  __$$ |$$ |      $$  _$$<
$$$$$$$  |\$$$$$$$ |\$$$$$$$\ $$ | \$$\
$$  ____/  \_______| \_______|\__|  \__|
$$ |
$$ |
\__|
By: SZeroFx, aka Kugener Sven
Version: 1.0
From: 14.12.2024



    ---=={[INFOS]}==---
0 - Main Part [main]
1 - Container [.container]
2 - Content Box [.textbox, .minibox(.icon, .banner)]
3 - Buttons & co.



    ---=={[Configs]}==---

!!! write "none" for nothing dont leave it blank !!!
*/
:root {
    /* Background Color: */
    --bgcolor: black;

    /* Primary Color: */
    --pricolor: white;

    /* Font Color: */
    --fontcolor: white;

    /* Tittle Font Color: */
    --tittlefontcolor: white;

    /* Decent Font Color: */
    --decentfontcolor: white;

    /* Text Box Background: */
    --textboxbgcolor: #2a3344;

    /* Mini Box Background: */
    --miniboxbgcolor: #3f5479;

    /* Mini Box Icon Border: */
    --miniboxiconcolor: radial-gradient(circle, rgba(63,84,121,0) 0%, rgba(0,255,155,0.6026785714285714) 100%);

    /* Mini Box Hover Color: */
    --miniboxhovcolor: #374a6b;

    /* Mini Box Hover Shadow Color: */
    --miniboxhovshadow: #00ff9957;

    /* Border Radius: */
    --radius: 8px;

    /* Box Shadow: */
    --boxshadow: 0px 0px 6px 1px #000;

    /* template: */
    --template: #ffffff;
}


/* ---[0 - Main Part]--- */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

* {padding: 0px;margin: 0px;}
body { background-color: var(--bgcolor);}
main {min-height: 62vh;}
h2{
    color: var(--fontcolor);
    font-family: "text";
    /*font-family: "Open Sans", sans-serif;
    font-style: normal;*/
    font-size: 30px;
}

@font-face {
    font-family: "text";
    src: url(../fonts/gg_sans_Semibold.ttf);
}
@font-face {
    font-family: "text2";
    src: url(../fonts/gg_sans_Medium.ttf);
}
@font-face {
    font-family: "headers";
    src: url(../fonts/PastiRegular-mLXnm.otf);
}

/* ---[1 - Container]--- */

.container {
    display: grid;
    width: 100%;
    margin: 0px;
    justify-items: center;
    align-items: center;
}

/* ---[2- Content Box]--- */
/* .textbox */

.textbox {
    background-color: var(--textboxbgcolor);
    max-width: 1400px;
    display: grid;
    box-shadow: var(--boxshadow);
    border-radius: var(--radius);
    /* Top Right Bottom Left */
    padding: 32px 64px 32px 64px;
    margin: 16px 84px 48px 84px;
}

@media only screen and (max-width: 950px) {
    .textbox {
        padding: 32px 64px 32px 64px;
    }
}

.textbox h2 {
    text-align: center;
    font-size: 24px;
    text-decoration: underline;
    color: var(--tittlefontcolor);
    margin-bottom: 14px;
}

.textbox p {
    text-align: center;
    justify-self: center;
    font-family: "text2";
    /*font-family: "Open Sans", sans-serif;
    font-style: normal;*/
    max-width: 650px;
}

/* .minibox(.icon, .banner) */

section:has(> .minibox) {
    grid-template-columns: repeat(4,auto);
    width: 1250px;
    justify-self: center;
}

.minibox {
    background-color: var(--miniboxbgcolor);
    height: 300px;
    width: 250px;
    transition: 120ms;
    border-radius: var(--radius);
    margin: 32px 0px 32px 0px ;
    display: grid;
    grid-template-columns: 68px auto;
    grid-template-rows: 38px 62px auto 50px;
}

.minibox div {
    width: 60px;
    height: 60px;
    border: 2px solid var(--pricolor);
    border-radius: var(--radius);
    margin: 8px 0px 0px 8px;
    display: grid;
    justify-content: center;
    align-content: center;
    grid-row: 1/3;
    grid-column: 1/2;
}

.minibox .icon {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border: 2px solid #0000;
    border-radius: calc(var(--radius) - 4px);
    background: rgb(63,84,121);
    background: var(--miniboxiconcolor);
}

.minibox h2 {
    grid-row: 1/2;
    grid-column: 2/3;
    height: fit-content;
    margin: 12px 0px 0px 4px;
    font-size: 20px;
}

.minibox p {
    grid-row: 2/3;
    grid-column: 2/3;
    height: fit-content;
    margin: 0px 0px 0px 4px;
    font-size: 16px;
    color: var(--decentfontcolor);
}

.minibox .banner {
    width: 250px;
    height: 150px;
    object-fit: cover;
    grid-row: 3/4;
    grid-column: 1/3;
}

.minibox ul {
    grid-row: 4/5;
    grid-column: 1/3;
    list-style: none;
    display: grid;
    grid-template-rows: auto;
    height: max-content;
    align-content: center;
    justify-content: center;
    align-self: center;
}

.minibox li {
    grid-row: 1/2;
    height: fit-content;
    height: fit-content;
    padding: 5px;
    border-bottom: 2px solid #0000;
    transition: 120ms;
}

.minibox li:hover {
    border-bottom: 2px solid var(--pricolor);
}

.minibox ul img {
    width: 25px;
    height: 25px;
    object-fit: cover;
}

.minibox:hover {
    box-shadow: 0px 0px 15px var(--miniboxhovshadow);
    background-color: var(--miniboxhovcolor);
    cursor: pointer;
}

@media only screen and (max-width: 1250px) {
    section:has(> .minibox) {
        grid-template-columns: repeat(3,auto);
        width: 950px;
    }
}

@media only screen and (max-width: 950px) {
    section:has(> .minibox) {
        grid-template-columns: repeat(2,auto);
        width: 650px;
    }
}

@media only screen and (max-width: 650px) {
    section:has(> .minibox) {
        grid-template-columns: repeat(1,auto);
    }
}

.form {
    display: grid;
    color: var(--fontcolor);
    font-family: "text";
    padding: 26px 80px;
    border-radius: var(--radius);
    background-color: var(--textboxbgcolor);
    box-shadow: var(--boxshadow);
    margin-top: 28px;
}

.form input {
    border: none;
    border-bottom: 2px solid var(--fontcolor);
    border-radius: 0px;
    padding: 4px 0px;
    background-color: #0000;
    margin-bottom: 12px;
    color: var(--fontcolor);
    font-size: 20px;
}

.form input:focus {
    outline: none;
    border-bottom: 2px solid var(--pricolor);
    color: var(--pricolor);
}

.form input:hover {
    border-bottom: 2px solid var(--pricolor);
}

.form h2 {
    justify-self: center;
    margin-bottom: 30px
}

.form .button_m_1 {
    margin-top: 22px;
}

.minForm {
    margin: 12px;
    display: grid;
}

/* ---[3 Buttons & co.]--- */

.link {
    text-decoration: underline;
    cursor: pointer;
}

.button_s_1 {
    border-radius: calc(var(--radius) - 4px);
    color: var(--fontcolor);
    background-color: var(--miniboxbgcolor);
    box-shadow: var(--boxshadow);
    border: 1px solid #0000;
    padding: 2px 12px;
    transition: 120ms;
    justify-self: center;
}

.button_s_2 {
    border: none;
    border-top: 2px solid #0000;
    border-bottom: 2px solid var(--fontcolor);
    color: var(--fontcolor);
    background-color: var(--bgcolor);
    font-size: 16px;
    padding: 2px;
    transition: 120ms;
    width: fit-content;
    justify-self: center;
}

.button_m_1 {
    border-radius: calc(var(--radius) - 4px);
    color: var(--fontcolor);
    background-color: var(--miniboxbgcolor);
    box-shadow: var(--boxshadow);
    border: 1px solid #0000;
    padding: 6px 24px;
    transition: 120ms;
}

.button_l_1 {
    border-radius: calc(var(--radius) - 4px);
    color: var(--fontcolor);
    background-color: var(--miniboxbgcolor);
    box-shadow: var(--boxshadow);
    border: 2px solid #0000;
    padding: 6px 24px;
    transition: 120ms;
    font-size: 20px;
    justify-self: center;
    align-items: center;
}

.button_s_1:hover {
    box-shadow: 0px 0px 15px var(--miniboxhovshadow);
    background-color: var(--miniboxhovcolor);
    color: var(--pricolor);
    border: 1px solid var(--pricolor);
}

.button_s_2:hover {
    border-bottom: 2px solid var(--pricolor);
}

.button_m_1:hover {
    box-shadow: 0px 0px 15px var(--miniboxhovshadow);
    background-color: var(--miniboxhovcolor);
    color: var(--pricolor);
    border: 1px solid var(--pricolor);
}

.button_l_1:hover {
    box-shadow: 0px 0px 15px var(--miniboxhovshadow);
    background-color: var(--miniboxhovcolor);
    color: var(--pricolor);
    border: 2px solid var(--pricolor);
}