style.css

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&family=Montserrat&family=Poppins:wght@700&display=swap');
/* font-family: 'Montserrat', sans-serif; */



.body, 
.header {
    width: 100%;
    display: flex;
    align-items: center;   
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    background-color: #721D7B;
    gap: 1em;
}

.header, 
.container {   
    background-color: rgb(255, 255, 255);
    }

.container {
    width: 77%;
    margin: auto;
    padding: 0 3em 1.4em;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
} 

.header__title {
    font-size: 3em;
    font-family: 'Libre Baskerville', serif;
    text-transform: uppercase;
    background-color:#CCFF66;
    padding: 0 1em;
    font-weight: 700;
   
}

.header__img {
    margin: auto;   
    -webkit-box-shadow: -21px 33px 0px 9px #FFFF67;
    box-shadow: -43px 33px 0px 9px #ffff67;
}
.header__span {
    font-weight: bold;
}
.header__caption {
   margin: 4em 0;
   display: inline-block;
   text-align: center;
   padding: 0 11em;
}
.main {
    margin-top: 1rem;
}

.main__title {
    font-family: 'Libre Baskerville', serif;
    text-transform: uppercase;
    font-size: 1.2em;
    text-align: center;
    background-color:#00798C;
    margin-bottom: 2em;
    padding: 0.3em;   
    color: rgb(255, 255, 255);
  }


.main__list {
      padding: 0 2.3em;
  }
.main__quote {
    margin-bottom: 1em;
    list-style: disc;
}

.main__quote::marker {
    color: #721D7B;
    font-size: 1.5em;
    font-weight: bold;
    
}
.main__span{
    background-color: #721D7B;
    color: rgb(255, 255, 255);
    font-weight: bold;
    padding: 0 0.5em;
}


.footer {
    color: rgb(255, 255, 255);
}

.footer__link {
    font-weight: bold;
    border-bottom: 2px solid #CCFF66;
}


.button,
.button::after {
 padding: 16px 20px;
 font-size: 18px;
 background: linear-gradient(45deg, transparent 5%, #CF32A3 5%);
 border: 0;
 color: #fff;
 letter-spacing: 3px;
 line-height: 1;
 box-shadow: 6px 0px 0px  #ffff67;
 outline: transparent;
 position: relative;
 left: 46em;
 top: 1.4em;
}

.button::after {
 --slice-0: inset(50% 50% 50% 50%);
 --slice-1: inset(80% -6px 0 0);
 --slice-2: inset(50% -6px 30% 0);
 --slice-3: inset(10% -6px 85% 0);
 --slice-4: inset(40% -6px 43% 0);
 --slice-5: inset(80% -6px 5% 0);
 content: "HOVER ME";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, );
 text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
 clip-path: var(--slice-0);
}

.button:hover::after {
 animation: 1s glitch;
 animation-timing-function: steps(2, end);
}

@keyframes glitch {
 0% {
  clip-path: var(--slice-1);
  transform: translate(-20px, -10px);
 }

 10% {
  clip-path: var(--slice-3);
  transform: translate(10px, 10px);
 }

 20% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 10px);
 }

 30% {
  clip-path: var(--slice-3);
  transform: translate(0px, 5px);
 }

 40% {
  clip-path: var(--slice-2);
  transform: translate(-5px, 0px);
 }

 50% {
  clip-path: var(--slice-3);
  transform: translate(5px, 0px);
 }

 60% {
  clip-path: var(--slice-4);
  transform: translate(5px, 10px);
 }

 70% {
  clip-path: var(--slice-2);
  transform: translate(-10px, 10px);
 }

 80% {
  clip-path: var(--slice-5);
  transform: translate(20px, -10px);
 }

 90% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 0px);
 }

 100% {
  clip-path: var(--slice-1);
  transform: translate(0);
 }
}


.header__title {
  color: transparent;
  background: conic-gradient(
    #D9D7F1 12%, 
    #5A0191 12%, #E58D89 33%,     
    #FFCBCB 55%, #FFCBCB 70%, 
    #00798C 70%, #00798C 87%, 
    #E58D89 87%);
  background-size: 50%;
  background-clip: text;  
  -webkit-background-clip: text;
  

}  

@media screen and (max-width:480px) {

    .container, 
    .main     
    {
       width: 90%;
       display: flex;
       flex-direction: column;
       align-content: center;
       align-items: center;
    }

    .header__title {
        font-size: 1.5em;
    }
    .container {
        padding: 0em;
    }

    .header__caption {
        width: 100%;
        padding: 3em 2em 1em;
        font-size: 0.8em;
        margin: 0;
    }

    .header__img {
        width: 49%;
        box-shadow: -11px 16px 0px 7px #ffff67;
    }

    .main__title {
        display: inline-block;
        width: 100%;
        font-size: 0.8em;      
    }

    .main__list {
        padding: 0 0 0 1em;
    }
    .main__quote {       
        margin-bottom: 0.3em;
        font-size: 0.9em;
    }

    .button, .button::after {        
    left: 0em;
            
    top: 1em;
    }

    .footer {
        padding: 1em 0;
    }
}

/* 
@media screen and (min-width: 761px) {
  
  .body,
   {
       width: 100%;
     
    }
} */