:root{
  --pos:hsl(0 0 100%);
  --neg:hsl(240 20% 10%);
  --primary:hsl(240, 100%, 90%);
  --primary:hsl(25, 100%, 60%);
  --secondary:hsla(0, 0%, 100%, 2%);
}

*{
  box-sizing:border-box;
}

html{
  background-color:var(--neg);
  color:var(--pos);
  font:inherit;
  font-family:"DM Sans", sans-serif;
  scroll-behavior:smooth;
  scroll-padding-top:95px;
}

body{
  margin:unset;
}

header h1{
  text-align:center;
  font-size:200%;
  text-shadow:0 0 10px hsl(200 60% 50%);
  margin:0;
}

header h1 .slogan{
  display:block;
  font-size:40%;
  text-shadow:none;
  font-family:"Gochi Hand";
  font-weight:normal;
  line-height:1;
  margin-top:-.3rem;
  color:var(--primary);
}

header{
  display:flex;
  justify-content:space-evenly;
  align-items:center;
  background-color:var(--neg);
  position:sticky;
  top:0;
  z-index:10;
}

header nav{
  display:flex;
  list-style:none;
  gap:3rem;
}

header nav a{
  color:var(--pos);
  font-size:150%;
  text-decoration:none;
  padding-block:.3rem;
  border-bottom:3px solid transparent;
  transition:border-color 250ms ease;
}

header nav a:hover{
  border-color:var(--pos);
}

header .logo{
  padding-block:1rem;
  user-select:none;
  display:flex;
  align-items:center;
}

header .logo img{
  height:3rem;
  transform:translateY(.2rem);
  padding-right:.2rem;
}

main{
  padding-block:2rem;
}

section > .wrapper{
  margin-inline:auto;
  max-width:1000px;
  padding-inline:2rem;
  padding-block:5rem;
}

section.hero{
  text-align:center;
  animation:fadeIn 2s ease;
  animation-delay:100ms;
  animation-fill-mode:forwards;
  opacity:0;
}

section.hero > .wrapper{
  padding-block:0;
}

@keyframes fadeIn{
  100%{
    opacity:1;
  }
}

img{
  max-width:100%;
}

section.side-by-side > .wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:1rem;
}

@media (width < 768px){
  header .nav{
    display:none;
  }
  section.side-by-side > .wrapper{
    grid-template-columns:1fr;
  }
}

section h2{
  font-size:300%;
}

section.usp h3{
  margin-top:0;
  margin-bottom:1rem;
  line-height:1;
}

section.usp p{
  margin:0;
}

section.usp .point{
  padding-block:1rem;
  border-bottom:1px solid hsla(0, 0%, 100%, 15%);
}

section.usp .point:last-of-type{
  border:0;
}

section .buttons{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.button{
  --offset:.2rem;
  display:inline-block;
  padding:.5rem 2rem;
  background-color:var(--pos);
  font-size:125%;
  text-align:center;
  text-decoration:none;
  color:var(--neg);
  border-radius:.3em;
  border:2px solid var(--pos);
  transition:all 250ms ease;
  box-shadow: 0 0 0 var(--pos);
}

.button:hover{
  background-color:transparent;
  color:var(--pos);
  transform:translateY(calc(-1 * var(--offset)));
  box-shadow:0 var(--offset) 0 var(--pos);
}

h2{
  margin:0;
  margin-bottom:2rem;
}

footer{
  padding-block:2rem;
  text-align:center;
  font-size:smaller;
}

section.secondary{
  background:var(--secondary);
}

section p.large{
  font-size:x-large;
}

section.center{
  text-align:center;
}

section.hero h1{
  font-size:150%;
}

h3{
  margin-top:0;
  margin-bottom:3rem;
}

.hidden{
  display:none;
}