@font-face {
  font-family: 'Rubik';
  src: url('Rubik/Rubik-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Rubik Italic';
  src: url('Rubik/Rubik-Italic-VariableFont_wght.ttf') format('truetype');
}

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;
}

.logo {
  font-size: 25px;
  font-weight: 100;
  color: rgb(252, 164, 164);
}

.nav-container {
  top: 0;
  height: 50px;
  background-color:transparent;
  width: 100%;
  position: fixed;
  z-index:1;
  animation: wipe-in-up 1s ease-in;

}

.nav-items {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  z-index: 1;
}

.right-nav-items {
  height: 20px;
  font-size: 20px;
  font-weight: 200;

}

.right-nav-items a{
  margin-right: 20px;
  color: rgb(252, 164, 164);
  text-decoration: none;
  transition: color 0.5s;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.5s;

}

.right-nav-items :hover {
  border-bottom: 1px solid rgb(134, 199, 255);
  transition: 0.8s;
}

.right-nav-items a:hover {
  color: rgb(134, 199, 255);
  transition: 0.8s;
}


@media (max-width: 768px) {
  .logo {
    display: none;
  }

  .right-nav-items{
    display: flex;
    justify-content: center;
  }
}


@keyframes wipe-in-up {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

[transition-style="in:wipe:up"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-up both;
}

@keyframes wipe-left-right {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }

}

[transition-style="left:wipe:right"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-left-right both;
}