* {
    box-sizing: border-box;
  }
  
html{
    scroll-behavior: smooth;
}

#main-title{
    background-color: black;
    color: white;
    padding: 0px;
    border-radius: 5px;
    margin-right: 50%;
}

#content{
     margin-top: 10rem;
     margin-bottom: 10rem;
 } 
  /* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
font-size: 50px;
justify-content: center;
align-items: center;
text-align: center;
}

.hyperlink{
    background-color: black;
    color: yellow;
    text-decoration: inherit;
    text-underline-position: below;
    font-weight: bold;
    border-bottom: 2px solid black;
}

.column p{
    margin-top: 25%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.column img{
    width: 90%;
}

#sub-sections{

    text-align: left;
    font-size: larger;
    margin-top: 100px;
    margin-bottom: 100px;

}

#section-images{
    justify-content: center;
    text-align: center;
    align-items: center;
}


#middle-text {
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    /* line-height: 100px; */

    /* border: 2px dashed #f69c55; */
  }
#middle-text span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

#section-images img{
    width: 50%;
    /* border: solid 1px black; */
}

.image-container{
    margin-bottom: 1rem;
}

#section-images p{
    font-size: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.column-box-text-aligned-left{
    margin-right: 20px;
    margin-left: 20px;
}

.column-box-text-aligned-left #column-title{
    font-size: xx-large;
}

.column-box-text-aligned-left #column-text{
    font-size: large;
    line-height: 30px;
}

#image-container{
    margin-top: 10rem;
    margin-bottom: 10rem;
}

.wrapper {
    display: grid;
    margin: 20px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: minmax(150px, 1fr);
    grid-gap: 2rem;
    grid-auto-flow: dense;
    justify-content: center;
    text-align: center;
}   
.wrapper img{
    width: 100%;
}

.wrapper-SARS {
    display: grid;
    margin: 20px;
    padding-left: 20%;
    padding-right: 20%;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: minmax(150px, 1fr);
    grid-gap: 2rem;
    grid-auto-flow: dense;
    justify-content: center;
    text-align: center;
}   
.wrapper-SARS img{
    width: 100%;
}

/* Audio-Reactive Page */
.video-content{
    justify-content: center;
    text-align: center;
    align-items: center;

}
/* Singe image */

.single-image-content{
    justify-content: center;
    text-align: center;
    align-items: center;
}

.youtube-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30%;
    height:0;
    overflow:hidden;
}

.youtube-container iframe, .youtube-container object, .youtube-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    align-items: center;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        font-size: 30px;
        align-items: center;
        justify-content: center;
        text-align: center;
        }
    #section-images p{
            font-size: 20px;
    }

    .wrapper-SARS {
        display: grid;
        margin: 20px;
        padding-left: 0%;
        padding-right: 0%;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-auto-rows: minmax(150px, 1fr);
        grid-gap: 2rem;
        grid-auto-flow: dense;
        justify-content: center;
        text-align: center;
    }   

    .column-box-text-aligned-left{
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .column-box-text-aligned-left #column-text{
        text-align: left;
    }
    #middle-text {
        width : 90%;
    }

    #main-title{
        text-align: center;
        margin-right: 0%;
    }

}