*{
    margin:0;
    padding:0;
    font-family: degular-variable, sans-serif;
}


/* regular */
.black {
    font-variation-settings: "ital" 0, "opsz" 14, "wght" 800;
}

.bold {
    font-variation-settings: "ital" 0, "opsz" 14, "wght" 700;
}

.semibold {
    font-variation-settings: "ital" 0, "opsz" 14, "wght" 600;
}

.medium {
    font-variation-settings: "ital" 0, "opsz" 14, "wght" 500;
}

.regular {
    font-variation-settings: "ital" 0, "opsz" 14, "wght" 400;
}

.light{
    font-variation-settings: "ital" 0, "opsz" 14, "wght" 300;
}

.thin{
    font-variation-settings: "ital" 0, "opsz" 14, "wght" 200;
}

/* display */
.display{
    font-variation-settings: "opsz" 72;
}

.display-black {
    font-variation-settings: "ital" 0, "opsz" 72, "wght" 800;
}

.display-bold {
    font-variation-settings: "ital" 0, "opsz" 72, "wght" 700;
}

.display-semibold {
    font-variation-settings: "ital" 0, "opsz" 72, "wght" 600;
}

.display-medium {
    font-variation-settings: "ital" 0, "opsz" 72, "wght" 500;
}

.display-regular {
    font-variation-settings: "ital" 0, "opsz" 72, "wght" 400;
}

.display-light{
    font-variation-settings: "ital" 0, "opsz" 72, "wght" 300;
}

.display-thin{
    font-variation-settings: "ital" 0, "opsz" 72, "wght" 200;
}

/* text */
.text{
    font-variation-settings: "opsz" 6,
}

.text-black {
    font-variation-settings: "ital" 0, "opsz" 6, "wght" 800;
}

.text-bold {
    font-variation-settings: "ital" 0, "opsz" 6, "wght" 700;
}

.text-semibold {
    font-variation-settings: "ital" 0, "opsz" 6, "wght" 600;
}

.text-medium {
    font-variation-settings: "ital" 0, "opsz" 6, "wght" 500;
}

.text-regular {
    font-variation-settings: "ital" 0, "opsz" 6, "wght" 400;
}

.text-light{
    font-variation-settings: "ital" 0, "opsz" 6, "wght" 300;
}

.text-thin{
    font-variation-settings: "ital" 0, "opsz" 6, "wght" 200;
}

.italic{
    font-style: italic;
}

a{
    text-decoration: none;
    color:var(--Black)
}

a:hover{
    color: var(--Blue);
}
/* colors */

:root {
    --Blue: #6CBAE7;
    --White: #ffffff;
    --Black: #000;
  }
/* h1{
    font-size: 5rem;
} */

p{
    font-size: 1.2rem;
}

html {
    box-sizing: border-box;
/*	background-color: var(--White);*/
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

body{
    width: 100vw;
    overflow-x: hidden;
}

section{
    /* border: 1px solid black; */
    padding: 7vh 7vw;
}

.full-width{
    padding: 0;
}

.full-height{
    min-height: 100vh;
    padding: 7vh 7vw;
}

@media (min-width: 400px) and (max-width: 780px) and (orientation:portrait){
    .full-height{
        min-height: auto;
    }
}

/* header */
header{
    width: 100vw;
    /* background-color: black; */
    border-bottom: 1px solid black;
}
header nav{
    padding: 1vh 0;
    text-align: center;
	margin: auto;

}
header nav ul {
    display: flex;
/*    max-width: 600px;*/
/*    width: 50vw;*/
    margin: auto;
    justify-content: center;
    align-items: center;
}

header nav ul li{
    list-style-type: none;
    text-transform: uppercase;
    padding: 8px 16px;
/*    width: 20%;*/
    font-size: 1rem;
	margin:0 8px;
    a{
    text-align: center;

    }
}

header nav ul #logo{
    text-transform: capitalize; 
    font-size: 1.5rem;
}

header nav ul .black-bg {
    background-color: black;
    border: 1px solid black;
}

.black-bg a{
    color: white;
}

.black-bg:hover{
    background-color: var(--Blue);
    border: 1px solid black;

    a{
        color: var(--Black);
    }
}
/* marquee */
/* .marquee span {
    display: inline-block;
    animation: marquee 10s linear infinite;
    width: 100%;
  }

.marquee-reverse span{
    display: inline-block;
    animation: marquee 10s linear infinite;
    animation-direction: reverse;
} */

/* @keyframes marquee {
    0% {
      transform: translateX(100vw);
    }

    100% {
      transform: translateX(-100%);
    }
  } */

footer{
    height: 100vh;
    background-color: var(--Blue);
    position: relative;
    padding: 5vw;
    overflow: hidden;
}

footer h1{
    font-family: degular-display;
    -webkit-text-stroke: 1px var(--Black);
    font-size: 20vh;
    line-height: 19vh;
    color: white;
    z-index: 3;
}

footer nav ul li{
    list-style-type: none;
    display: flex;
    align-items: center;
    font-size: 2rem;
    z-index: 2;
}

footer nav ul li a:hover{
    color: white;
}

footer img{
    position: absolute;
    top: 10vh;
    z-index: 0;
    left: 30%;
    height: 80vh;
}

footer #credits {
    position: absolute;
    bottom: 5vw;
}

@media (max-width: 500px){
    footer{
        height: 300px;
    }
    footer h1{
        font-size: 6rem;
        line-height: 6rem;
        color: white;
        z-index: 3;
    }
    footer img{
        position: absolute;
        top: 10%;
        z-index: 0;
        left: 30%;
        height: 300px;
    }
}