body {
    display: grid;
    justify-content: center;
    background: url(images/green-3.jpg);
    background-attachment: fixed;
}
 
a {text-decoration: none;}
a:hover {text-decoration: underline;}

.home-button {
    position: fixed;
    left: 20px;
    top: 20px;
    & h3 {color: aliceblue; text-align: center; font-family: 'Courier New', monospace; font-weight: bold;}
    & a {text-decoration: none;}
    & img {max-width: 75px;}
}

.green-arrow {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.green-arrow:hover, .home-button:hover {
    scale: 1.2; transition-duration: 0.7s;
}

.museum-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 1000px;
}

.mus-logo {
    grid-column: 3 / 13;
    & img {width: 100%;}
    & img:hover {rotate: 180deg; transition-duration: 1.5s;}
}
nav {
    display: flex;
    flex-direction: column;
    grid-column: auto / span 2;
}


.nav-item {
    border-bottom: solid 1px rgb(224, 168, 128);
    padding: 7px;
    & h4 {margin: 0px;}
}

nav a {
    text-decoration: none;
    color: rgb(224, 168, 128);
    background: rgb(87, 39, 5);
}

nav a:hover {
    color: rgb(87, 39, 5);
    background: radial-gradient(circle,rgba(255, 210, 112, 1) 1%, rgba(255, 187, 61, 1) 100%);
    transition-duration: 0.s;
}

.nav-active {
    background: radial-gradient(circle,rgba(255, 210, 112, 1) 1%, rgba(255, 187, 61, 1) 100%);
    & h4 {color: rgb(87, 39, 5);}
}

nav img {
    width: 100%;
}

main {
    grid-column: auto / span 10;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr auto;
    background: antiquewhite;
}

.item-text {
    grid-column: auto / span 8;
    padding: 0px 0px 0px 20px;
    border: solid 1px rgb(224, 168, 128);
    & h3 {text-align: left;}
    & p {text-align: justify;}
}

.item-image {
    grid-column: auto / span 4;
    padding: 20px 20px 20px 20px;
    border: solid 1px rgb(224, 168, 128);
}

.archives-image {
    grid-column: auto / span 2;
    padding: 15px;
}

.archives-image img {
    width: 100%; border: solid saddlebrown 1px;
}

.archives-image img:hover {
    transform: scale(1.8);
}

.item-image img {width: 100%; border: solid saddlebrown 1px;}
.item-image img:hover {scale: 1.02; transition-duration: 0.5s;}

footer {
    grid-column: 3 / 13;
    text-align: center;
    background: black;
    min-height: 40px;
    padding-top: 20px;
    & a {color: coral; text-decoration: none;}
    & a:hover {text-decoration: underline;}
}




@media only screen and (width < 1100px) {
    .museum-container {width: 90svw;}
    nav {grid-column: auto / span 12;}
    main {grid-column: auto / span 12;}
    .archives-image {grid-column: auto / span 12; padding: 15px;}
    .item-text {grid-column: auto / span 12; padding: 0px 20px 0px 20px;}
    .item-image {grid-column: 3 / 10; padding: 20px 20px 20px 20px;}
    .green-arrow {display: none;}
    .mus-logo {grid-column: auto / span 12;}
    footer {grid-column: auto / span 12;}
    nav img {display: none;}
}