body {
   background: white;
   font-family: 'Roboto Flex', sans-serif;
   margin: 0;
   padding:0;
   min-width: 300px;
   max-width: 1500px;
}

header {
    display: flex;
    position: fixed;
    background: black;
    width: 100%;
    height: 3.2rem;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

footer {
    display: flex;
    background-color: black;
    width: 100%;
    margin-top: 15vw;
}

.footer-text {
    display: flex;
    flex-direction: column;
    color: white;
    text-decoration: none;
    padding-left: 8.05rem;
    padding-bottom: 5vw;
    padding-top: 5vw;
}

a:hover {
    background-color: grey;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sektio {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 12vw;
    font-size: 3.2vw;
    font-weight: bold;
}

.bread {
    width: 38vw;
    padding-left: 5vw;
}

.photo {
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
    width: 20vw;
    height: 20vw;
    border-radius: 50vw;
}

.menu{
    text-decoration: none;
    font-size: 2rem;
    color: white;
}

.projekti {
    display: flex;
    flex-direction: row;
    align-items:center;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 5rem;
    padding-bottom: 5rem;

}

.teksti {
    display: flex;
    flex-direction: column;
    font-size: 5vw;
    padding-right: 5vw;
    padding-left: 5vw;
    font-weight: bolder;
}

.kuvitus {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 30vw;

}

.readmore {
    font-size: 3vw;
    color: black;
}

.poikkeus {
    justify-content: flex-start;
}

.selitys {
    display: flex;
    flex-direction: column;
    font-size: 2vw;
    padding-right: 3vw;
    padding-left: 3vw;
}

.esimerkki {
    display: flex;
    flex-direction: row;
    padding-top: 10rem;
    padding-left: 8rem;
    padding-right: 8rem;
}

.kuva {
    display: flex;
    align-items: center;
    width: 30vw;
}

#about {
    font-weight: bolder;
}
#about1 {
    font-weight: lighter;
}
#projects {
    font-weight:lighter;
}
#projects1 {
    font-weight: bolder;
}

#nuoli {
    padding-left: 4rem;
    padding-right: 4rem;
}

#ylin {
    padding-top: 10vw;
}

#alin {
    padding-bottom: 10vw;
}

@media screen and (max-width: 680px) {
   
    header {
        height: 2rem;
    }

    .footer-text {
        padding-left: 2rem;
        font-size: 0.7rem;
        font-weight: bolder;
    }
    
    .menu{
        font-size: 1rem;
    }

    .sektio {
        flex-direction: column;
        padding: 15vw;
        padding-top: 25vw;
        font-size: 5vw;
        font-weight: bolder;
    }
    
    .bread {
        display: flex;
        width: 50vw;
        font-weight: normal;
    }

    .photo {
        max-width: 100%;
        vertical-align: middle;
        display: inline-block;
        width: 40vw;
        height: 40vw;
        border-radius: 50vw;
        border-bottom: 30vw;
    }
    
    .projekti {
        margin-top: 15vw;
        padding-left: 2rem;
        padding-bottom: 2rem;
        flex-direction: column;
    }

    .kuvitus {
        height: 90vw;
    }
    
    .teksti {
        font-size: 7vw;
        padding-right: 5vw;
        padding-left: 5vw;
        padding-top: 10vw;
        font-weight: normal;
    }
    
    .selitys {
        font-size: 5vw;
    }
    
    .kuva {
        width: 70vw;
    }
    .esimerkki {
        flex-direction: column;
        padding-top: 20vw;
        padding-left:3rem;
        padding-right:3rem;
    }

    .readmore {
        font-size: 3vw;
        color: black;
    }
}