@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Crimson+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prata&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Crimson+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Prata&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Crimson+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Prata&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Crimson+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Prata&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Space+Grotesk:wght@300..700&display=swap');


:root {
    --brand-color-1-hex: #31188C;
    --brand-color-2-hex: #060940;
    --brand-color-3-hex: #010326;
    --brand-color-4-hex: #7338F2;
    --brand-color-5-hex: #0A0E59;

    --brand-color-6-hex: #fafafa;

    --brand-color-7-hex: #f6faff;

    /* #fcf8ff */
    --bg: white;
    --font-color-1: black;


    --brand-color-test-1: #1a1a1a;
    --brand-color-test-2: #0a0a0a;
    --dark-mode-icon-color: #1a1a1a;
}

section {
    text-align: center;
}

/* Color Theme Swatches in Hex */
.brand-color-1-hex {
    color: #6E30F2;
}

.brand-color-2-hex {
    color: #231773;
}

.brand-color-3-hex {
    color: #4B50BF;
}

.brand-color-4-hex {
    color: #ACB0F2;
}

.brand-color-5-hex {
    color: #EBEDF2;
}

/* Color Theme Swatches in RGBA */
.brand-color-1-rgba {
    color: rgba(110, 48, 242, 1);
}

.brand-color-2-rgba {
    color: rgba(35, 23, 115, 1);
}

.brand-color-3-rgba {
    color: rgba(75, 80, 191, 1);
}

.brand-color-4-rgba {
    color: rgba(172, 176, 242, 1);
}

.brand-color-5-rgba {
    color: rgba(235, 237, 242, 1);
}

/* Color Theme Swatches in HSLA */
.brand-color-1-hsla {
    color: hsla(259, 88, 56, 1);
}

.brand-color-2-hsla {
    color: hsla(247, 66, 27, 1);
}

.brand-color-3-hsla {
    color: hsla(237, 47, 52, 1);
}

.brand-color-4-hsla {
    color: hsla(236, 72, 81, 1);
}

.brand-color-5-hsla {
    color: hsla(222, 21, 93, 1);
}

body {
    font-size: 1em;
    font-family: 'Work Sans', sans-serif;
    line-height: 1.6;
    background-color: var(--bg);
    color: var(--font-color-1);
}

.underline {
    text-decoration: underline solid yellow 2px;
    text-underline-offset: 5px;
}


section {
    margin: 5% 0%;
}

h1 {
    /*font-family: 'Crimson Pro', serif;*/
    /*    font-family: 'Playfair Display', serif;*/
    font-family: 'Lora', serif;

    text-transform: uppercase;
    font-size: 4em;
    letter-spacing: 0.1em;
    margin-top: 6%;
    margin-bottom: 3%;
}

h1:after {
    content: '';
    width: 50px;
    height: 3px;
    background: var(--brand-color-4-hex);
    display: block;
    margin: 10px auto;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

h1:hover:after {
    width: 200px;
}

.title-h1 {
    text-transform: uppercase;
    font-family: 'Space Grotesk', serif;
    font-size: 7em;
    line-height: 1em;
}

.intro-logo {
    width: 50%;
}

.cont-header {
    text-align: center;
    padding-top: 2%;
    padding-bottom: 5%;
    margin-top: 3%;

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

footer {
    background-color: var(--brand-color-6-hex);
}

.footer-logo {
    text-align: center;
}

.under-construction {
    width: 50%;
}