:root{
    --primary-color: #453C67;
    --primary-color-transparent: rgba(69, 60, 103, 0.5);
    --primary-dark-color: #2c283e;
    --primary-dark-color-transparent: rgba(44, 40, 62, 0.3);
    --secondary-color: #6D67E4;
    --secondary-dark-color: #4b44a8;
    --secondary-color-transparent: rgba(109, 103, 228, 0.5);
    --turkis-color: #46c2cb;
    --turkis-dark-color:#2c8389;
    --yellow-color: #f2f7a1;
    --yellow-dark-color: #f3f7a195;
    --text-color: lightgray;
}

html{
    margin: 0;
    padding: 0;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;
    background: var(--primary-color);
    scroll-behavior: smooth;
    }

body{
    background: var(--primary-color);
    background: linear-gradient(180deg,rgba(69, 60, 103, 1) 25%, rgba(109, 103, 228, 1) 100%);
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
}

body::before {
    content:'';
    position:fixed; inset:0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events:none; z-index:0;
}


#main{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 10pt;
}


#header{
    max-height: 100px;
    background-color: var(--primary-color-transparent);
    padding: 10pt;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    backdrop-filter: blur(8px);

    display: grid;
    grid-template-columns: auto 1fr auto;
    box-shadow: inset 0 0 10pt 2pt var(--primary-color);
}

#logo{
    font-family: 'Archivo Black', sans-serif;
    color: #fff;
    font-size: 20pt;
    padding-left: 2pt;
}

#headerLogoN{
    color: var(--turkis-color);
}

#headerLogoDot{
    color: var(--yellow-color);
}

#headerBtnElement{
    background-color: var(--yellow-color);
    color: var(--primary-color);
    border: none;
    border-radius: 50pt;
    padding: 6pt;
    padding-left: 10pt;
    padding-right: 10pt;
    font-family: 'Instrument Sans', sans-serif;
    transition: all 0.15s ease-in-out;
}

#headerBtnElement:hover{
    transform: scale(1.1);
    box-shadow: 0 0 7.5pt 1pt var(--yellow-dark-color);
    background-color: transparent;
    color: var(--yellow-color);
}

#headerBtnElement:active{
    transform: scale(1);
    box-shadow: 0 0 7.5pt 1pt var(--yellow-dark-color);
    background-color: transparent;
    color: var(--yellow-color);
}