/*CSS Variables */
:root {
    --primary: ##ddd;
    --dark: #333;
    --light: #fff;
    --shadow: 0 5px 10px rgba(104, 104, 104, 0.8);
}

html {
    box-sizing: border-box;
    font-family: sans-serif;
}

* {
    margin: 0;
    padding: 0;
}
body {
    background: #ccc;
    margin: 30px 50px;
    line-height: 1.4rem;

}
header {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    border: 5px double white;
    background: var(--dark);
    color: var(--light);

}
header h1 {
	 font-size: 1.2rem;
	 padding: 10px;
}
.gallery {
    margin-top: 100px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-flow: dense;

}
.gallery h1 {
    text-align: center;
    margin-bottom: 20px;
}
.gallery img {
    width: 100%;
    box-shadow: var(--shadow);
}
nav {
    height: 40px;
    margin: 0 auto ;
    padding-top:20px;
    width: 60%;
    background: #ccc;
    display: grid;
    /*grid-template-columns: repeat(auto-fit, 200px);*/
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
}
.groupTitle {
	margin-top: 50px;
	margin-bottom: -50px;
}
footer {
	 position: fixed;
    height: 40px;
    left: 0;
    bottom: 0;
    width: 100%;
    margin-top: 20px;
    padding-top: 20px;
    background-color: lightgray;
    text-align: center;
}

@media (max-width: 1800px) {
	 nav {
	     grid-template columns: 1fr;	    
    }
}

@media (min-width: 1080px){
    img:hover {
        transform: scale(1.5);
    }
     nav {
	     grid-template columns: 1fr;	    
    }
}