*{
    box-sizing: border-box;
}

body{
    display: flex;
    font-family: monospace;
    flex-direction: column;
    align-content: center;
    background-color: black;
    color: white;
    margin: 0% 5% 0% 5%;
}

h1{
    font-family: monospace;
    font-size: 600%;
    font-weight: bold;
    text-align: center;
}

h2{
    font-family: monospace;
    font-size: 400%;
}

.article-body1{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#mona-lisa{
    max-width: 350px;
    max-height: fit-content;
    margin-right: 5%;
}

p{
    font-size: 120%;
}

.article2-suspects{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.suspects-img{
    position: relative;
    width: 100%;
    max-width: 800px;
    height: auto;
    overflow: hidden;
    margin-left: 5%;
  }
  
  #reveal-img {
    width: 100%;
    height: auto;
    filter: grayscale(100%);
    mask-image: radial-gradient(circle 120px at 0 0, black 0%, transparent 70%);
    mask-repeat: no-repeat;
    transition: filter 0.3s ease;
  }


.article2-rest{
    margin-top: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#video{
    width: 700px;
    height: 450px;
    margin-top: 3%;
}

.quote{
    text-align: center;
    margin: 5%;
    font-size: 150%;
}

/* I kept playing with the css of the iframe and was struggling to make the video present larger without changing the aspect ratio. I had to remove the height and width that was in the embeded iframe */

.gallery{
    text-align: center;
}

.carousel-img {
    height: 600px;
    width: auto;
    display: block;
    margin: 0 auto;
}

#prev-button, #next-button{
    background-color: #ff2525;
    color: black;
    margin: 1% 2% 1% 2%;
    padding: 1%;
    border-radius: 20%;
    font-family: monospace;
    font-weight: 800;
    margin-bottom: 5%;
}

#next-button{
    padding: 1% 2% 1% 2%;
}

#prev-button:hover, #next-button:hover {
    background-color: black;
    color: #ff2525;
}

footer{ 
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    color: white;
    margin: 2% 5% 2% 5%;
}

footer a{
    color: white;
    text-decoration: none;
}

footer a:hover{
    color:#cc1313;
}

.hover-red:hover{
    color:#ff2525;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

nav{
    margin: 2%;
}

.backtohome{
    color: red;
    font-size: 150%;
    text-decoration: none;
}

.backtohome:hover{
    font-size: 200%;
    font-weight: bolder;
}

.sources{
    background-color: #000000;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 7%;
}

.sources a{
    text-decoration: none; 
}

.sources a:hover{
    color:#cc1313
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 400%;
    }

    h2 {
        font-size: 200%;
    }

    /* FIXED class names here */
    .article-body1,
    .article2-suspects,
    .article2-rest {
        flex-direction: column;
        text-align: center;
    }

    .article-body1 img,
    .article2-suspects img,
    .article2-rest img, 
    #video {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .carousel-img {
        height: 300px;
        width: auto;
        display: block;
        margin: 0 auto;
    }
}