*{
    margin: 0;
    box-sizing:border-box;
}
header{
    margin:auto;
    padding: 3%;
    background-color: #123458;
    text-align: center;
    color: white;
}
/*Joyce's Part starts here (fonts and font sizing) & Paulina's Part starts here (applying background color and styling)*/
header{
    font-size: calc(2px + 1.5vw);
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
    line-height: 220%;
}
/*Same styling for all fonts, including JS styling*/
header p, footer, script, button {
    font-size: calc(2px + 1.5vw);
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
    color: white;
}
header p, footer {
    font-size: calc(2px + 1.5vw);
    font-family: 'Inconsolata', monospace;
    font-weight: 600;
}
#link-color, #link-color h3 a, #link-color footer p, #link-color footer a {
    color: white; ! important;
    font-size: 120%;
    text-decoration: none;
}
footer{
    margin:auto;
    padding: 2%;
    background-color: #123458;
    text-align: center;
    color: white; ! important;
}
button{
    background-color: #123458;
    font-family: 'Inconsolata', monospace;
    font-size: calc(2px + 1.5vw);
}
nav{
    font-size: calc(2px + 1.5vw);
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
}
body{
    font-size: calc(2px + 1.5vw);
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
    line-height: 220%;
}
/*Joyce's Part ends here*/
/*Allie's Part starts here: Done with help of the TA. I styled the images but was unsure of how they could be positioned. I got help with this.*/
#page-wrapper{
    width: 80vw;
    margin: 0 auto;
}




/*This is the positioning of the images*/
#images-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2% 0;
}
/*Positioning for Each group of images and text (Guildhall, Louvre and MET)*/
#one, #two, #three {
    width: 60%;
    height: 70%;
    margin-bottom: 2%;
}




/*Grouped class for each set of images for each museum*/
#container-one,
#container-two,
#container-three {
    position: relative;
    width: 100%;
    height: 50vh;
}
/*Positioning and opacity change for each set of images (when transitioning from image to image when hovering over)*/
#container-one img,
#container-two img,
#container-three img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    transition: opacity 0.5s ease;
    height: 50vh;
}




/*class for image to disappear when hovering over and z-index set so it goes to the back*/
.overlap {
    z-index: 2;
}




/*Z-index 3 for 1st Guildhall image to go to the back when hovering over it*/
#first-image:hover {
    z-index: 3;
}
/*Z-index 3 for 2nd Guildhall image for it to go on top of the 1st one when hovering over it*/
#fourth-image:hover {
    z-index: 1;
}
.overlap-one {
    z-index: 2;
}
#second-image:hover {
    z-index: 3;
}
#louvre-two {
    z-index: 1;
}




.overlap-two {
    z-index: 2;
}
#third-image {
    z-index: 3;
}
#met-two {
    z-index: 1;
}
/*when hovering over each set of images, this overlap will have an opacity of 0 for there to be a certain transition from image to image*/
#container-one:hover .overlap,
#container-two:hover .overlap-one,
#container-three:hover .overlap-two {
    opacity: 0;
}
/*Same styling for navigation section for all pages*/
/*Joyce's part starts here*/
nav{
    margin:auto;
    padding: 3%;
    background-color: #123458;
    text-align: center;
    border-width: 17px;
    border-style: solid;
    border-color: #123458;
    position: sticky;
    top: 0;
    z-index: 10;
}
nav li{
    display: inline;
    border-width: 10px;
    border-style: solid;
    padding: 0.3vw;
    border-color: white;
    background-color: white;
    border-radius: 150px;
}
/*Joyce's part ends here*/
/*For the color of the words to stay black*/
nav a{
    text-decoration:none;
    color: #123458;
}
main{
    margin:auto;
    padding: 2%;
    background-color: #4F709C;
    text-align: center;
    color: white;
}
main p{
    margin:auto;
    padding: 2%;
    text-align: center;
}
footer{
    margin:auto;
    padding: 2%;
    background-color: #123458;
    text-align: center;
    color: white;
}
/*General positioning for all images on page for them to be well organized*/
img{
    max-width: 70%;
    margin: auto;
    padding-bottom: 2%;
    padding-top: 2%
}
/*Styling and positioning for each link (a href="") of museum*/
main h3{
    border-width: 25px;
    border-style: solid;
    padding-top: 1%;
    padding-bottom: 1%;
    border-color: #123458;
    background-color: #123458;
    width: 40%;
    margin: auto;
}
main h4{
    border-width: 10px;
    border-style: solid;
    padding-top: 1%;
    padding-bottom: 1%;
    border-color: #123458;
    background-color: #123458;
    width: 70%;
    margin: 3% auto;
}
#link-wrapper, footer a{
    color: white;
}
#output{
    margin-top: 1.5%;
    font-size: 100%
}
#input{
    font-size: 70%;
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
}
a:visited {
    color: #123458;
}
@media screen and (max-width: 720px) {
    #page-wrapper {
        width: 100%;
    }
}