:root{
  --text:#4B3935;
  --text1: #f0e7d5;
  --text2: #212842;
  --bg:#f0e7d5;
  --accent1:#7a8450;
  --accent2:#ff0000;

}

body{
  margin:0;
  background-color:var(--bg);
  color:var(--text);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  min-height:100vh;
  text-align:center;
}

.nothing{
    font-family: "Foldit";
    font-size: 3rem;
    border:2px solid var(--text);
    color:white;
}

.left{
    font-family: "Major Mono Display";
    font-size: 3rem;
    background-color:var(--accent1);
    color: #f0e7d5;
}

.inside {
    font-family: "Knewave";
    font-size: 3rem;
    color:var(--text2);
    border:2px solid var(--text);
}

.panic {
    font-family: "rubik glitch";
    font-size: 3rem;
    color:var(--text1);
    background-color:var(--accent2);
}

.started {
    font-family: "Lexend Exa";
    font-size: 3rem;
    color:var(--text1);
    background-color:var(--text);
}

.sentence{
  font-family:"Open Sans";
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  padding:2rem;
}

h1{
  font-family:"Candal";
  font-size:5rem;
  line-height:1;
  margin:0;
}

p{
  font-size:2rem;
  max-width:30rem;
  margin:0;
}

a{
  display:inline-block;

  font-size:1.5rem;
  text-decoration:none;

  border-radius:.75rem;

  padding:1rem 2.5rem;

  font-weight:bold;
  color:var(--text);

  margin-top:1rem;
}

.nothing:hover{
  transform: scale(0.5);
  opacity: 0.2;
  transition: all .4s ease;
}

.left:hover{
  transform: translateX(-100px);
  transition: transform .4s ease;
}

.inside:hover{
  transform: rotateY(180deg);
  transition: transform .5s ease;
}

.panic:hover{
  animation: shake .3s infinite;
}

@keyframes shake{
  0%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  50%{transform:translateX(5px);}
  75%{transform:translateX(-5px);}
  100%{transform:translateX(0);}
}

.started:hover{
  transform: translateY(-100px);
  transition: transform .5s ease;
}

.nothing{
  transition: all .4s ease;
}


@media (min-width:600px){

  h1{
    font-size:7rem;
  }
  p{
    font-size:2.25rem;
  }
  a{
    font-size:1.75rem;
    padding:1.2rem 3rem;
  }
}

@media screen and (min-width: 850px){
  h1{
    font-size:9rem;
  }
  p{
    font-size:2.5rem;
    max-width:40rem;
  }
  a{
    font-size:2rem;
  }
}