/* this is a css reset that makes sure the browser won't add any unexpected margins or padding to your page */
body, html{
  margin:0;
  padding:0;
  box-sizing: border-box;
}


.lobster-regular {
  font-family: "Lobster", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1{
  text-align: center;
  font-size: 9vw;
}

.title-container {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

p{
  max-width: 45%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 2vw;
  text-align: justify;
  margin-left: 2vw;
}

.bold{
  font-weight: bold;
}

iframe{
  float: right;
  margin-right: 2vw;
  margin-top: 2vw;
}

.sketch{
  float: right;
  margin-right: 2vw;
  margin-top: 1vw;
  width: 45%;
  border: 3px solid black;
}

a{
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 2vw;
  color: rgb(254, 77, 183);
}


.nav{
  display: flex;
  justify-content: space-between;
  margin: 0 2vw 2vw 2vw;
}

.bee{
  width: 15%;
}

.sketchtwo{
  display: none;
}

#btn:hover{
  color: red;
}

@media (max-width: 768px) {
  iframe{
    display: none;
  }
  p{
    max-width: 100%;
    margin-left: 2vw;
    margin-right: 2vw;
  }

  .desktoptext{
    display: none;
  }

  .sketch{
    display: none;
  }

  .sketchtwo{
     display:block;
     margin: auto;
     width: 90%;
     border: 3px solid black;
} 

.text{
  margin-bottom: 8vw;
}

}