:root{
    --text-color: #fff;
    --header-z-index: 999;
}
::-webkit-scrollbar{display: none;}
*{list-style: none;text-decoration: none;margin: 0;padding: 0;color: var(--text-color);font-family: 'Mona Sans';}
body,html{height: 100vh;width: 100%;}
header{box-shadow: rgba(144, 144, 144, 0.5) 0 0 10px 10px;position: fixed;z-index: var(--header-z-index);width: 100%;display: flex;justify-content: space-between;height: 64px;align-items: center;background: rgba(144, 144, 144, 0.5);backdrop-filter: blur(3px);}
header h1{margin-left: 25px;}
header nav{margin-right: 50px;}
header nav ul li:last-of-type{margin: 0;}
header nav ul li{margin-right: 15px;}
header nav ul li a{color: var(--text-color);}
.ring_inner{display: flex;justify-content: space-between;}
nav ul{display: flex;}
ul li img{height: 96px;margin-left: 30px;margin-right: 30px;filter: grayscale(1);}
main{height: 100vh;width: 100vw;}
main h2,h3{position: relative;top: 50%;transform: translateY(-50%);margin-left: 100px;}
main h2{font-size: 48px;}
main .ring{position: relative;top: 85%;transform: translateY(-50%);}
main #grid{position: absolute;width:100%;height:100%;background:black;z-index: 0;}
section{width: 100vw;height: 100vh;background-color: #000;}
.section-1 h3{position: relative;top: 50%;transform: translateY(-50%);color: var(--text-color);font-size: 32px;z-index: 2;}
.section-1 img{position: absolute;z-index: 0;}
.section-1 iframe{float: right;margin-right: 100px;width: 50%;height: 85%;position: relative;top: 50px;border: none;z-index: 2;}
canvas{display:block;position: absolute;top: 100vh;z-index: 1;}

footer {
  width: 100%;
  text-align: center;
  padding: 12px 0;
  background: rgba(0, 0, 0, 0.6);
  color: #ccc;
  font-size: 14px;
  backdrop-filter: blur(4px);
}

@media (max-width: 960px) {
  header {
    position: fixed;
    height: 64px;
  }
  header h1 {
    font-size: 20px;
  }
  header nav ul li {
    margin-left: 12px;
  }
  main h2 {
    font-size: 36px;
    margin-left: 48px;
  }
  main h3 {
    margin-left: 48px;
    font-size: 20px;
  }
  footer {
    font-size: 13px;
    padding: 10px 0;
  }
}

@media (max-width: 600px) {
  header {
    position: static;
    height: auto;
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  header nav ul li {
    margin-left: 10px;
  }
  main {
    height: auto;
    min-height: 100vh;
  }
  main h2, main h3 {
    position: static;
    transform: none;
    margin-left: 20px;
    margin-top: 20px;
  }
  main h2 {
    font-size: 28px;
  }
  main h3 {
    font-size: 18px;
  }
  footer {
    position: static;
    padding: 14px 0 24px;
  }
}