* {
    box-sizing: border-box;
    margin: 0;
}
body {
    background-image: linear-gradient(to bottom right, aqua, violet);
    font-family: Garamond, serif;
    display: grid;
    place-items: center;
}
#Container {
    margin: 2vh 3vw;
    padding: 2vw;
    background-color: rgb(110, 110, 255);
    border: 5px solid rgb(0, 0, 177);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    max-width: 1150px;
}
h1 {
    text-align: center;
    color: aqua;
    font-size: clamp(1rem, 9vw, 5rem);
}
nav {
    margin-top: 1rem;
    padding: .5rem 0;
    font-size: 1.5rem;
    background-color: rgb(100, 100, 231);
    border: 3px solid rgb(120, 248, 255);
    border-radius: 15px;
}
nav ul {
    padding-left: 0;
    margin-left: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
}
nav li {
    flex-grow: 1;
    flex-shrink: 1;
    margin: .5rem;
    padding: .5rem;
    list-style: none;
    background-image: linear-gradient(to bottom, rgb(175, 210, 255), rgb(255, 158, 255));
    border: 3px solid rgb(7, 212, 96);
    border-radius: 15px;
    height:3.5rem;
    font-family: 'Brush Script MT', cursive;
    box-shadow: 0 0 10px #000;
    text-align: center;
}
h2 {
    margin: .5rem 0;
    text-align: center;
    font-size: clamp(.5rem, 5vw, 3.8rem);
    
}
ul {
    padding-left: 0;
    margin-left: 0;
}
li {
    display: block;
    list-style: none;
}
.artwork {
    display: block;
    column-count: 2;
    column-gap: 1.5vw
}
img {
    max-width: 100%;
    border: .25rem solid pink;
    border-radius: calc(1.5vw + 1.5vh);
}
footer {
    text-align: center;
    padding: 1rem;
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: violet;
    border-top: 5px solid purple;
    border-bottom: 5px solid purple;
}

/*media queries*/

@media screen and (max-width: 835px) {
    nav {
        font-size: 1rem;
    }
    nav ul {
        flex-wrap: wrap;
    }
}
@media screen and (max-width: 426px) {
    nav li {
        padding: .25rem;
        height: 2.25rem;
    }
    .artwork {
        column-count: 1;
    }
}