/* HELP CENTER HOMEPAGE */

#support-index-container {
    background-color: var(--bg-3);
}

#support-tagline-container h1,
#shortcut-section h2,
#video-section h2,
#faq-section h2,
#discord-section h2,
#feature-section h2 {
    color: var(--text-0);
    font-weight: 800;
    text-transform: uppercase;
}

/* HEADER */
#head-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;

    height: 26rem;
    padding-top: 5.5rem;

    background-color: var(--bg-1);
    background-image: url('/support/assets/img/header-chara.svg');
    background-position: bottom 0px left 70%;
    background-size: 300px;
    background-repeat: no-repeat;

    border-radius: 0px 0px 4em 4em;
    filter: drop-shadow(0px 0px 15px var(--vitta-shadow-color));
    z-index: 5;
    position: relative;
}

#support-tagline-container {
    height: fit-content;
    position: relative;
    text-align: center;
}

#support-tagline-container img {
    height: 5em;
    position: absolute;
    left: -35%;
    top: -90%;
}

#head-flex #search-input-group {
    width: min(95%, 80ch);
    margin: 0 0.5em;
}

#scroll-arrow {
    position: absolute;
    top: 83.8%;
    background: var(--bg-1);
    width: 100px;
    height: 100px;
    text-align: center;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

#scroll-arrow::before {
    z-index: -1;
    content: "";
    position: absolute;
    top: 67%;
    right: 0;
    left: -13px;
    height: 15px;
    background: radial-gradient(farthest-side at bottom left, transparent 98%, var(--bg-1) 100%) 0/15px no-repeat;
}

#scroll-arrow::after {
    z-index: -1;
    width: 100%;
    content: "";
    position: absolute;
    top: 67%;
    left: calc(100% - 2px);
    right: 0;
    height: 15px;
    background: radial-gradient(farthest-side at bottom right, transparent 98%, var(--bg-1) 100%) 0/15px no-repeat;
}

#scroll-arrow i {
    opacity: 50%;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

@media (max-width: 1066px) {
    #head-flex {
        height: 15rem;
        background-image: none;
        padding-top: 3.5em;
        justify-content: center;
    }

    #scroll-arrow {
        top: 79.4%;
        width: 80px;
        height: 80px;
    }

    #scroll-arrow::before,
    #scroll-arrow::after {
        top: 62%;
    }

    #scroll-arrow::before {
        left: -11px;
    }

    #scroll-arrow::after {
        left: calc(100% - 4px);
    }

}

@media (max-width: 576px) {

    #scroll-arrow,
    #support-tagline-container img {
        display: none;
    }
}


/* SHORTCUT SECTION */

#shortcut-section {
    margin: 5rem 0rem;
    text-align: center;
}

#shortcut-section #shortcuts {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    padding-left: unset;
    margin-top: 2rem;
}

#shortcut-section #shortcuts li {
    display: block;
    width: min(80%, 200px);

}

#shortcut-section #shortcuts li a {
    display: grid;
    align-items: center;
    grid-template-rows: 8em 2em;

    border-radius: 0.5em;

    transition: all 0.1s ease;
    text-decoration: none;
}

#shortcut-section #shortcuts li a:hover,
#shortcut-section #shortcuts li a:focus {
    background-color: var(--bg-1);
}

#shortcut-section #shortcuts li a svg {
    color: var(--text-2);
    margin: 0.75rem auto;
    width: 90px;
    height: 90px;
    transition: inherit;
}

#shortcut-section #shortcuts li a:hover svg,
#shortcut-section #shortcuts li a:focus svg {
    color: var(--vitta-green);
    color: var(--hover-color);
}

#shortcut-section #shortcuts li a h3 {
    color: var(--text-0);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0;
}

/* VIDEO & DISCORD SECTION */

#video-section,
#discord-section {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    margin: 5rem 0rem;
    padding: 3rem;
    align-items: center;

    background: var(--bg-1);

    border-radius: 0em 4em 4em 0em;
    filter: drop-shadow(0px 0px 15px var(--vitta-shadow-color));
    position: relative;
}

#discord-section::before,
#video-section::before {
    content: "";
    position: absolute;
    top: -50px;
    right: 0;
    left: 0;
    height: 50px;
    background:
        radial-gradient(farthest-side at top right, transparent 98%, var(--bg-1) 100%) 0/50px no-repeat;
}

#discord-section::after,
#video-section::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 50px;
    background:
        radial-gradient(farthest-side at bottom right, transparent 98%, var(--bg-1) 100%) 0/50px no-repeat;
}

#video-section h2 span {
    color: #F53F3F;
}

#discord-section h2 span {
    color: #5865F2;
}

#video-section img,
#discord-section img {
    display: block;
    max-width: 100%;
    border-radius: 1em;
    border: 1em solid var(--text-0);
    max-height: 20em;
    margin: 0 auto;

    grid-row: 1;
}

#video-section .video-text,
#discord-section .discord-text {
    max-width: 45ch;
    margin: 0 2em;
}

@media (max-width: 768px) {

    #video-section,
    #discord-section {
        grid-template-columns: unset;
        grid-template-rows: auto auto;
        padding: 2.5rem 1rem;
    }

    #video-section .video-img,
    #discord-section .discord-img {
        max-height: unset;
        grid-row: 2 / 3;
    }

    #video-section img,
    #discord-section img {
        max-height: fit-content;
    }

    #video-section .video-text,
    #discord-section .discord-text {
        text-align: center;
        max-width: none;
        margin: 0 2em;
        margin-bottom: 1em;
    }

}

/* FAQ SECTION */

#faq-section {
    margin: 5rem 1rem;
    text-align: center;
}

#faq-section h2 span {
    color: var(--vitta-green-dark);

}

/* DISCORD ADDITIONAL CORNER */

#discord-section {
    border-bottom-right-radius: 0%;
}

#discord-additional-corner {
    position: absolute;
    top: 100%;
    right: 0;
    left: calc(100% - 50px);
    height: 50px;
    background: radial-gradient(farthest-side at bottom left, transparent 98%, var(--bg-1) 100%) 0/50px no-repeat;
    width: 50px;

}

/* FEATURE SECTION */

#feature-section {
    margin: 5rem 0rem;
    text-align: center;

    margin-bottom: 0;
    padding-bottom: 5rem;

}

#feature-section h2 span {
    color: var(--vitta-green-dark);

}

#feature-section #features {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;

    padding: 0;
}

#feature-section #features li {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: 8em 2em auto 1fr;
}

#feature-section #features hr {
    width: 2px;
    height: 100%;
    background-color: var(--text-3);
    border-radius: 20px;
}

#feature-section #features li svg {
    color: var(--text-0);
    margin: 2em;
    width: 90px;
    height: 90px;
    transition: inherit;
}

#feature-section #features li h3 {
    color: var(--vitta-green-dark);
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: 700;
}

#feature-section #features li p {
    align-self: baseline;
    font-weight: 300;
    width: 30ch;
}

@media (max-width: 768px) {


    #feature-section #features {
        grid-template-columns: auto;
        grid-template-rows: 1fr auto 1fr auto 1fr;
    }

    #feature-section #features hr {
        width: 90%;
        height: 1px;
    }

}