:root {
  --pd: clamp(20px, 1vw, 50px);
  --p2: calc(var(--pd) * 2);
  --sd: calc(320px + var(--p2));
}

@font-face {
    font-family: "LexendLight";
    src: url(Lexend-Light.ttf);
  }

body{
    padding-bottom: 50px;
    background-color: hsl(201 31% 94.5%);
    text-align: center;
    font-family: "LexendLight";
}

p{
  text-align: left;
}

a {
  text-decoration: none;
  color: inherit;
}

h1:first-of-type {
  text-align: center;
  margin-bottom: 2rem;
}


.content{
  display: block;
  width: 60%;
  margin: auto;
  margin-top: 100px;
  text-align: left;
  font-size: 20px;
  color: black;
}

.content-text-box {
  width: 65%;
  display: block;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
.text-based-content-frame {
  max-width: 80%;
  text-align: left;
  margin: auto;
}

.text-based-content-img {
  width: 80%;
  padding: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin: 2rem auto 2rem auto;
}
.icon {
  width: 10%;
}

.topnav {
    background-color: #333;
    overflow: hidden;
    width:100vw;
    margin:-8px;
    margin-bottom: 20px;
  }

  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    width: 10vw;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 0px;
    text-decoration: none;
    font-size: 17px;
  }

  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

@media only screen and (max-width: 600px) {
  .content{
    display: block;
    width: 80%;
    margin: auto;
    text-align: left;
    font-size: 20px;
    color: black;
  }

  .content-text-box {
    width: 100%;
    display: block;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  img {
      display: inline;
      margin: 0 auto;
      width: 80vw;
  }

  .icon {
    width: 20%;
  }

  .topnav a {
    float: left;
    width: 33vw;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 0px;
    text-decoration: none;
    font-size: 17px;
  }
}