@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  body {
    background: linear-gradient(270deg, #3a3a3a,#353535, #000000);
    background-size: 400% 400%;
    animation: gradientAnimation 20s ease infinite;
    color: #e2e2e2;
}
  
  
p {
    font-size: clamp(1rem, 0.7213rem + 1.2739vw, 2.25rem);
    line-height:1.4 ;
}

.big--p{
    font-family: "superior-title", serif;
    font-weight: 500;
    font-style: normal;
    margin: 0px 2rem;
}

.intro {
    font-size: clamp(1.3125rem, 0.4347rem + 4.0127vw, 5.25rem);
    line-height: 1.4;
    margin-bottom: 10.5rem;
    margin-top: 25rem;
}

.intro a{
    color: #e2e2e2;
    font-style: italic;
    text-decoration: none;
}
.intro a:hover{
    text-decoration: underline;
    opacity: 0.7;
}
.intro span{
    font-size: clamp(1.3125rem, 0.9502rem + 1.6561vw, 2.9375rem);
    font-weight: 600;
    font-style: italic;
}

.right__p{
    font-size: clamp(1.3125rem, 1.2289rem + 0.3822vw, 1.6875rem);
    text-align: right;
    margin-bottom: 17.5rem;
}
 
.phrases{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column: 1 / -1;
    grid-gap: 1rem;
    margin: 0 1rem;
}

.sonnet1 {
    font-size: clamp(1rem, 0.7213rem + 1.2739vw, 2.8rem);
    font-weight: 600;
}


.sonnet4 {
    padding-bottom: 3rem;
    border-bottom: 1px solid #e2e2e2;
}