@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400&family=Pathway+Gothic+One&family=Ubuntu:wght@300;400&display=swap');
*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body{
  background: #242132;
  overscroll-behavior-y: contain;
}
@media(min-width: 200px){
  .unavailable{
    display: none;
  }
}
@media(min-width: 320px) and (max-width: 480px){
  .unavailable{
    display: none;
  }
}
@media(min-width: 480px) and (max-width: 768px){
  body{
    display: block;
  }
  .unavailable{
    display: none;
  }
}
@media(min-width: 769px) and (max-width: 1800px){
  .visible{
    display: none;
  }
  .unavailable{
    margin: 5rem;
    display: block;
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
  }
  .un-heading{
    text-align: center;
    font-size: 2rem;
  }
  .oth-info{
    font-size: 1.500rem;
    font-style: italic;
    font-weight: 300;
    text-align: center;
  }
  .oth-info a{
    color: #F64081;
    font-weight: bold;
  }
}
header{
  height: 42px;
  width: 100%;
  background: rgba( 24, 25, 26, 0.2 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 12px );
  -webkit-backdrop-filter: blur( 12px );
  border-radius: 0 0 20px 20px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  overflow-x: hidden;
  overflow-y: scroll;
  transition: all 300ms;
}
header.open{
  height: 21rem;
}
.header.pop{
  height: 26rem;
}
.logo{
  margin: 0 0 1rem 1.25rem;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size:  2rem;
  text-decoration: none;
  color: #FEFCFF;
}
.hamburger{
 float: right;
 margin: .9rem 1.25rem 0 0 ;
}
#bar{
 display: block;
 height: 2px;
 width: 28px;
 margin: 3px;
 border-radius: 2px;
 background-color: #F64081;
 transition: 300ms ease-in-out;
 transform-origin: 11px 1px;
}
.hamburger.active :nth-child(1){
 transform: rotate(45deg);
}
.hamburger.active :nth-child(2){
 transform: rotate(-45deg);
}
.nav-items{
  display: flex;
  margin: 0 0 0 1.5rem;
  flex-direction: column;
  font-family: 'Oxygen', sans-serif;
  font-size: 1rem;
}
.nav-items a{
  margin: 1.1rem;
  padding: .3rem;
  text-decoration: none;
  color: #FFFFFF;
  border-bottom: 1px solid #616161;
}
.sub-btn{
  margin: 1.1rem;
  padding: .3rem;
  color: #FFFFFF;
  border-bottom: 1px solid #616161;
}
.sub-menu{
  display: none;
  font-size: 1rem;
  list-style: none;
  border-left: 2px solid #F64081;
  transition: transform 5s ease-in-out;
}
.sub-menu.show{
  display: block;
}
.nav-items ul li a{
  padding: 1rem;
  text-decoration: none;
  color: #FFFFFF;
  line-height: 1.8rem;
  border: none;
  transition: transform 5s ease-out;
}
.wrights{
  display: block;
  padding: .5rem; 
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #fff;
  text-align: center;
}
/* Main Tool Codes*/
.qr-content{
 color: white;
}
.stxt{
 display: block;
 font-family: 'Ubuntu', sans-serif;
}
.heading{
 display: block;
 font-family: 'Ubuntu', sans-serif;
 font-size: 14px;
}
#split1{
 margin: 1rem 0 0 1rem;
 float: left;
 font-size: 2.2rem;
}
#split2{
 margin: 1rem 30rem 0 2rem;
 font-size: 2.2rem;
}
.contentwrap{
  margin: .5rem;
  backdrop-filter: blur(0px);
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0px 35px 68px 0px rgba(145, 192, 255, 0.5), inset 0px -5px 16px 0px rgba(145, 192, 255, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255); height: 240px; font-family: 'Oxygen', sans-serif; font-weight: 400; font-size: 16px;}
.heading{font-size: 20px; text-align: center; padding-top: 1rem;}
.quote{margin-top: 1rem; padding: 0 1rem 0 1rem; display: flex; justify-content: center; line-height: 1.35rem;}.lefquote{float: right; transform: rotate(180deg); margin-top: 1rem;}
.author{font-family: none; font-size: 15px; font-style: italic; float: right; margin-top: 2.2rem;}
.line{display: block; border-top: 1px solid #ccc;}
.qBtn{float: right; position: relative; bottom: 1rem; right: 2rem;}
.qbtn{font-family: inherit; font-size: 18px; background: linear-gradient(to bottom, #4dc7d9 10%,#66a6ff 100%); color: white; padding: 0.8em 1.2em; display: flex; align-items: center; justify-content: center; border: none; border-radius: 25px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); transition: all 0.3s;}
.qbtn:hover {transform: translateY(-3px); box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);}
.qbtn:active{transform: scale(0.95); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);}
.qbtn span{display: block; margin-left: 0.4em; transition: all 0.3s;}
.container{position: relative; top: 4rem; right: 4.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #FEFCFF; width: 200px; height: 50px; transform: rotate(90deg); border-radius: 80px;}
.container button{outline: none; border: none;}
.container svg{transform: rotate(-90deg);}
.container button:nth-of-type(1){-webkit-transition-delay: 1.1s; transition-delay: 1.1s; color: #4267B2;}
.container button:nth-of-type(2){-webkit-transition-delay: .9s; transition-delay: .9s; color: #1D9BF0;}
.container button:nth-of-type(3){-webkit-transition-delay: .7s; transition-delay: .7s; color: #4ac959;}
.container button:nth-of-type(4){-webkit-transition-delay: .7s; transition-delay: .7s; color: #0088cc;}
.container button:nth-of-type(5){-webkit-transition-delay: .7s; transition-delay: .7s; color: #FF4301;}
.typed-cursor{color: #4dc7d9;}