:root {
    --color1: #000000;
    --color2: #555555;
    --background-image-header: linear-gradient(var(--color1), var(--color2));
    --background-image-footer: linear-gradient(var(--color2), var(--color1));
    --gap: 10px;
}



* {
    margin: 0;
    box-sizing: border-box;
}
  
body {
    font-family: sans-serif;
    font-size: 1.0em;
}
 
abbr {
    text-decoration: none;
}

main {
    max-width: 1000px;
    margin: 0 auto;
}

h2 {
    font-size: 1.4em;
    font-weight: 500;
    padding: 0px 0px 5px 0px;
}

.resume {
    display: grid;
    grid-template-areas:
        'header header header'
        'content content content'
        'footer footer footer';
    gap: var(--gap);
    background-color: white;
    padding: 10px;
    
}

.resume > div, header, footer {
    padding: 10px;
}
  
.header, .footer {
    border-radius: 8px;
    background-color: var(--color1);
    color: #ffffff;
    filter: drop-shadow(2px 3px 1px #776969);
}

.header {
    grid-area: header;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    background-image: var(--background-image-header);
}

.address, .menu {
    flex: 1;
    box-sizing: border-box;
    font-size: 1.2em;
}

.address {
    text-align: left;
    padding: 0px 0px 0px 10px;
    min-width: 300px;
}

.address > em {
    font-size: 2em;
    font-weight: 500;
}

.menu {
    text-align: right;
    color: white;
    padding: 0px 10px;
}

.menu li {
    list-style-type: none;
    padding: 2px 0px;
}
 
.menu li a {
    text-decoration: none;
    color: white;
    
}

.content {
    grid-area: content;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
}

.other, .history {
    text-align: left;
    box-sizing: border-box;
    padding: 0px 0px 0px 10px;
}

.other {
    flex: 1;
}

.history {
    flex: 2;
    border-left: 1px solid black;
}

article {
    padding: 0px 5px 10px 5px;
}

article h2 {
    padding: 5px 0px;
    filter: drop-shadow(1px 1px 1px #bbbbbb);
}

article p {
    padding: 5px 0px;
    font-size: 0.9em;
}

article li {
    list-style-type: none;
    padding: 5px 0px;
    font-size: .9em;
}

article li a {
    text-decoration: none;
    color: #000000;
}

.footer {
    grid-area: footer;
    text-align: center;
    background-image: var(--background-image-footer);
}

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

    .header {grid-area: header / span 3;}
    .footer {grid-area: footer / span 3;}
    .content {grid-area: content / span 3;}

    .address, .menu, .other, .history {
        flex: 100%;
        text-align: left;
        padding: 5px 10px;
    }

    .history {
        border-left: none;
    }
}