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



}
.container {
  position:relative;
   top: 10%;
   left: 80px;

}

h1{
   font-family: "Kaushan Script", cursive;
     font-size: 100px;
   background-image: linear-gradient(90deg, #642c90, #d12229,#642c90);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent; 

}
h2{
   font-family: "Sour Gummy", cursive;
    font-size: 50px;
     margin: 15px;
     position: relative;
      left: 80px;
}
p{
   font-size: 25px;
    margin: 15px;
     position: relative;
      left: 80px;
}
p2{
   font-size: 25px;
position: relative;
 position: relative;
      right: -450px;
top: -13.5rem;
 margin: 15px;
}
li{
   font-size: 25px;
    margin: 15px;
     position: relative;
      left: 80px;
}


.link1{
   position: relative;
   right: +23.1rem;
   top: +48rem;
    margin: 15px;

}
.link2{
   position: relative;
   right: -36rem;
   top: +45rem;
    margin: 15px;
}
.back{
text-align:right; 
 margin: 15px;
}
.sample img{
  width: 300px;
  height: auto;
  border: 2px solid black;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  margin-top: auto;
  position: relative;
  right: +1rem;
  top: -49.5rem;
   margin: 15px;
}
.background{
  width: stretch;
   height: stretch;

  
}
.sample2 img{
  width: 1000px;
  height: auto;
  border: 2px solid black;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  position: relative;
  right: +23.1rem;
  top: -20rem;
   margin: 15px;
  

}
iframe{
  width: 1241px;
  height:300px;
}
.iframeWrapper {
   width: 1241px; /* match your sketch width */
   height: 300px; /* match your sketch height */
   overflow: hidden; /* hide anything outside bounds */
   position: relative;
}

iframe {
   width: 100%;
   height: 442px; /* 42px taller than the container */
   border: none;
   position: absolute; /* this allows you to call 'top' on the next line */
   top: -42px; /* shift the iframe 42px up to hide the bar */
}
.max-width{
   width: 300px; /* Set desired width */
}
@media (max-width: 768px) {
  .iframeWrapper {
     width: 93%; /* make the iframe wrapper responsive */
     height: 300px; /* adjust height automatically */
  }
}
@media (max-width: 425px) {
  iframe {
    display: none;/* adjust height automatically */
  }
}