body {
    margin-left: clamp(1.25rem, -1.8182rem + 16.3636vw, 12.5rem);
    margin-right: clamp(1.25rem, -1.8182rem + 16.3636vw, 12.5rem);
    margin-top: clamp(2.5rem, -1.5909rem + 21.8182vw, 17.5rem);
    font-family: Arial, Helvetica, sans-serif;
    
}

.line{
    height: solid black 2px;
}

h1{
    color: rgb(35, 112, 40);
    text-align: center;
    font-size: clamp(1.75rem, 0.6932rem + 5.6364vw, 5.625rem);
}

a{
    text-decoration: none;
    color: rgb(17, 180, 28);
}

p {
    font-size: clamp(1rem, 0.5909rem + 2.1818vw, 2.5rem);
    font-weight: 100;
}

.intro {
    margin-bottom: clamp(3.75rem, 0rem + 20vw, 17.5rem);
    font-size: clamp(1rem, 0.7614rem + 1.2727vw, 1.875rem);
}

.sonnet1 {
    
    margin-bottom: clamp(0rem, 0.5114rem + -2.7273vw, -1.875rem);
}

.sonnet2 {
    margin-left: clamp(1.25rem, 0.2273rem + 5.4545vw, 5rem);
    margin-bottom: clamp(0rem, 0.5114rem + -2.7273vw, -1.875rem);
}
.sonnet3 {
    margin-left: clamp(2.5rem, 0.4545rem + 10.9091vw, 10rem);
    margin-bottom: clamp(0rem, 0.5114rem + -2.7273vw, -1.875rem);
}
.sonnet4 {
    margin-bottom: clamp(3.125rem, 1.4205rem + 9.0909vw, 9.375rem);
    margin-left: clamp(3.75rem, 0.6818rem + 16.3636vw, 15rem);
}


.timeline{
    width: clamp(0.1875rem, 0.0682rem + 0.6364vw, 0.625rem);               
    height: 720px;               
    background: #222;
    border-radius: 999px;
    overflow: hidden;
  
    position: fixed;
    top: 60px;
    left: clamp(0.625rem, -0.5682rem + 6.3636vw, 5rem);
  }
  
  .timeline__bar{
    width: 100%;
    height: 0%;
    background: lime;
    border-radius: 999px;
  
    transition: height linear;
  }