@import url('https://fonts.googleapis.com/css2?family=Holtwood+One+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');



body{
    background:url(/bg.png);
    background-size: cover;
    align-items:center;
    margin:20px;
    overflow-x:hidden;
    
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header{
    
    height: 110px;
    flex-shrink: 0;
    border-radius: 15px;
border: 1.2px solid rgba(255, 255, 255, 0.30);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.07) 100%);
backdrop-filter: blur(4.699999809265137px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
color: #FFF;
font-family: Holtwood One SC;
font-size: 38px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-shadow:
-2px -2px 0 black,
2px -2px 0 black,
-2px 2px 0 black,
2px 2px 0 black;
align-items:center;
text-align:center;
padding-top:2px;
margin-top:4px;


}


.main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 40px auto;
    max-width: 1200px;
}

article {
    border-radius: 15px;
    border: 1.2px solid rgba(255, 255, 255, 0.30);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.07) 100%);
    backdrop-filter: blur(4.699999809265137px);
    color: #FFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    padding: 20px;
    width: 340px;
    transition: transform 0.3s ease-in-out;
}

article:hover {
    transform: translateY(-5px);
}

article h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #01b4ae;
    font-family:'Holtwood One SC';
    text-shadow:
-2px -2px 0 rgb(0, 0, 0),
2px -2px 0 black,
-2px 2px 0 black,
2px 2px 0 black;
letter-spacing:1px;
}

article p {
    font-size: 1rem;
    margin-bottom: 15px;
}

a{
    text-decoration:none;
}


#animated-text{
    color: #FFF;
font-family: Alex Brush;
font-size: 43px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

footer {
  text-align: center;
  padding: 20px 0;
  border-radius: 0px;
    border: 1.2px solid rgba(255, 255, 255, 0.30);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.07) 100%);
    backdrop-filter: blur(4.699999809265137px);
    color: #FFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  color: white;
  margin-left:-2.04vw;
  margin-right:-2.5vw;
  margin-bottom:-2.4vw;
  
}

footer p {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
    .header {
      font-size: 20px;
      height:100px;
    }
  }
  
  @media (max-width: 480px) {
    .header {
      font-size: 14px;
      height:100px;
    }
  }
@media (max-width: 768px) {
    #animated-text {
      font-size: 30px;
    }
  }
  
  @media (max-width: 480px) {
    #animated-text{
      font-size: 30px;
    }
  }