@charset "utf-8";
@font-face {
  font-family:"OpenDyslexic";
  src:url("./fonts/OpenDyslexic-Regular.woff2") format("woff2"),url("./fonts/OpenDyslexic-Regular.woff") format("woff"),url("./fonts/OpenDyslexic-Regular.otf") format("opentype");
  }

  :root {
  --orange: #d28d4b;
  --yellow: #ffd770;
  --light-green: #9bb082;
  --middle-green: #4b6c64;
  --darkgreen: #2c3a37;
}

body, html {
  height: 100%;
}

.background {
  background-image: url("img/landing-bg.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (min-width: 605px) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10%;
  }
  
  .box {
    width: 500px;
    height: 500px;
    border: 2px solid var(--middle-green);
    border-radius: 5px;
    background-color: var(--orange);
    padding: 30px;
    align: center;
  }

  .logo {
    margin: auto;
    width: 500px;
    height: 258px;
    background-image: url("img/wild-logo-long.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  h1 {
    font-family: OpenDyslexic, Verdana, Geneva, Tahoma, sans-serif;
    color: var(--darkgreen);
    font-size: 2rem;
    margin-top: 25px;
    text-transform: uppercase;
    text-align: center;
  }

  h2 {
    font-family: OpenDyslexic, Verdana, Geneva, Tahoma, sans-serif;
    color: var(--darkgreen);
    font-size: 1.5rem;
    margin-top: 25px;
  }
}

@media only screen and (max-width: 600px) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1%;
  }

  .box {
    width: 200px;
    height: 200px;
    border: 1px solid var(--middle-green);
    border-radius: 3px;
    background-color: var(--orange);
    padding: 20px;
    align: center;
  }

  .logo {
    margin: auto;
    width: 200px;
    height: 103px;
    background-image: url("img/wild-logo-long.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  h1 {
    font-family: OpenDyslexic, Verdana, Geneva, Tahoma, sans-serif;
    color: var(--darkgreen);
    font-size: 1rem;
    margin-top: 10px;
    text-transform: uppercase;
    text-align: center;
  }

  h2 {
    font-family: OpenDyslexic, Verdana, Geneva, Tahoma, sans-serif;
    color: var(--darkgreen);
    font-size: .5rem;
    margin-top: 10px;
  }
}