/*
ROOT STYLESHEET
*/

/*Define Font Families*/

@font-face {
  font-family: "Chopsic";
  src: url("../assets/fonts/Chopsic-K6Dp.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  color: white;
}

/*Font Styles*/

html {
  margin: 3vw;
  background-color: #000000;
  background-image: url("../assets/img/kai-pilger-space-unsplash-darkened.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

body {
  padding: 2rem;
  border-radius: 3em;
  transition: 100ms ease-in-out;
}

body.light {
  background-color: white;
  color: black;
  stroke: black;
  box-shadow: 0px 0px 10px black;
}

body.dark {
  background-color: black;
  color: white;
  stroke: white;
  box-shadow: 0px 0px 10px white;
}

h2 {
  font-family: "Chopsic";
  font-weight: normal;
  font-size: 3rem;
}

.center-text {
  text-align: center;
}

.title {
  font-family: "Chopsic";
  color: white;
  background-color: black;
  font-size: clamp(50px, 4vw, 100px);
  text-align: center;
  padding-left: 10px;
  padding-right: 15px;
  border-radius: 1em;
  box-shadow: 10px 10px 15px 0px gray;
  min-height: 50px;
}

.info {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  line-height: 125%;
  font-size: clamp(16px, 1.5vw, 100px);
  color: inherit;
}

.tab {
  text-indent: 2em;
}

/*Button Styles*/

.clicker {
  cursor: pointer;
  color: black;
  font-weight: bold;
  background-color: #f9f9f9;
  padding: 10px;
  height: 40px;
  border-style: hidden;
  border-radius: .5em;
  transition: 250ms;
  box-shadow: 0px 0px 10px #f9f9f9;
}

.clicker:hover {
  background: #131313;
  color: #09f;
  text-shadow: 0px 0px 10px #09f;
  box-shadow: 0px 0px 10px #09f;
}

.datebox {
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px;
  gap: 20px;
  height: auto;
  border-radius: 7px;
  background-color: rgba(255,255,255,1);
  box-shadow: 0px 0px 10px #f9f9f9;
}

.datebox input {
  padding: 5px;
  border-radius: 5px;
  border: 0px;
}

/*Navigation and Theme CSS*/
.navbar,
.theme-toggle {
  position: fixed;
  margin: 1rem;
  overflow: hidden;
  background-color: inherit;
  border-radius: 10em;
  box-shadow: inherit;
  z-index: 200;
}

.navbar {
  top: 0;
  left: 0;
  width: 46px;
  transition: width .75s ease-in-out, max-width .75s ease-in-out,
    background-color 0s ease-in-out;
}

.theme-toggle {
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  padding: 10px;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  cursor: pointer;
}

.sun,
.moon {
  stroke: none;
}

.sun {
  position: absolute;
  width: 26px;
  height: 26px;
  fill: #ff9900;
  transition: 1s;
}

.moon {
  fill: #ff9900;
  transition: 1s;
}

.navbar.menu-active {
  background-color: inherit;
  border-radius: 10em;
}

.hamburger {
  position: absolute;
  background-color: inherit;
  width: 47px;
  border-radius: 10em;
  cursor: pointer;
  z-index: 202;

  /*Ham to Arrow transition stuff*/
  -webkit-tap-highlight-color: transparent;
  transition: 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hamRotate.active {
  transform: rotate(45deg);
}

.hamRotate180.active {
  transform: rotate(180deg);
}

.line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: inherit;
  stroke-width: 5.5;
  stroke-linecap: round;
}
.ham .top {
  stroke-dasharray: 40 82;
}

.ham .bottom {
  stroke-dasharray: 40 82;
}

.ham.active .top {
  stroke-dasharray: 14 82;
  stroke-dashoffset: -72px;
}

.ham.active .bottom {
  stroke-dasharray: 14 82;
  stroke-dashoffset: -72px;
}

.hamburger:hover {
  cursor: pointer;
  filter: invert(100);
}

.menu {
  display: flex;
  list-style: none;
  text-wrap: nowrap;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  gap: 1rem;
  margin: 14px;
  margin-left: 60px;
  padding: 0;
  z-index: 201;
}

.menu li a {
  color: inherit;
  text-decoration: none;
}

.menu li a:hover {
  color: #00bcd4;
}

.menu.active {
  visibility: visible;
}

.spin {
  animation: spin 0.5s ease-in-out;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 800px) {
  
  h2 {
    font-size: 2rem;
  }
  .title {
    font-size: clamp(30px, 3vw, 100px);
    min-height: 0px;
  }
}