body, html{
          height: 100%;
        }
        .hero {
            height:1500px;
        }
        body {
            font-family: Lora, serif;  
            background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 70%), linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 80%), url("Mock DOCS Website.jpg"); rgba(0,0,0,0.2), background-repeat: no-repeat; background-attachment: fixed; background-size: cover;
        }
        .logo {text-align: center; margin-top: 25px; background: #D3C8B0; margin-bottom: 0;}
        .progress {background: lightblue; margin-top: 0; text-align: center; color: black;}
        nav{
            color: #D3C8B0; font-size: 16px; text-align: left; margin-left: 55%; 
        }
        a{
            text-decoration:none; color: #D3C8B0;
        }
        .patientportal{
            background-color: #8C52FF; border-radius: 16px; padding: 10px; border: #8C52FF;
        }
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;   
        }
        h1, h2, p {color:#D3C8B0;}
        h1{margin-left:25%; margin-right:25%; font-size:24px; font-weight: bold; margin-top: 128px;}
        h2{margin-left:25%; margin-right:25%; font-size:20px}
        p{margin-left:30%; margin-right:25%; font-size:16px; text-indent: 2em; line-height: 2;}
        .review{height:1000px; background-color: black; margin: 0; padding: 0; color: #D3C8B0;}
        .footer{height:64px; background-color: grey; justify-content: center; font-size: 16px; color: white; display: flex; align-items: center;  margin: 0; padding: 0;}
        .end{height:75px; linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 90%),}
        .reviewbox{
    height: auto; min-height: 50px; width: fit-content; width: max-content; display: inline-block; border: 2px solid #D3C8B0; border-radius: 16px; padding: 16px; color: black; background-color: #D3C8B0; margin-top: 10px;
}