* {
  box-sizing: border-box;
}

@font-face {
  font-family: Eklys;
  src: url("src/Fonts/Eklys_v5.ttf") format("truetype");
}

html,
body {
  /*background-image: url("src/bg/lpspace.jpg");*/
  background-color: black;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  margin: 0%;
  overflow: hidden;
  /*overflow-x: hidden;*/
  font-family: Eklys;
  font-weight: 500;
  margin-top: 0px;
}

.site {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}

h2 {
  font-size: 15vw;
  font-weight: 500;
  margin-bottom: 0px;
  margin-top: 5vw;
}
header {
  font-size: 40px;
}
.footer {
  background-color: black;
  color: aliceblue;
  text-align: center;
  font-size: 2vw;
  width: 100%;
  margin-bottom: 0.5vw;
}

label {
  color: aliceblue;
  font-size: 5vw;
}

/*Navigation Bar*/
nav {
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #63c9c8;
  position: relative;
  height: 70px;
  z-index: 5;
}

.logo {
  color: #fff;
}

.logo a {
  text-decoration: none;
  color: #fff;
}

h2 a {
  text-decoration: none;
  color: #fff;
  pointer-events: none;
}

nav ul {
  display: flex;
  gap: 30px;
}

nav ul li {
  list-style-type: none;
  align-items: center;
  font-size: 5vw;
  margin-top: -2.5vw;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
}

.menu-icon {
  display: none;
}

.menu-icon img {
  height: 50px;
  width: 50px;
}

nav :hover {
  color: #4d3157;
}

/*Countdown*/
.timer {
  height: 51vh;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  color: white;
  margin-top: 7vw;
  z-index: 5;
}

.timebox {
  display: flex;
  gap: 50px;
}

.time {
  text-align: center;
  font-size: 5vw;
  margin: 0%;
}

.time h3 {
  font-size: 15vw;
  font-weight: 500;
  margin: 0px;
  margin-top: -15px;
}

.time p {
  font-size: 5vw;
  font-weight: 500;
  margin: 0px;
  margin-top: -15px;
  padding-bottom: 45%;
}

.noise {
  position: absolute;
  inset: -200%;
  background-image: url(src/img/noise.png);
  opacity: 10%;
  animation: shift 0.1s linear infinite both;
  z-index: 10;
  pointer-events: none;
}

@keyframes shift {
  0% {
    transform: translateX(10%) translateY(10%);
  }
  100% {
    transform: translateX(-10%) translateY(-10%);
  }
}