.nav-bar {
  height: 8dvh;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* border: 2px solid gold; */
  position: fixed;
  top: 0;
  z-index: 999;
  transition:
    top 0.3s,
    box-shadow 0.3s;
  box-shadow: none;
  background-color: #0b0e22f6;
  padding-top: 10px;
}

.sub-cnt {
  height: inherit;
  width: 50%;
}

.sub-cnt-1 {
  display: flex;
  flex-direction: column;
  padding-left: 0dvw;
  justify-content: center;
  padding-left: 0dvw;
}

.sub-cnt-2 {
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
}

.nav-bar.shadow {
  box-shadow: 0px 2px 10px #435680;
}

.logo {
  width: 5dvh;
  height: 5dvh;
  object-fit: contain;
  margin-left: 2dvw;
  cursor: pointer;

  transition: transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.nav {
  font-size: larger;
  font-family: var(--font-sans);
  margin-right: 2dvw;
  transition: 0.2s ease-in-out;
}

.TOS {
  border: 2px solid #77d4e4;
  margin-right: 5dvw;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 10px;
}

.nav:hover {
  font-size: 3vh;
  color: #73f5ed !important;
}

.logo:hover {
  transform: rotate(360deg);
}