html {
    background-image: url("sparkle2.gif");
}
.box {
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 250px auto;
}

background {
  grid-row: 2 / 5;
  grid-column: 1 / 3;
  background-image: url("cardboard.png");
}

footer {
    border: black 2px solid;
}

header{
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    height: 270px;
    background-image: url(teich_8.gif);
    background-size: 100% 100%;
    border-radius: 15px;
    margin: 20px;
}
img[alt="Bisexual Heart Flag"],
img[alt="Transgender Heart Flag"],
img[alt="Non-Binary Heart Flag"] {
    width: 50px;
    height: auto;
}


h1 {
    padding-top: 50px;
    text-align: center;
    margin-top: 80px;
    filter: drop-shadow( 0 3px #9a6fb0) drop-shadow( 2px 0 #9a6fb0) drop-shadow( 0 -1px #ffa9c2) drop-shadow( -1px 0 #9a6fb0) drop-shadow( 0 5px white) drop-shadow( 5px 0 white) drop-shadow( 0 -5px white) drop-shadow( -5px 0 white) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow( 0 0 2px #424242);
    color:#FDE6FF;
    font-family: ecoder;
    position: relative;
top: 0;
animation: bounce2 0.3s infinite alternate;
}

@keyframes bounce2 {
100% {
top: -0.50rem;
}
} 
  
  @font-face { 
    font-family: ecoder;
    src: url(https://dl.dropbox.com/s/2wrgv8i3jsqkv6p/Ecoder-Italic.otf);
}   

nav{ 
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
    margin-left: 20px;
    margin-top: 20px;
}

.btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.button {
  background-color: #56ac6b;
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 10px;
}

.btn-group .button:hover {
  background-color: rgb(255, 158, 203);
  animation: bounce 1s;
}

.btn-group .button:not(:last-child) {
  border-bottom: none;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

cd{
    grid-row: 3 / 4;
    grid-column: 1 / 2;
  }

.space {
    width: 100%;
    height: max-content;
    padding-top: 20px;
    margin-left: auto;
    
}

main{
    background-image: url(texturepaper.jpg);
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin-right: 20px;
    margin-top: 20px;
    padding: 20px;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    border: 3px;
}

.main-content {
    text-align: center;
}

.additional-content {
    text-align: justify;
    letter-spacing: 1px;
}

footer{
    grid-row: 3 / 5;
    grid-column: 1 / 3;
    height: max-content;
    background-color: white;
    text-align: center;
    margin: 20px;
}