:root {
  --text-color: white;
  --other-color: red;
}

body {
  background-color: red;
  color: white;
}

#maple-leaf {
  width: 30px;
  stroke-width: 14px;
  margin-top: 10px;
  margin-right: 5px;
  position: relative;
  top: 10px;
}

.cls-1 {
  fill: none;
  stroke: white;
  stroke-miterlimit: 56;
  stroke-width: 16px;
}

.fill {
  fill: white;
}

#wordofdaycontainer {
  margin-left: 8px;
}

.extraspace {
  margin-left: 0px;
  margin-right: 0px;
  padding-bottom: 3px;
  text-decoration: underline;
}

.extraspace:hover {
  opacity: 0.7;
}

.big-title {
  font-size: 100px;
  line-height: 100px;
  margin-top: 200px;
  top: -80px;
  position: absolute;
}

#caret {
  display: none;
  /* transition: ease 1s; */
}

.description-container {
  position: relative;
  /* margin-top: 340px; */
  top: 340px;
  margin-left: 4px;
  /* transition: ease 3s; */
}

@media (min-width: 500px) {
  .big-title {
    font-size: 120px;
    line-height: 120px;
    /* margin-top: 120px; */
  }

  .description-container {
    top: 380px;
    /* bottom: 0px; */
    /* bottom: -2080px; */
    /* transition: ease 3s; */
  }
}

@media (min-width: 700px) {
  #wordofdaycontainer {
    margin-left: 12px;
  }

  .big-title {
    font-size: 140px;
    line-height: 140px;
    margin-top: 230px;
  }

  .description-container {
    margin-top: 90px;
    /* bottom: -1000px; */
    /* transition: ease 3s; */
  }

  .description {
    margin-left: 44px;
  }
}

@media (min-width: 1200px) {
  .big-title {
    font-size: 280px;
    line-height: 280px;
    margin-top: 140px;
    top: 0px;
    transition: ease 1s;
  }

  .small-title {
    font-size: 155px;
    line-height: 155px;
    margin-top: 130px;
    position: fixed;
    transition: ease 1s;
  }

  #caret {
    width: 70px;
    height: 70px;
    display: flex;
    fill: white;
    /* position: relative;
    bottom: -660px; */
    position: absolute;
    bottom: 0px;
    left: calc(50% - 35px);

    justify-content: center;
    transition: ease 1s;
  }

  .description-container {
    position: absolute;
    margin-top: 320px;
    /* margin-top: 0px; */
    /* margin-top: 750px; */
    /* bottom: 100px; */
    padding-bottom: 30px;
  }
}

@media (min-width: 1100px) {
  p {
    max-width: 43ch;
  }
}