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

:root {
    /* FONTS */
    --logo-font: Poppins;
    --logo-font-color1: white;
    --logo-font-color2: gray;
    --logo-font-size: 1.5rem;
    --menu-font: Poppins;
    --menu-font-color: white;
    --menu-font-size: 3.5rem;

    --footer-font: Poppins;
    --footer-font-size: 1rem;
    --footer-font-color: white;

    /* NAVBAR */
    --navbar-bg-color: black;
    --navbar-padding: 8px;

    /* SYMBOL */
    --quad-size: 15px;

    /* MENU BUTTON */
    --menu-button-container-width: 100%;
    --bar-color: white;
    --bar-width: 50px;
    --bar-height: 5px;
    --bar-space: 7px;

    /* MENU */
    --menu-bg-color: black;
    --menu-padding: 0 0 0 10%;

    /* MAIN CONTAINER */
    --main-container-padding: 55px 20px 0px 20px;
    --main-container-font-size: 1rem;
    --claim-font-size: 2.5rem;
    --claim-margin-bottom: 10%;
    --about-font-size: 1rem;
    --about-margin-bottom: 10%;
    --list-margin-left: 8%;
    --h2-font-size: 2.3rem;
    --h3-font-size: 1.9rem;
    --h4-font-size: 1.5rem;
    --image-container-visibility: flex;
    --images-container-visibility: none;
    --image-holder-width: 100%;
    --caption-font-size: 1rem;
    --video-content-width: 100%;

    /* FOOTER */
    --footer-flex-dir: column;
    --footer-margin-top: 0%;
    --footer-height: 450px;
    --footer-bg-color: black;
    --footer-padding: 2%;
}

body {
    width: 100%;
    height: 100%;
    background: #141414;
}

/* NAVBAR */
#navbar {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0px;
    width: 100%;
    padding: var(--navbar-padding);
    background: var(--navbar-bg-color);
    /* border: 1px solid red; */
}

.navbar-item {
    display: flex;
    align-items: center;
    color: var(--logo-font-color1);
    font-size: var(--logo-font-size);
    font-family: var(--logo-font);
    /* border: 1px solid violet; */
}

.logo-color2 {
    color: var(--logo-font-color2);
}

/* SYMBOL */
.symbol-container {
    display: flex;
    flex-wrap: wrap;
    min-width: var(--quad-size);
    height: var(--quad-size);
    /* border: 1px solid yellow; */
}

.quad {
    width: 50%;
    height: 50%;
}

.quad1 {
    background: var(--logo-font-color1);
}

.quad2 {
    background: var(--logo-font-color2);
}

.quad-empty {
    opacity: 0;
}

#logo-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* border: 1px solid yellow; */
}

/* MENU BUTTON */
#menu-button-container {
    display: flex;
    justify-content: flex-end;
    width: var(--menu-button-container-width);
    /* border: 1px solid violet; */
    z-index: 1000;
}

#menu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bar1, .bar2, .bar3 {
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--bar-color);
    margin-bottom: var(--bar-space);
    transition: .4s;
}

.change .bar1 {
    transform: translate(0, 12px) rotate(-45deg);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: translate(0, -12px) rotate(45deg);
}

/* MENU */
#menu-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--menu-bg-color);
    padding: var(--menu-padding);
    transition: .4s;
    opacity: 0;
    /* border: 1px solid green; */
}

.menu-visible {
    opacity: 1 !important;
}

#menu-container a {
    text-decoration: none;
    color: var(--menu-font-color);
    font-family: var(--menu-font);
    font-size: var(--menu-font-size);
}

/* MAIN CONTAINER */
#main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-size: var(--main-container-font-size);
    padding: var(--main-container-padding);
    /* border: 1px solid green; */
}

#claim-container {
    width: 100%;
    color: white;
    font-family: Poppins;
    font-size: var(--claim-font-size);
    line-height: 100%;
    margin-bottom: var(--claim-margin-bottom);
    /* border: 1px solid red; */
}

#about-container {
    width: 100%;
    color: white;
    font-family: Poppins;
    margin-bottom: var(--about-margin-bottom);
    /* border: 1px solid yellow; */
}

#what-we-do-container {
    width: 100%;
    color: white;
    font-family: Poppins;
    margin-bottom: 5%;
    /* border: 1px solid yellow; */
}

#what-we-do-container h2 {
   text-decoration: underline;
   font-size: var(--h2-font-size);
}

#what-we-do-container h3 {
    font-size: var(--h3-font-size);
}

#what-we-do-container h4 {
    font-size: var(--h4-font-size);
}

.application-example {
    width: 100%;
    font-style: italic;
    color: #b8b8b8;
    text-align: start;
}

.image-container {
    display: var(--image-container-visibility);
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* border: 1px solid #303030; */
    /* border: 1px solid red; */
}

.images-container {
    display: var(--images-container-visibility);
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2%;
    /* border: 1px solid #303030; */
}

.image-collections {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    /* border: 1px solid yellow; */
}

.image-collections-multi {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 70%;
    /* border: 1px solid red; */
}

.image-holder {
    display: flex;
    flex-direction: column;
    max-width: var(--image-holder-width);
    /* border: 1px solid violet;    */
}

.image-caption {
    font-style: italic;
    padding: 5%;
    font-size: var(--caption-font-size);
    /* border: 1px solid red; */
}

.image-single {
    max-width: 100%;;
    object-fit: fill;
}

.image-multi {
    max-width: 100%;;
    object-fit: fill;
}



#what-we-do-container li {
    margin-left: var(--list-margin-left);
}

.video-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 5%;
    /* border: 1px solid yellow; */
}

.video-content {
    width: var(--video-content-width);
}

.video-caption {
    text-align: center;
    font-style: italic;
    font-size: var(--caption-font-size);
    /* border: 1px solid yellow; */
}

/* FOOTER */
#footer {
    display: flex;
    flex-direction: var(--footer-flex-dir);
    width: 100%;
    height: var(--footer-height);
    background: var(--footer-bg-color);
    margin-top: var(--footer-margin-top);
}

.footer-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: var(--footer-font);
    font-size: var(--footer-font-size);
    color: var(--footer-font-color);
    padding: var(--footer-padding);
    text-align: justify;
}

.footer-item a {
    color: var(--footer-font-color);
}

.footer-item img {
    width: 100%;
}

@font-face {
    font-family: Chillen;
    src: url('./fonts/Chillen.ttf');
}

@font-face {
    font-family: Poppins;
    src: url('./fonts/Poppins-Regular.ttf');
}

@font-face {
    font-family: Poppins-Bold;
    src: url('./fonts/Poppins-Bold.ttf');
}

/* DESKTOP */
@media (min-width: 1281px) {
    :root {
        --menu-font-size: 8rem;
        --navbar-padding: 30px;
        --logo-font-size: 3rem;
        --menu-padding: 0 0 0 15%;
        --quad-size: 35px;
        
        --main-container-padding: 150px 250px 0px 250px;
        --main-container-font-size: 1.6rem;
        --h2-font-size: 3rem;
        --h3-font-size: 2.8rem;
        --h4-font-size: 2.3rem;
        --claim-font-size: 5rem;
        --claim-margin-bottom: 5%;
        --about-margin-bottom: 5%;
        --list-margin-left: 4%;
        --image-container-visibility: none;
        --images-container-visibility: flex;
        --image-holder-width: 40%;
        --caption-font-size: 1.5rem;
        --video-content-width: 80%;

        --footer-flex-dir: row;
        --footer-margin-top: 5%;
    }
}