* {
    margin: 0;
    color: #1a535c;
  }
  
  html {
    overflow: hidden;
  }
  
  .back {
    position: -webkit-sticky;
    position: sticky;
    float: right;
    top: 60vh;
    background-color: yellow;
    padding: 50px;
    font-size: 20px;
    width: 150px;
  }
  
  body {
    font-family: "Redressed", cursive;
    text-align: center;
    background-color: #f7fff7;
  }
  .box {
    background-color: #ff6b6b;
    height: 10vmax;
    width: 10vmax;
    font-size: 2vmax;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .box img {
    margin-top: 8%;
    max-height: 20vmin;
  }
  
  .center {
    position: relative;
  }
  
  .top-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 4vh;
  }
  
  .grid-2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  #heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
    font-size: 3rem;
  }
  
  #guestbook {
    position: absolute;
    top: 5vh;
    left: 5vw;
    width: 30vw;
    height: 30vh;
    background-color: #4ecdc4;
    overflow: hidden;
  }
  #weekly-beer {
    position: absolute;
    top: 15vh;
    right: 25vw;
    width: 18vw;
    height: 30vh;
    background-color: #ffe66d;
  }
  
  #vines-mulled {
    position: absolute;
    bottom: 5vh;
    left: 10vw;
    width: 18vw;
    height: 40vh;
  }
  
  #heritage {
    position: absolute;
    bottom: 10vh;
    right: 10vw;
    width: 35vw;
    height: 25vh;
    background-color: #91c45a;
    overflow: hidden;
  }
  #heritage img {
    margin-top: 4vh;
    max-height: 15vh;
  }
  
  #heritage-content {
    width: 100%;
    height: 100%;
  }
  #guestbook-content {
    width: 100%;
    height: 100%;
  }
  #guestbook-content iframe {
    overflow: hidden;
  }
  
  iframe {
    border-width: 0;
  }
  
  #gc {
    margin-top: 10vh;
  }
  
  .snake {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .snake a:hover {
    font-style: oblique;
  }
  
  .snakeFooter {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .snakeFooter a:hover {
    font-style: oblique;
  }
  
  @media (max-width: 600px) {
    #heading {
      font-size: 5rem;
    }
  }