* {margin: 0; padding: 0; border: 0; box-sizing: border-box;}

body {background-image:url('../Screenshots/CSS_images/hobby_forest.jpg'); background-size: cover; display: flex;}

.mainmenu {font-weight: bolder; font-size: medium; display: flex; justify-content: space-evenly; align-items: center; text-decoration: none; border-radius: 0px 0px 0px 40px;} 
.mainmenu a { background: linear-gradient(to right, #526760,#639e8a);border: solid black 1px; width: 13vw; margin: 10px; border-radius: 50px; text-align: center; padding: 5px;}
.mainmenu a:link, a:visited, a:active {color: #1c2726; text-decoration: none;}
.mainmenu a:hover {color: black; text-decoration: none; transform: scale(1.25)}

.heading {background: linear-gradient(to right, #526760,#639e8a); justify-items: center; border-radius: 0px 40px 40px 0px; font-size: x-large; color:#1c2726; text-shadow: -5px 5px 5px #526760; min-height:10vh; padding: 1%; font-family: 'Times New Roman', Times, serif;}

.text {font-size: medium; text-align: left;color:black; padding: 20px;}

.pictures {display: flex; justify-content: space-evenly; flex-wrap: wrap;}
.pictures img { width: 20vw; border-radius: 20px; box-shadow: 0px 0px 40px 2px black; border: 3px solid black; margin:10px; transition: opacity 1.2s ease; opacity: .6; margin: 25px;}
.pictures img:hover {opacity: 1; transform: scale(1.2)}

.footer {background-color: rgba(76, 76, 124, .75); border-radius: 0px 40px 40px 0px; text-align: center; min-height: 3vh; background: linear-gradient(to right, #344942,#639e8a)}


@media screen and (min-width: 320px) {
    body {flex-direction: column;}
    .logo_nav {display: flex; flex-direction: row;  background: linear-gradient(to bottom, #07412d,#b8dabe)}
    .logo {width: 20%; display:flex; justify-content: center;border-radius: 40px 0px 0px 0px;}
    .mainmenu {flex-direction: row; width: 80%;}
}

@media screen and (min-width: 950px) {
    body {flex-direction: row;}
    .logo_nav {display: flex; flex-direction: column; background: linear-gradient(to bottom, #07412d,#b8dabe)}
    .logo {width: 20vw; display:flex; justify-content: center;border-radius: 40px 0px 0px 0px;}
    .mainmenu {flex-direction:column; width: 20vw}
    .content {width: 80vw;}
}