@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500&family=Prata&display=swap');

:root{
  --red:#9e0303;
  --beige:#ebe9eb;
}

body{
  margin: 0;
  font-family: "Prata", serif;
  color: var(--beige);
  background-color: var(--beige);
}

html::-webkit-scrollbar{
  display: none;
}

nav{
position: fixed;
z-index: 999;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 30px;
margin-left: 5vw;
}

nav[data-theme='dark'] li{ color:var(--red); }


#logoCircuit{
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-right: 30px;
}

nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li{
  display: flex;
  align-items: center;
  flex-direction: column;
  float: left;
  margin: 0 20px;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  font-weight: normal;
  position: relative;
}

nav li::before{
  content: '';
  position: absolute;
  display:block;
  top: 110%;
  width: 0%;
  height: 1px;
  background-color:var(--red);
  transition: width 0.3s ease;
}

nav li:hover::before{
  width: 100%;
}

h1{ font-size: 3em; font-weight: normal;}
h3{ font-size: 1.4em; font-weight: normal;}


header{
  width: 100%;
  height: 110vh;
  display: block;
}

#textArea{
  position: absolute;
  z-index: 3;
  user-select: none;
  box-sizing: border-box;
  padding-left: 5vw;
  padding-top:15%;
  width: 40%;
  transition: opacity 0.2s ease, transform 0.3s ease;
}

#textArea h1:first-of-type{ color:var(--red); }
#textArea h1{ margin: 0; }
#textArea h3{ margin-top: 10%; }

#container{
  overflow-x: hidden;
  position: relative;
  width: 100%;
  height: 150%;
}

#container canvas{
  position: absolute;
  top: 0;
  left: 0%;
  z-index: 4;
}

#tap{
  color: white;
  position: absolute;
  width: 100%;
  height: 100vh;
  opacity: 0.8;
  text-shadow: 0 0 11px black;
  z-index: 8;
  align-items: center;
  justify-content: center;
  display: none;
  font-family: 'Barlow', sans-serif;
  transition: opacity 0.3s ease;
  background: transparent;
  border:none;
}

#tap::before{
  content: '';
  width: 100vw;
  height: 100vw;
  display: block;
  border-radius: 100%;
  border: solid 1px var(--red);
  position: absolute;
  transform: scale(0);
  animation-name: tapWave;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes tapWave {
  from{ opacity: 1; transform: scale(0); }
  to{ opacity: 0.4; transform: scale(2.5); }
}

/*Mobile*/
@media screen and (max-width: 400px) {

  nav{ display: none; }
  #tap{ display: flex; }
  #textArea{
    width: 100%;
    padding-top: 15%;
    font-size: 58.9%;
  }
}