/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;800&display=swap');



/* [SITE WIDE STYLES] */
* {
    padding:0;
    margin:0;
    box-sizing:border-box;
}
  
:root {
    --color-dark:rgba(0, 0, 0, 1);
    --color-dark-alpha:rgba(0, 0, 0, .8);
    --color-light:rgba(255, 255, 255, 1);
    --color-light-alpha:rgba(255, 255, 255, .8);
    --color-accent:rgba(249, 251, 175, 1);
    --color-metaverse:rgba(0, 25, 58, 1);
    
}

html {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--color-dark);
    color: var(--color-dark);

}

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

a:hover {
    text-decoration: none;
}


  /* [MENU STYLES] */
  
  header {
    background-color:var(--color-dark-alpha);
    position:fixed;
    z-index:999;
    width:100%;
    
  }
  
  .nav-logo {
    display:flex;
    align-items: center;
    margin:0;
    padding:0;
    height:100%;
  
  }
  
  .nav-logo a {
    display:inline-block;
    width:3em;
    height:3em;
    margin:0;
    text-indent:-9999px;
    overflow:hidden;
    background-repeat: no-repeat;
    background-size: 2em auto;
    background-position:center center;
    background-image:url('images/nav-logo.png');
  }
  
  .nav-toggle {
    display:none;
  }
  
  .nav-toggle-label {
    position:absolute;
    top:0;
    right:0;
    margin:0 .5em 0 0;
    height:100%;
    display:flex;
    align-items:center;
    font-size:2rem;
    color:var(--color-light);
  }
  
  .nav__main {
    position:absolute;
    text-align:right;
    top:100%;
    left:0;
    background-color:var(--color-light-alpha);
    width:100%;
    transform: scale(1, 0);
    transform-origin:top;
    transition: transform 400ms ease-in-out;
  }
  
  .nav__main ul {
    margin:0;
    padding:0;
    list-style:none;
  }
  
  .nav__main li {
    margin:0;
  }
  
  .nav__main a {
    display:block;
    padding:.5em 1em .5em 0;
    text-decoration:none;
    font-size:1rem;
    color:var(--color-dark);
    opacity:0;
    transition:opacity 150ms ease-in-out;
  }
  
  .nav__main a:hover {
    text-decoration:none;
  }
  
  .nav-toggle:checked ~ nav {
    transform: scale(1, 1);
  }
  
  .nav-toggle:checked ~ nav a {
    opacity:1;
    transition:opacity 250ms ease-in-out 250ms;
  }









/*  SECTION STYLES */

section {
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

section h2 {
    margin: 0 0 .5em 0;
    font-size: 2em;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-light);
    text-shadow:2px 2px 10px var(--color-dark);
    text-align: center;
}

section h3 {
    font-size: 1em;
    font-weight: 300;
    text-transform: capitalize;
    text-align: center;
    color: var(--color-light);
}

.button {
    display: block;
    padding: .5em 1em;
    background-color: var(--color-dark-alpha);
    border-radius: .5em;
    text-transform: capitalize;

}

.section__hero {
    height: 90vh;
    color: var(--color-light);
}

.section__hero video {
    display: block;
    width: 100%;
    height:100%;
    object-fit: cover;
}

.section__1 {
    background-image: url(images/section-1.jpg);
    background-position: center center;
    background-size: cover;
}
.section__2 {
    background-image: url(images/section-2.jpg);
    background-position: center center;
    background-size: cover;
}
.section__3 {
    background-image: url(images/section-3.jpg);
    background-position: center center;
    background-size: cover;
}
.section__4 {
    background: linear-gradient(180deg, rgba(0,0,0,1) 40%, var(--color-metaverse) 100%);
    height: fit-content;
    color: var(--color-light);
}

.section__4__intro {
    background-image: url(images/section-4.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 50em;
    padding: 4em 0;
}

.section__4__intro__logo {
  display: block;
  width:30%;
  max-width: 16em;
  margin: 2em auto;
}

.section__4__intro h3 {
  font-size: 1.5em;
  font-weight: 800;
}

.section__4__intro__logos__bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 50em;
  margin: 2em auto;
  padding: 0 2em;
}

.section__4__intro__logos__bottom img {
  display: block;
  height: 3em;
}



.section__4 p {
  padding: 1em 1em 5em 1em;
  max-width: 50ch;
  text-align: center;

}


.section__5 {
    height: fit-content;
    min-height: 60vh;
    padding: 2em 1em;
    background-image: url(images/section-5.jpg);
    background-position: center center;
    background-size: cover;
}
.section__6 {
    height: fit-content;
    padding: 4em 0;
    background-color: var(--color-light);
    text-align: center;

}

.section__6 img {
  width: 50%;
  max-width: 30em;
  margin: 0 0 1em 0;
}



.section__7 {
    background-image: url(images/section-7.jpg);
    background-position: center center;
    background-size: cover;
}
.section__8 {
    background-image: url(images/section-8.jpg);
    background-position: center center;
    background-size: cover;
}
.section__9 {
    background-image: url(images/section-9.jpg);
    background-position: center center;
    background-size: cover;
}


.gallery__photos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2em;
}

.gallery__photos a {
  width: 8em;
  height: 6em;
  border: 1px solid var(--color-light);
  border-radius: .5em;
  overflow: hidden;
}

.gallery__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}



.gallery__metaverse {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2em;
  margin: 0 0 4em 0;
}

.gallery__metaverse div {
  width: 16em;
  border: 1px solid var(--color-light);
  border-radius: .5em;
  overflow: hidden;
  background-color: var(--color-dark);
}

.gallery__metaverse a {
  display: block;
}

.gallery__metaverse img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;

}

.gallery__metaverse h3 {
  padding: .5em;
}




.footer {
    color: var(--color-light);
    height: 50vh;
}





/* [DESKTOP SCREENS] */
@media screen and (min-width: 960px){


    /* [MENU STYLES] */
    
  header {
    text-align:left;
    position:fixed;
    z-index:999;
    padding:.2em;

  }

  .nav-width {
    display:flex;
    max-width:960px;
    margin:0 auto;
    
    align-items: center;


  }

  .nav-logo {
    display:inline-block;
    padding:0;
  }

  .nav-logo a {
    display:block;
    width:auto;
    height:auto;
    margin:0 0em 0 1em;
    padding: .5em;
    font-size: 1rem;
    text-indent:0;
    overflow:hidden;
    background-repeat: no-repeat;
    background-size:2em auto;
    background-position:center;
    background-image:url('images/nav-logo.png');
    color:transparent;
    transform: scale(1);
    transition: transform 50ms ease-in;  
  }



  .nav-logo a:hover {
    background-color: transparent;
    transform: scale(1.01);
  }

  .nav-toggle {
    display:none;
  }

  .nav-toggle-label {
    display:none;
  }


  .nav__main {
    position:relative;
    text-align:left;
    width:100%;
    transform: none;
    background-color: transparent;
  }


  .nav__main ul {
    margin:0;
    padding:0;
    list-style:none;
    display: flex;
    justify-content: flex-end;

  }

  .nav__main li {
    position:relative;
    margin:0 1em 0 1.2em;
  }

  .nav__main a {
    display:block;
    margin:0;
    padding: .5em 0em .5em .5em;
    text-decoration:none;
    font-size:1rem;
    color:var(--color-light);
    opacity:1;
    transform: scale(1);
    transition: transform 50ms ease-in;
  }

  .nav__main a:hover {
    text-decoration:none;
    transform: scale(1.05);
  }
  
}