/* drawer styling */
nav.drawer{
  position: relative;
}
.nav-links{
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  
/*  hide it  */
  transform: translate(100vw, 0);
  
  box-sizing: border-box;
  pointer-events: none;
  padding-top: 125px;
/*  on mobile center align  */
  text-align: center;
  
/*  smooth transition animation  */
  transition: width 475ms ease-out, transform 450ms ease, border-radius 0.8s 0.1s ease;
  
  background: rgba(40,40,40, 0.75);
}
/* for desktops */
@media (min-width: 768px) {
  .nav-links {
    width: 250px;
    text-align: right;
  }
  .nav-links li{
    padding: 0.5rem;
  }
}

.nav-links li{
/* hide links */
  transform: translatex(100vw);
}
.nav-links li:last-child {
  margin-bottom: 2em;
}

/* label for checkbox (menu-toggle) */
.menu-bars{
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  position: absolute;
  right: 1rem;
  top: 0;
}
/* hide checkbox */
input.menu-toggle{
  display: none;
}
/* on checkbox checked show links */
input.menu-toggle:checked ~ .nav-links {
  transform: translatex(0);
  border-bottom-left-radius: 0;
}
input.menu-toggle:checked ~ .nav-links li {
  transform: translatex(0);
  transition: transform 1s 0.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

/* navbar styles  */
.navbar{
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}

.drawer ul li a{
  cursor: pointer;
  pointer-events:auto;
  color: wheat;
  text-decoration:none;
  font-size: 1.25rem;
  display: block;
  padding: 10px !important;
}
.drawer ul li a:hover{
  background: rgba(33,33,33, 0.25);
}
ul{
  list-style:none;
  padding: 0;
}

/* other styles */
.br{
  border: 1px dashed white;
}
h2{
  font-family: 'Pacifico', sans-serif;
  color: snow;
  font-weight:400;
  font-size: 2rem;
}
.content{
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  flex-grow:1;
}
p{
  margin:1rem;
}
/* just some base styling  */
*{
  margin: 0;
  padding: 0;
}
div.main{
  height: 100vh;
  width: 100vw;
  display:flex;
  flex-direction:column;
  color: #ccc;
/*   background: #222; */
  background-image: radial-gradient(circle at 70% 18%, hsla(126,0%,77%,0.05) 0%, hsla(126,0%,77%,0.05) 41%,transparent 41%, transparent 100%),radial-gradient(circle at 6% 94%, hsla(126,0%,77%,0.05) 0%, hsla(126,0%,77%,0.05) 52%,transparent 52%, transparent 100%),radial-gradient(circle at 93% 63%, hsla(126,0%,77%,0.05) 0%, hsla(126,0%,77%,0.05) 85%,transparent 85%, transparent 100%),radial-gradient(circle at 5% 85%, hsla(126,0%,77%,0.05) 0%, hsla(126,0%,77%,0.05) 8%,transparent 8%, transparent 100%),radial-gradient(circle at 49% 93%, hsla(126,0%,77%,0.05) 0%, hsla(126,0%,77%,0.05) 37%,transparent 37%, transparent 100%),linear-gradient(45deg, rgb(15, 5, 113),rgb(191, 90, 222));
}