@media screen and (max-width: 500px) {
    body{
        background-image: url("Kuvat/tausta.jpg");
        background-repeat: no-repeat;
        background-attachment: local;
        background-size: auto;
    }
    
    h1{
        font-size: 23px;
        color: #00ffa0;
        text-shadow: 3px 3px 1.5px #000000;
        font-family: 'Exo 2', sans-serif;
    }
    h2{
        font-size: 14px;
        text-align: center;
        color: #00ffa0;
        text-shadow: 3px 3px 1.5px #000000;
        font-family: 'Exo 2', sans-serif;
    }
    h3{
        font-size: 15px;
        color: white;
        font-family: 'Exo 2', sans-serif;
    }
    a{
        cursor: pointer;
    }
    
    .Otsikko{
        margin-top: 20px;
    }
    .Teksti{
        line-height: 27.5px;
        width: 350px;
    }
    
    .center{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .logo{
        margin-top: 25px;
        width: 275px;
    }
    
    .nav{
        position: relative;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 37.5px;
        width: 370px;
        background-color: rgba(0, 0, 0, 0.6);
    }
    
    .berryimages{
        display: none;
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    .berryimage{
        display: none;
        width: 210px;
    }
    
    .textbox{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
        background-image: url("Kuvat/Puutausta.jpg");
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: cover;
        width: 370px;
        height: 520px;
    }

    .zoom{
        transition: transform .1s;
        width: 120%;
        height: 120%;
    }
    .zoom:hover{
        transform: scale(1.2);
    }

    .copyrightText{
        margin-top: 15px;
        font-size: 7px;
        color: rgb(255, 104, 104);
        opacity: .8;
        width: 115px;
        background-color: rgba(0, 0, 0, 0.7);
    }
}

@media screen and (min-width: 501px) {
    body{
        background-image: url("Kuvat/tausta.jpg");
        background-repeat: no-repeat;
        background-attachment:local;
        background-size: cover;
    }
    
    h1{
        font-size: 45px;
        color: #00ffa0;
        text-shadow: 6px 6px 3px #000000;
        font-family: 'Exo 2', sans-serif;
    }
    h2{
        font-size: 28px;
        text-align: center;
        color: #00ffa0;
        text-shadow: 6px 6px 3px #000000;
        font-family: 'Exo 2', sans-serif;
    }
    h3{
        font-size: 30px;
        color: white;
        font-family: 'Exo 2', sans-serif;
    }
    a{
        cursor: pointer;
    }
    
    .Otsikko{
        margin-top: 40px;
    }
    .Teksti{
        line-height: 45px;
        width: 650px;
    }
    
    .center{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .logo{
        margin-top: 50px;
        width: 550px;
    }
    
    .nav{
        position: relative;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 75px;
        width: 780px;
        background-color: rgba(0, 0, 0, 0.6);
    }
    
    .berryimages{
        margin-top: 100px;
        display: flex;
        gap: 70px;
        justify-content: center;
    }
    .berryimage{
        width: 420px;
    }
    
    .textbox{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 150px;
        background-image: url("Kuvat/Puutausta.jpg");
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: cover;
        width: 800px;
        height: 760px;
    }

    .zoom{
        transition: transform .1s;
        width: 120%;
        height: 120%;
    }
    .zoom:hover{
        transform: scale(1.2);
    }

    .copyrightText{
        margin-top: 30px;
        font-size: 15px;
        color: rgb(255, 104, 104);
        opacity: .8;
        width: 230px;
        background-color: rgba(0, 0, 0, 0.7);
    }

    .logoAnimation{
        animation-name: logo;
        animation-duration: 1s;
        animation-direction: alternate;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    @keyframes logo {
        from {transform: scale(1);}
        to {transform: scale(0.8);}
    }
}