html {
    
    background-color: white;
}
body {
    margin: 0;
    padding: 0;
}

.header {
    min-height: 600px;
    min-width: 500px;
    grid-area: header;
    width: 100%;
    background: url("images/italy_header.jpg") no-repeat center;
    display: block;
    background-size: cover;
    overflow: hidden;
}

.content {
    grid-area: content;
    width: 70%;
    min-width: 500px;
    margin: 4em auto 2em auto;
    display: grid;
    grid-template-columns: 33% 33% 33%;
}
.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}
.column {
    flex: 50%;
    padding: 0 4px;
/*    max-width: 50%;*/
}
    
.column img {
    width: 100%;
    margin-top: 10px;
    vertical-align: middle;
}
.contentBackground {
    background-color: white;
}

.footer {
    width: 100%;
    grid-area: footer;
    margin: auto;
    justify-items: center;
    color: #546e7a;
    display: grid;
    grid-template-columns: 50% 55%;
}
.footerBackground {
    background-color: #263238;
    min-width: 500px;
}
.subscribe h6 {
    margin-bottom: 0;
    margin-top: 0.3em;
}
.socialFooter {
    padding: 50px 0 50px 0;
    
}
.socialFooter span {
    padding: 10px;
}
.about h2 {
    padding-top: 50px;
    margin-top: 0;
    margin-bottom: 5px;
    
}
.about h6 {
    margin-top: 0;
    
}
.about {
    color: white;
}
.about p {
    color: #ffd740;
    margin-top: 10px;
    margin-bottom: 0;
}
.aboutMe {
    
}
.subscribe {
    padding-top: 50px;
    font-size: 0.7em;
}
.subscribe span {
    color: white;
}
.subscribe input {
    font-size: 0.7em;
    margin-top: 0.7em;
    background-color: #263238;
    border: 1px solid #546e7a;
    border-radius: 3px;
    height: 2.5em;
    width: 20em;
    color: #546e7a;
}

.mainContainer {
    font-size: 1.5em;
/*    min-height: 500px;*/
    min-width: 500px;
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 500px auto auto;
    grid-gap: 10px;
    grid-template-areas:
      "header"
      "content"
      "footer";
}



.name {
    width: 17em;
    margin-top: 25px;
    font-size: 1.0em;
    color: white;
    float: left;
    margin-left: 7%;
}

.name span {
    color: #ffd740;
    font-size: 2em;
}
.social {
    margin-top: 25px;
    color: white;
    font-size: 1.0em;
    margin-right: 7%;
}
.social div {
    float: right;
    padding: 10px;
}

.social div:hover {
    animation-name: socialItem;
    animation-duration: 500ms;
/*    color: #ffd740;*/
    animation-fill-mode: both;
}

@keyframes socialItem {
   
    100% {
        color: #ffd740;
    }
}

.mainMenu {
    color: dimgray;
    position: fixed;
    right: 0;
    margin-top: 25px;
}

.mainMenuButton {
    background-color: #f5f5f5;
    border-top-left-radius: 1.0em;
    border-bottom-left-radius: 1.0em;
    padding: 0.5em 0.5em 0.5em 0.9em;
}

.mainMenuButton span {
    font-size: 1.2em;
}

.menuItems {
    position: absolute;
    top: 0;
    margin-left: 2.45em;
    padding-left: -2.0em;
    background-color: #f5f5f5;
    width: 8.0em;
}
.menuItems ul li {
/*    padding: 0.1em;*/
    padding-top: 0.6em;
    list-style-type: none;
}

.menuItems ul {
    margin-top: 0;
    margin-bottom: 0.6em;
    padding-left: 1.1em;
}

.menuItems ul li a {
    color: dimgray;
    
    text-decoration: none;
}
.menuItems ul li a:hover {
    text-decoration: underline;
}

.activeMenu {
    animation-name: menuOpen;
    animation-duration: 300ms;
    animation-fill-mode: both;
}
.mainMenu:hover {
    cursor: pointer;
}

.deactiveMenu {
    animation-name: menuClosed;
    animation-duration: 300ms;
    animation-fill-mode: both;
}

@keyframes menuOpen {
    0% {
        right: 0;
    }
    
    100% {
    right: 8.0em; 
    }
}

@keyframes menuClosed {
    0% {
    right: 8.0em; 
    }
    
    100% {
        right: 0;
    }
}

@media only screen and (max-width:900px) {
    .content {
        grid-template-columns: 50% 50%;
    }
}

@media only screen and (max-width:500px) {
    
    .footer {
    width: 100%;
    margin: auto;
    justify-items: center;
    grid-template-columns: 55% 35%;
    }
    .footerBackground {
        width: 100%;
    }
    .content {
        grid-template-columns: 100%;
    }    
    .column {
        flex: 100%;
    }
}