@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lexend+Giga:wght@100..900&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lexend+Giga:wght@100..900&display=swap');

@import "https://unpkg.com/open-props";








/* Style Tile with css variables */
:root {
  --gray1: #A6A6A6;
  --gray2: #808080;
  --gray3: #404040;
  --red1: #EE4B2B;
  --red2: #360001;
  --red3: #2A0001;
  --black: #000000;
  --highlight: #E5D9C7;
  --highlight2: #e9e4dd;
  --font1: "Bebas Neue",  sans-serif;
  --font2: "Merriweather Sans", sans-serif;
}


main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: var(--font1);
}



h1 {
  font-size: 5em;
  justify-content: center;
  align-items: center;
  margin-bottom: 90px;
  color: var(--highlight)
  
}

@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.fadeInUp-animation {
  animation: 1.5s fadeInUp;
}






/* Article */
article {
  display: flex;
  flex-direction: column;
  /* main axis   */
  justify-content: center;
  /* cross axis   */
  align-items: center;
  background-image: var(--gradient-8);
  filter: var(--noise-filter-4);
  
}


nav a {
  font-family: var(--font1);
  color: var(--highlight);
  font-size: 2em;
 padding: 2rem;
 transition: background 1s 3s, font-size 3s;
  font-size: 2em;
}


aside img { 
  width: 100%;
  max-width: 100%;
  height: 100vh;
  object-fit: cover;
 
}



p {
 font-family: var(--font2); 
 margin-bottom: 100px;
 color: white;
 text-align: left;
 padding: 100px;
}


@media (max-width: 480px ) {
  
 
  
  main {
      grid-template-columns: 1fr;
  }
  
  article nav a {
    display: block;
    margin: 1em 0 1em 0;
  }
  
  p span {
    float: none;
    font-size: 1em;
    }
  
}

.animated-bg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--red2);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    background: var(--highlight2);
    transition: background 1s, color 1s; 

}


nav a:hover {
  color: white;
}


h1:hover {
  color: white;
  transition: background 1s 2s, color 1s;
}