nav.nav-bar{
  height:64px;
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  padding:8px 64px;
  box-sizing:border-box;
  position:fixed;
  top:0;
  right:0;
  z-index:10;
}

nav.nav-bar > div:last-child{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:16px;
}

nav.nav-bar .menu-list{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:16px;
}

nav.nav-bar .menu-list > li{
  display:inline-block;
}

nav.nav-bar .menu-list > li > a{
  user-select:none;
  display:inline-block;
  text-decoration:none;
  line-height:32px;
  color:var(--c-3);
  padding:0px 10px;
  transition:color 350ms linear;
}

nav.nav-bar .menu-list > li > a:hover{
  color:var(--c-5);
}

nav.nav-bar .menu-list > li > a.active{
  text-decoration:underline 1px var(--c-5);
  text-underline-offset:4px;
}

nav.nav-bar .menu-list > li > a[href="./sign-in"]{
  color:var(--c-5);
  transition:background-color 350ms linear;
}

nav.nav-bar .menu-list > li > a[href="./sign-in"]:hover{
  background-color:var(--c-4);
  border-radius:4px;
}

nav.nav-bar .menu-btn{
  display:none;
  width:48px;
  padding:0;
  font-size:0;
}

section.home{
  height:calc(100vh - 64px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  background-image:url("./imgs/img-1.svg");
  background-position:90% 90%;
  background-size:128px;
  background-repeat:no-repeat;
  padding-top:128px;
}

.tagline{
  margin:0;
}

.tagline > span{
  display:block;
}

.tagline > span:nth-child(1){
  width:16ch;
  font-size:64px;
}

.tagline > span:nth-child(1) > span{
  -webkit-text-fill-color:var(--c-2);
  -webkit-text-stroke:1px var(--c-3);
}

.tagline > span:nth-child(2){
  margin-top:4px;
  font-size:24px;
}

section.home > button{
  margin-top:64px;
  width:calc(8px * 14);
}


.profile-btn{
  --size:32px;
  cursor: pointer;
  height:var(--size);
  width:var(--size);
  padding:0;
  border:1px solid var(--c-3);
  border-radius:50%;
  background-color:var(--c-4);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-sizing:border-box;
}

.profile-btn:hover{
  box-shadow:0 0 0 2px var(--c-1), 0 0 0 3px var(--c-5);
}

.profile-box{
  width:100%;
  height:100vh;
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-color:hsl(0 0% 0% / 24%);
  position:fixed;
  top:0;
  right:0;
  z-index:12;
}

.profile-box.show{
  display:flex;
}

.profile-box > section{
  width:calc(8px * 36);
  padding:16px;
  border-radius:8px;
  border:1px solid var(--c-3);
  background-color:var(--c-1);
  box-sizing:border-box;
  position:relative;
  transform:scale(0);
  animation:popup 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 0ms forwards;
}

.profile-box.show > section{
  animation-name:popup;
  animation-play-state:running;
}

.profile-box > section > div:nth-child(1){
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:16px;
}

.profile-box > section > div:nth-child(1) > span{
  --size:64px;
  flex-shrink:0;
  display:block;
  width:var(--size);
  height:var(--size);
  border:1px solid var(--c-3);
  border-radius:50%;
  background-color:var(--c-4);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-sizing:border-box;
}

.profile-box > section > div:nth-child(1) > div{
  width:100%;
}

.profile-box > section > div:nth-child(1) > div > span{
  display:block;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

.profile-box > section > div:nth-child(1) > div > span:first-child{
  font-size:18px;
  width:16ch;
}

.profile-box > section > div:nth-child(1) > div > span:last-child{
  font-size:12px;
  width:24ch;
}

.profile-box > section > div:nth-child(2){
  margin-top:16px;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:16px;
}

.profile-box > section > div:nth-child(2) > button{
  --height:40px;
}

.profile-box > section > div:nth-child(2) > button:nth-child(1){
  width:100%;
}

.profile-box > section > div:nth-child(2) > button:nth-child(2){
  flex-shrink:0;
  width:40px;
  padding:0;
  font-size:0;
}

.profile-box > section > button{
  --height:24px;
  width:24px;
  padding:0;
  font-size:0;
  position:absolute;
  top:4px;
  right:4px;
}

.profile-box > section > button > span{
  --size:16;
}

@keyframes popup{
  0%{ transform:scale(0); }
  100%{ transform:scale(1); }
}



@media only screen and (max-width:767px) and (orientation:portrait){

  nav.nav-bar{
    padding:8px 16px;
  }

  nav.nav-bar > div:last-child{
    gap:8px;
  }

  nav.nav-bar .menu-list{
    width:100%;
    height:100vh;
    background-color:var(--c-1);
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding:96px 32px 64px 32px;
    box-sizing:border-box;
    position:fixed;
    right:-100%;
    top:0;
    z-index:-1;
    transition:right 500ms linear;
  }

  nav.nav-bar .menu-list.show{
    right:0%;
  }

  nav.nav-bar .menu-list > li{
    width:100%;
  }

  nav.nav-bar .menu-list > li > a{
    width:100%;
    border-bottom:1px solid var(--c-4);
    box-sizing:border-box;
  }

  nav.nav-bar .menu-list > li > a.active{
    text-decoration:none;
    border-bottom-color:var(--c_5);
  }

  nav.nav-bar .menu-list > li:last-child > a{
    border:0;
  }

  nav.nav-bar .menu-btn{
    display:inline;
  }

  section.home{
    background-size:96px;
    background-position:90% 100%;
  }

  .tagline > span:nth-child(1){
    width:12ch;
    font-size:42px;
  }

  .tagline > span:nth-child(1) > span{
    display:block;
  }

  .tagline > span:nth-child(2){
    font-size:18px;
  }

  .profile-btn{
    --size:24px;
  }

}