/* FONT START */

@font-face {
    font-family: 'exquisite';
    src: url('https://file.garden/aKnb5jNQGAe7XPwF/Fonts/exquisite-webfont.woff2') format('woff2'),
         url('https://file.garden/aKnb5jNQGAe7XPwF/Fonts/exquisite-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* FONT END */



@media screen and (max-width: 768px) {
  
      .container {
        background-image: url('https://file.garden/aKnb5jNQGAe7XPwF/Backgrounds/mainbg.png');
        background-size: cover;
        background-repeat: no-repeat;
        max-width: 100%;
        margin-top: 70px;
        outline: #2E0F96 solid 3px;
        outline-offset: 6px;
        border: 3px solid #2E0F96;
        border-radius: 10px;
        flex-wrap: wrap;
        padding: 50px;
        gap: 5px;
        flex-direction: column;
        }
        
      #header {
        outline: #2E0F96 solid 3px;
      	border: 3px solid #BBBDED;
      	background-color: #fff;
        padding: 10px;
        padding-bottom: 20px;
        height: auto;
        max-width: 100%;
        border-radius: 10px;
        flex-wrap: wrap; 
        overflow: auto;
    }
    
    .headertext {
      font-family: 'exquisite';
      font-size: 3rem;
      text-align: center;
      letter-spacing: 0.5rem;
      background: linear-gradient(to right, #FFF5C9 0%, #FF92D6 21%, #CC78E8 34%, #845DF0 52%, #B8FFF1 83%, #FAFFB5 100%);
      background-clip: text;
      color: transparent;
      background-size: 200% auto;
      animation: gradientAnimation 3s linear infinite;
    }
    
    @keyframes gradientAnimation{
      0%{
        background-position: 200% 50%;
      }
      100%{
        background-position: 0% 50%;
      }
    }
       
}



@media screen and (min-width: 769px) {
   
  /* HEADER START */
  .container {
      background-image: url('https://file.garden/aKnb5jNQGAe7XPwF/Backgrounds/mainbg.png');
      background-size: cover;
      background-repeat: no-repeat;
    	max-width: 65rem;
    	margin-top: 70px;
    	outline: #2E0F96 solid 3px;
    	outline-offset: 6px;
    	border: 3px solid #2E0F96;
    	border-radius: 10px;
    	flex-wrap: wrap;
    	padding: 50px;
    	gap: 5px;
  }
  
  #header {
    outline: #2E0F96 solid 3px;
  	border: 3px solid #BBBDED;
  	background-color: #fff;
    padding: 10px;
    padding-bottom: 20px;
    height: 50px;
    border-radius: 10px;
    }
    
  .headertext {
    font-family: 'exquisite';
    font-size: 3rem;
    text-align: center;
    letter-spacing: 0.5rem;
    background: linear-gradient(to right, #FFF5C9 0%, #FF92D6 21%, #CC78E8 34%, #845DF0 52%, #B8FFF1 83%, #FAFFB5 100%);
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: gradientAnimation 3s linear infinite;
  }
  
  @keyframes gradientAnimation{
    0%{
      background-position: 200% 50%;
    }
    100%{
      background-position: 0% 50%;
    }
  }
  
  /* HEADER END*/
}