StyleSheet.css

body { 
        font: 16px Helvetica, Sans-Serif; 
        line-height: 24px; 
        background-color: #262626;
}


h1 { 
        font-family: 'Comfortaa', cursive;
        
        font-size: 3rem; 
        letter-spacing: -2px; 
}
h3 { 
        font-size: 20px; 
        margin: 0 0 6px 0; 
        position: relative; 
}
p { 
        margin: 0 0 16px 0; 
        font-size: 1.2rem;
}
a {
         color: #404040; 
         font-style: italic;
         text-decoration: none; 
        }
a:hover {
         
        color: black; 
}
ul {
         margin: 0 0 32px 17px; 
        }

dt { 
        font-style: italic; 
        font-weight: bold; 
        font-size: 22px; 
        text-align: right; 
        padding: 0 26px 0 0; 
        width: 150px; 
        float: left; 
        height: 100px; 
        border-right: 1px solid #999;  
}
dd {
         width: 600px;
          float: right;
         }


.header
{
        font-family : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        background-color: #16ea66;
        color: #262626;
        padding: 30% 5% 0% 20%;
}
.about
{
        font-family : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        background-color:#262626 ;
        color:#b6ea16; 
        padding: 10% 16% 0% 21%;
}
.main
{
       
        background-color:262626;
        font-family : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color:#16ea66; 
        padding: 2% 5% 0% 20%;
}
.me
{
        position: absolute;
         height: 20rem;
        width: auto;
        clip-path: circle(120px at 120px 120px);
        
       }

.link
{
        color:#16ea66; 
        padding: 2%;
        font-size: 2.5rem;
}
.link:hover{
        color:#b6ea16;
}

@media screen and (max-width: 1060px) {
        .me{
                height:10rem ;
        }
}
@media screen and (max-width: 490px) {
        .me{
                height:5rem ;
        }
}