@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', monospace;
}
html,body{
    display: flex;
    flex: 1;
    height: 100%;
}

main{
    width: 100%;
}

.photoandvideo{
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    height: 100vh;
}


.photo{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 50%;
    height: 100%;
    background-color: #ff4c4c;
    transition: 0.5s;
    text-decoration: none;
}

.video{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 50%;
    height: 100%;
    background-color: #1ac520;
    transition: 0.5s;
    text-decoration: none;
}

.photo:hover{

    border:3vh solid  #ff4c4c;
    background-color: whitesmoke;
    cursor: pointer;
    transition: 0.5s;
}

.video:hover{
    border:3vh solid  #1ac520;
    background-color: whitesmoke;
    cursor: pointer;
    transition: 0.5s;
}

.photo h1,
.video h1{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 3em;
    letter-spacing: 2px;
    font-weight: 700;
    text-align: center;
    color: whitesmoke;
    transition: 0.5s;
}


.photo h1:hover{
    color:#ff4c4c;
    transition: 0.5s;
}
.video h1:hover{
    color:  #1ac520;
    transition: 0.5s;
}


#Photos{

    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}


.PhotosIntroduction{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.PhotosIntroduction h1{
    font-size: 3em;
    text-align: center;
}

.PhotoContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.box-1{
    width: 300px;
    height: 300px;
    margin:10px;
    background-image: url("photos/lasse1.JPG");
    background-size: cover;
    background-position: center;
    vertical-align: middle;
}

.box-2{
    width: 300px;
    height: 300px;

    margin:10px;
    background-image: url("photos/lasse3.JPG");
    background-size: cover;
    background-position: center;
    vertical-align: middle;

}

.box-3{
    width: 620px;
    height: 300px;

    margin:10px;
    background-image: url("photos/ergofinger1.jpg");
    background-size: cover;
    background-position: center;
    vertical-align: middle;
}

.box-4{
    width: 300px;
    height: 300px;
    margin:10px;
    background-image: url("photos/daniela1.JPG");
    background-size: cover;
    background-position: right;
    vertical-align: middle;
}
.box-5{
    width: 300px;
    height: 300px;

    margin:10px;
    background-image: url("photos/linnanmaki1.jpg");
    background-size: cover;
    background-position: center;
    vertical-align: middle;
}
.box-6{
    width: 620px;
    height: 300px;

    margin:10px;
    background-image: url("photos/norja2.JPG");
    background-size: cover;
    background-position: center;
    vertical-align: middle;
}
.box-7{
    width: 300px;
    height: 300px;

    margin:10px;
    background-image: url("photos/armeija1.JPG");
    background-size: cover;
    background-position: center;
    vertical-align: middle;

}

.box-8{
    width: 300px;
    height: 300px;

    margin:10px;
    background-image: url("photos/montsaint1.jpg");
    background-size: cover;
    background-position: center;
    vertical-align: middle;

}

.box-9{
    width: 620px;
    height: 300px;

    margin:10px;
    background-image: url("photos/finnair1.jpg");
    background-size: cover;
    background-position: center;
    vertical-align: middle;

}

.box-10{
    width: 300px;
    height: 300px;

    margin:10px;
    background-image: url("photos/marko1.JPG");
    background-size: cover;
    background-position: center;
    vertical-align: middle;

}

.box-11{
    width: 300px;
    height: 300px;

    margin:10px;
    background-image: url("photos/coldplay1.JPG");
    background-size: cover;
    background-position: center;
    vertical-align: middle;

}

.box-12{
    width: 300px;
    height: 300px;

    margin:10px;
    background-image: url("photos/helsinki1.jpg");
    background-size: cover;
    background-position: center;
    vertical-align: middle;

}



/*------------------------------*//*------------------------------*//*------------------------------*/



#Videos{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.Videos{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.VideosIntroduction h1{
    font-size: 3em;
    text-align: center;
}

.VideoContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.videobox-1{
    width: 45%;
    height: 300px;
    margin:10px;
}

.videobox-2{
    width: 45%;
    height: 300px;
    margin:10px;
}
.videobox-3{
    width: 45%;
    height: 300px;
    margin:10px;
}

.videobox-4{
    width: 45%;
    height: 300px;
    margin:10px;
}


footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 3vh;
}

.copyrightText{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content:  center;
    width: 100%;
    font-size: 0.75em;

}

@media only screen and (max-width: 900px){


    .photoandvideo{
        flex-direction: column;
    }

    .photo,
    .video{
        width: 100%;
        height: 50%;
    }


}


@media only screen and (max-width: 650px){
    .box-1,
    .box-2,
    .box-3,
    .box-4,
    .box-5,
    .box-6,
    .box-7,
    .box-8,
    .box-9,
    .box-10,
    .box-11,
    .box-12
    {
        width: 230px;
        height: 230px;
    }

    .videobox-1,
    .videobox-2,
    .videobox-3,
    .videobox-4{
        width: 230px;
        height: 230px;
    }
}

@media only screen and (max-width: 500px){
    .box-1,
    .box-2,
    .box-3,
    .box-4,
    .box-5,
    .box-6,
    .box-7,
    .box-8,
    .box-9,
    .box-10,
    .box-11,
    .box-12{
        width: 180px;
        height: 180px;
    }
    .videobox-1,
    .videobox-2,
    .videobox-3,
    .videobox-4{
        width: 100%;
        height: 250px;
    }

}


@media only screen and (max-width: 400px){
    .box-1,
    .box-3,
    .box-4,
    .box-6,
    .box-7,
    .box-9,
    .box-10,
    .box-12{
        width: 100%;
        height: 200px;
    }

    .box-11{
        width: 100%;
        height: 300px;
    }


    .box-2,
    .box-5,
    .box-8,
    .box-12{
        width: 100%;
        height: 500px;
    }

}