/*? === DOC ===  */
:root{
    /*! GENERAL */
    --background-color    : linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
    --background-R-color    : linear-gradient(45deg, #1a1a1a 0%, #732727 100%);
    
    --supertitle-size   : 3vh;
    --title-size        : 2.5vh;
    --subtitle-size     : 2.2vh;
    --supertext-size    : 1.9vh;
    --text-size         : 1.6vh;

    /*! SCROLLBAR  */
    --scroll-bg-color   : #787878;
    --scroll-hover-color: #999999;

    --border-color        : #000000;
    --border-active-color : #ffffff;

    --hover-color       : #4b4b4b;
    --active-color      : #4b4b4b80;

    --input-background-color    : #34343480;
    --input-focusbg-color       : #343434;
    --input-text-color          : #d4d4d4d1;
    --input-error-color         : #ff43218c;

    /*! HEADER  */
    --header-height     : 10vh;

    /*! MAIN  */
    --main-height     : 90vh;
    --main-bg-color   : #f0f0f0;

    /*todo SECTION HERO  */
    --section-hero-bgf-color  : #000000de;
    --section-hero-bgt-color  : #00000075;

    /*todo SECTION DESCRIPTION  */
    --section-description-f-color  : #00000075;
    --section-description-t-color  : #000000de;

    --section-description-f-color : red;
    --section-description-t-color : blue;

    --aside-bg: #ffffff;
    --aside-veil: rgba(16,22,26,0.45);
    --aside-shadow: rgba(15,23,42,0.15);
    --aside-accent: #2c3e50;
    --aside-radius: 5vh;
    --transparent-color : #00000070;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar:horizontal {
    height: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--scroll-bg-color);
    transition: background-color var(--transition-duration) var(--transition-type);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-hover-color);
}

@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    src: url("https://didag.net/Static/symbols.woff2") format("woff2");
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.symbols {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga";
}

html * {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
}

/*? === BODY ===  */

body {
    font-family: 'Arial';
    user-select: none;

    background-color: var(--background-color);
    opacity: 1;
    overflow-x: hidden;
    overflow-y: auto;
}

a {
    text-decoration: none;
}

ul, li {
    list-style: none;
}

h1 {
    font-size: 7vh;
}

h2 {
    font-size: 5rem;
}

h3 {
    font-size: 2rem;
}

/*TODO INPUTS */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*TODO BUTTONS */

.cta-a {
    height: 10vh;
    width: 50vh;

    color: #fff;
    font-weight: bold;
    font-size: 2.5vh;

    background-color: rgba(255, 0, 0, 0.75);
    border-radius: 5vh;
    border: 0.25vh solid white;

    cursor: pointer;

    transition: 
        background-color 0.5s ease,
        transform 0.5s ease;
}

.cta-a:hover {
    background-color: rgba(255, 0, 0);
    transform: translateX(1vh);
}

/*? === HEADER ===  */

.section_header {
    height: var(--header-height);
    width: 100vw;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: var(--background-color);
}

/*todo === HEADER LOGO ===  */

.section_header_logo {
    height: 100%;
    width: 25%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.section_header_logo_img {
    height: 60%;
}

.section_header_logo img {
    height: 100%;
    width: 100%;

    object-fit: contain;
}

/*? === MAIN ===  */

.section_main {
    width: 100vw;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;

    background-color: var(--main-bg-color);
}

/*? === MEDIA QUERY ===  */

@media screen and (max-width: 768px) {

    /*? === HEADER ===  */
    
    .section_header_logo {
        width: 60%;
    }

}