/*import fonts*/
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

body {
    font-family: 'JetBrains Mono';
    font-size: 20px;
    color: black;
    background: white;
    transition: background .5s, .5s;
}

body.dark {
   color: white;
   background: #032326; 
   transition: background .5s, color .5s;
}
/* css for darkmode switch */

.switch {
  position: relative;
  display: inline-block;
  top: -6vh;
  left: 4%;
  width: 60px;
  height: 34px;
  z-index: 1000;
}


.switch input {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  width: 60px;
  height: 34px;
}


.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;

}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.darkmodetext {
  margin: 0;
  display: inline-block;
  position: relative;
  top: -6.4vh;
  left: 32vh;
  white-space: nowrap;
  overflow: hidden;
}

.rounded {
  border: 3px solid;
  border-radius: 5px;
  position: relative;
  top: -50;
}

.buttons {
  border-radius: 5px;
  padding: 10px;
  font-size: 20px;
  color: #032326;
  border: none;
  transition: background-color .3s, border .3s;
  position: relative;
  top: -135;
  left: 34%;
  z-index: 1000;
}

.buttons:hover {
  background-color:#2196F3;
  border: 1px, solid white;
  color: #032326;
  transition: background-color .3s, border .3s;
}

nav {
  padding: 1rem;
  position:relative;
  bottom: 223px;
  z-index: 1002;
}

.hamburger-menu {
  height: 50px;
  width: 50px;
  position: relative;
  cursor: pointer;
  padding: 1rem;
  z-index: 1002;

}


.ham-bar {
  width: 70%;
  height: 4px;
  background-color: white;
  border-radius: 25px;
  position: absolute;
  top: 3.5vh;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .6s, opacity .8s, top .6s;
  z-index: 1002;
}

.bar-top {
  top: 2vh;
  z-index: 1002;
}

.bar-bottom {
  top: 5.2vh;
  z-index: 1002;
}

.hamburger-menu.active .bar-top {
  transform: translate(-50%, -50%) rotate(-315deg);
  top: 50%;
  z-index: 1002;

}

.hamburger-menu.active .bar-mid {
  opacity: 0;
  z-index; 1002;
}

.hamburger-menu.active .bar-bottom {
  transform: translate(-50%, -50%) rotate(-225deg);
  top: 50%;
  z-index: 1002;
}

.off-screen-menu {
  position:fixed;
  top: 0;
  left: -80%;
  background-color: #032326;
  border:3px solid #2196F3;
  border-top: none;
  height: 100vh;
  width: 75vw;
  transition: left .5s;
  z-index: 1002;
}

.off-screen-menu.active {
  left: -60%;
}

h1 {
  position: relative;
  top: 0.3%vh;
}