@import url("https://fonts.googleapis.com/css2?family=Amiko:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap");

/* font-family: "Amiko", sans-serif; */
/* font-family: "Open Sans", sans-serif; */

/* ICONS */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

:root {
    --accent-color-one: #ec764f;
    --accent-color-two: #2e5df3;

    --primary-color: #0f1a20;
    --primary-color-90alpha: #0f1a20e6;
    --secondary-color: #262730;
    --tertiary-color: #9e9bac;

    --shadow-color: rgba(0,0,0,0.5);

    --text-color-one: #fffffc;
    --text-color-two: #d9d9d9;

    --divider-color-one: rgba(255, 255, 255, 0.12);

    --background-selected: #283237;
    
    
    --background-gradient: linear-gradient(333deg, var(--accent-color-one) -16.78%, #72465d 46.56%, var(--accent-color-two) 143.11%);
    --background-gradient-network: linear-gradient(281deg, rgba(157, 21, 21, 0.8) -16.78%, rgba(0, 0, 0, 0.8) 46.56%, rgba(9, 17, 115, 0.8) 143.11%);
    --background-gradient-black: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 3.57%, rgba(0, 0, 0, 0.52) 30.06%, #000 100%);

    --font-size-h1: 47.78px;
    --font-size-h2: 39.81px;
    --font-size-h3: 33.18px;
    --font-size-h4: 27.65px;
    --font-size-h5: 23.04px;
    --font-size-h6: 19.2px;
    --font-button: 16px;
    --font-body: 16px;
    --font-small-one: 14.73px;
    --font-small-two: 13.11px;

    /* FONT SIZES FOR MOBILE */
    --font-mob-size-h1: 32.44px;
    --font-mob-size-h2: 28.83px;
    --font-mob-size-h3: 25.63px;
    --font-mob-size-h4: 22.78px;
    --font-mob-size-h5: 20.25px;
    --font-mob-size-h6: 18px;
    --font-mob-button: 16px;
    --font-mob-body: 16px;
    --font-mob-small-one: 14.72px;
    --font-mob-small-two: 13.64px;
}

* {
    margin: 0px;
    border: 0px;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* body {

} */

h1 {
    font-family: "Amiko", sans-serif;
    font-size: var(--font-size-h1);
}

h2 {
    font-family: "Amiko", sans-serif;
    font-size: var(--font-size-h2);
}

h3 {
    font-family: "Amiko", sans-serif;
    font-size: var(--font-size-h3);
}

h4 {
    font-family: "Amiko", sans-serif;
    font-size: var(--font-size-h4);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

h5 {
    font-family: "Amiko", sans-serif;
    font-size: var(--font-size-h5);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

h6 {
    font-family: "Amiko", sans-serif;
    font-size: var(--font-size-h6);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.small-one {
    font-family: "Open Sans", sans-serif;
    font-size: var(--font-small-one);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.small-two {
    font-family: "Open Sans", sans-serif;
    font-size: var(--font-small-two);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.body-text {
    font-family: "Open Sans", sans-serif;
    font-size: var(--font-body);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.button-text {
    font-family: "Amiko", sans-serif;
    font-size: var(--font-button);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.5px;
}

/* MOBILE SCREEN */
/* THEY ARE TWO MEDIA QUERIES SO FAR 450px */
@media screen and (max-width: 449px) {
    h1 {
        font-family: "Amiko", sans-serif;
        font-size: var(--font-mob-size-h1);
    }

    h2 {
        font-family: "Amiko", sans-serif;
        font-size: var(--font-mob-size-h2);
    }

    h3 {
        font-family: "Amiko", sans-serif;
        font-size: var(--font-mob-size-h3);
    }

    h4 {
        font-family: "Amiko", sans-serif;
        font-size: var(--font-mob-size-h4);
    }

    h5 {
        font-family: "Amiko", sans-serif;
        font-size: var(--font-mob-size-h5);
    }

    h6 {
        font-family: "Amiko", sans-serif;
        font-size: var(--font-mob-size-h6);
    }

    .small-one {
        font-family: "Open Sans", sans-serif;
        font-size: var(--font-mob-small-one);
    }

    .small-two {
        font-family: "Open Sans", sans-serif;
        font-size: var(--font-mob-small-two);
    }
}