@font-face {
    font-family: 'OpenDyslexic';
    src :url('OpenDyslexic-Regular.otf');
}

body { 
    background-image: linear-gradient(cornflowerblue, palegreen);
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'OpenDyslexic';
}

img {
    border: 1px solid;
    height: 200px;
    filter: grayscale(100%);
    }

.about {
    background-color: lightblue;
    border: 1px solid; 
    text-align: center; 
    height: 200px;
    padding: 20px; 
    margin: 20px;
    justify-content: center;
    align-items: center;
    display: flex; 
}

header {
    background-color: lightblue;
    text-align: center; 
    margin: 20px;
    color: black; 
    height: 60px;  
    border: 1px solid; 
    top: 0; 
    position: sticky; 
    z-index: 1;

}

header ul {
    list-style-type: none;
    padding: 0; 
}

header li {
    display: inline; 
}

@media (max-width: 600px) {
    .about {
        height: 70%;
        font-size: 13px;
    }
    header {
        height: 100px;
    }
    img {
        height: 100px;
    }

}