body {
  background-color: #e6e7ea;
  font-family: "Absans", "Comic Sans MS", Verdana;
  margin: 0px;
}

@font-face {
 font-family: "Absans";
 src: url("Absans-Regular.woff2") format(WOFF2);
} 


.intro-box {
  margin-top: 10px;
  height: 500px;
  background-color: #e6e7ea;
  background-image: url("roses-pattern.svg");
  background-repeat: repeat;
  background-size: 500px 500px;
  background-attachment: fixed; 
  display: grid;
  align-items: center;
  justify-content: center;
}
.intro-box-text {
  font-size: 400%;
  font-weight: bold;
  background-color: #e6e7ea;
  background-image: linear-gradient(rgba(0,0,0,0) 15%, #e6e7ea 15%, #e6e7ea 85%, #F85D5A 75%);
}
.intro-box-button-text {
  font-size: 160%;
  place-self: center;
}
.intro-box-button {
  background-color: #F85D5A;
  border: 12px double #e6e7ea;
  width: 250px;
  color: #e6e7ea;
}


.website-guide {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px;
  gap: 10px; 
  font-size: 120%;
  text-align: center;
}

span {
  padding-top:50px;
  font-size: 1.5em;
  font-weight: bold;
}

.grid-1, .grid-2, .grid-3, .grid-4 {
 height: 250px;
 background-color: #e6e7ea;
 background-image: linear-gradient(#F85D5A 15%, #f85d5a 15%, #e6e7ea);
}




@media screen and (max-width: 480px) {
  .intro-box-text {
    font-size: 200%;
  }
  .website-guide {
    grid-template-columns: 1fr; 
  }
}