body {
  background-image: url(animalprintbg.jpg);
}
h1 {
    color: white;
    text-align: center;
    text-decoration: underline;
    
}

.container{
    width: 1000px;
    margin: 20px auto;

    display: grid;

    grid-template-columns: 250px 1fr;

    grid-template-areas:
        "header header"
        "aside main"
        "footer footer";

    gap: 20px;
}

.rainbow-text {
 font-size: 1.8rem !important; 
  /* Use system or Google fonts for best results */
  font-family: 'system-ui', -apple-system, sans-serif;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  
  /* Create the rainbow gradient */
   background: linear-gradient(to right, #ff2a6d, #ff6a00, #ffc837, #00b09b, #00c6ff, #7f00ff, #ff2a6d);
  background-size: 400% 100% !important;
  
  /* Clip the background to the text shape */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Animate the gradient movement */
  animation: rainbow-animation 6s linear infinite;
   display: inline-block;
}

@keyframes rainbow-animation {
  to {
    background-position: 400% center;
  }
}
.container{
    width: 1000px;
    margin: 20px auto;

    display: grid;

    grid-template-columns: 250px 1fr;

    grid-template-areas:
        "header header"
        "aside main"
        "footer footer";

    gap: 20px;
}
.container > header{
    grid-area: header;
}

aside{
    grid-area: aside;
}

main{
    grid-area: main;
}

footer{
    grid-area: footer;
}

button{
    background:linear-gradient(#a8ff4d,#72d600);
    border-radius:8px;
    box-shadow:0 2px 5px rgba(0,0,0,.2);
}
img{
    border-radius:12px;
    object-fit:cover;
}
.card{
    background:white;
    border-radius:15px;
    padding:15px;
}
aside section,
main section{
    background:white;
    border-radius:15px;
    padding:15px;
    margin-bottom:15px;
}
main img,
aside img{
    margin-bottom:15px;
}
.container > header{
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 15px;
    border-radius: 15px;
}

aside{
    grid-area: aside;
}

main{
    grid-area: main;
}

footer{
    grid-area: footer;
}
button a{
    color: black;
    text-decoration: none;
    font-weight: bold;
}
.socials{
    display:flex;
    gap:15px;
}

.socials img{
    width:40px;
    height:40px;
}
aside section,
main section{
    background:white;
    padding:15px;
    border-radius:15px;
    margin-bottom:15px;
}