body{
    background-image: url(../images/history_background.jpg);
    height: 100%;
    background-position: center;
}
.container{
    background-color: rgb(78, 78, 78);
    opacity: 0.95;
}
.first_paragraph{
    width: 100%;
    height: 100%;
    display: flex;
}
.first_paragraph_text{
    float: left;
    height: 100%;
    width: 50%;
}
.first_paragraph_image{
    float: right;
    width: 50%;
    height: 100%;
}
#img{
    width: 85%;
    height:auto;
}
.first_paragraph_text>p{
    padding-left: 30px;
    font-size: 2em;
    text-align: left;
    color:white;
}
.first_paragraph_text>aside{
    background-color: grey;
    width: 40%;
    color:white;
    margin-left: 50%;
    margin-bottom: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    border:rgb(48, 32, 32);
    border-width: 1px;
    border-radius: 10px;
    border-style: solid;
    box-shadow: 2px 4px black;
    font-size: 100%;
}
figcaption{
    color:white;
    width: 100%;
    font-size: 100%;
}
.line{
    margin-top:3%;
}
video{
    width: 100%;
    height: 80%;
    object-fit: fill;
}
.video_section{
    width: 100%;
    height: 100%;
    padding-top: 1%;
}
.video_container{
    width: 80%;
    height: 80%;
    margin: auto;
}
.video_section>p>a:hover{
    color:rgb(253, 131, 131);
}
.video_section>p>a:link {
    color: rgb(255, 255, 255);
}
.video_section>p>a:visited {
    color: rgb(255, 158, 158);
}
.video_section>p>a:active {
    color: rgb(0, 204, 255);
}
@media only screen and (min-width: 600px) {
    body{
        background-image: url(../images/history_background.jpg);
        height: 100%;
        background-position: center;
    }
    .container{
        background-color: rgb(78, 78, 78);
        opacity: 0.95;
    }
    .first_paragraph{
        width: 100%;
        height: 100%;
        display: flex;
    }
    .first_paragraph_text{
        float: left;
        height: 100%;
        width: 50%;
    }
    .first_paragraph_image{
        float: right;
        width: 50%;
        height: 100%;
    }
    #img{
        width: 100%;
        height:auto;
    }
    .first_paragraph_text>p{
        padding-left: 30px;
        font-size: 100%;
        text-align: left;
        color:white;
    }
    .first_paragraph_text>aside{
        background-color: grey;
        width: 40%;
        color:white;
        margin-left: 50%;
        margin-bottom: 3%;
        padding-top: 2%;
        padding-bottom: 2%;
        padding-left: 2%;
        padding-right: 2%;
        border:rgb(48, 32, 32);
        border-width: 1px;
        border-radius: 10px;
        border-style: solid;
        box-shadow: 2px 4px black;
    }
    figcaption{
        color:white;
        width: 100%;
        font-size: 100%;
    }
    .line{
        margin-top: 3%;
    }
    video{
        width: 100%;
        height: 80%;
        object-fit: fill;
    }
    .video_section{
        width: 100%;
        height: 100%;
        padding-top: 1%;
    }
    .video_container{
        width: 80%;
        height: 80%;
        margin: auto;
    }
    .video_section>p>a:hover{
        color:rgb(253, 131, 131);
    }
    .video_section>p>a:link {
        color: rgb(255, 255, 255);
    }
    .video_section>p>a:visited {
        color: rgb(255, 158, 158);
    }
    .video_section>p>a:active {
        color: rgb(0, 204, 255);
    }
}
@media only screen and (min-width: 768px) {
    body{
        background-image: url(../images/history_background.jpg);
        height: 100%;
        background-position: center;
    }
    .container{
        background-color: rgb(78, 78, 78);
        opacity: 0.95;
    }
    .first_paragraph{
        width: 100%;
        height: 100%;
        display: flex;
    }
    .first_paragraph_text{
        float: left;
        height: 100%;
        width: 50%;
    }
    .first_paragraph_image{
        float: right;
        width: 50%;
        height: 100%;
    }
    #img{
        width: 100%;
        height:auto;
    }
    .first_paragraph_text>p{
        padding-left: 30px;
        font-size: 100%;
        text-align: left;
        color:white;
    }
    .first_paragraph_text>aside{
        background-color: grey;
        width: 40%;
        color:white;
        margin-left: 50%;
        margin-bottom: 3%;
        padding-top: 2%;
        padding-bottom: 2%;
        padding-left: 2%;
        padding-right: 2%;
        border:rgb(48, 32, 32);
        border-width: 1px;
        border-radius: 10px;
        border-style: solid;
        box-shadow: 2px 4px black;
    }
    figcaption{
        color:white;
        width: 100%;
        font-size: 100%;
    }
    .line{
        margin-top: 3%;
    }
    video{
        width: 100%;
        height: 80%;
        object-fit: fill;
    }
    .video_section{
        width: 100%;
        height: 100%;
        padding-top: 1%;
    }
    .video_container{
        width: 80%;
        height: 80%;
        margin: auto;
    }
    .video_section>p>a:hover{
        color:rgb(253, 131, 131);
    }
    .video_section>p>a:link {
        color: rgb(255, 255, 255);
    }
    .video_section>p>a:visited {
        color: rgb(255, 158, 158);
    }
    .video_section>p>a:active {
        color: rgb(0, 204, 255);
    }
}
@media only screen and (min-width: 992px) {
    body{
        background-image: url(../images/history_background.jpg);
        height: 100%;
        background-position: center;
    }
    .container{
        background-color: rgb(78, 78, 78);
        opacity: 0.95;
    }
    .first_paragraph{
        width: 100%;
        height: 100%;
        display: flex;
    }
    .first_paragraph_text{
        float: left;
        height: 100%;
        width: 50%;
    }
    .first_paragraph_image{
        float: right;
        width: 50%;
        height: 100%;
    }
    #img{
        width: 85%;
        height:auto;
    }
    .first_paragraph_text>p{
        padding-left: 30px;
        font-size: 2em;
        text-align: left;
        color:white;
    }
    .first_paragraph_text>aside{
        background-color: grey;
        width: 40%;
        color:white;
        margin-left: 50%;
        margin-bottom: 3%;
        padding-top: 2%;
        padding-bottom: 2%;
        padding-left: 2%;
        padding-right: 2%;
        border:rgb(48, 32, 32);
        border-width: 1px;
        border-radius: 10px;
        border-style: solid;
        box-shadow: 2px 4px black;
        font-size: 100%;
    }
    figcaption{
        color:white;
        width: 100%;
        font-size: 100%;
    }
    .line{
        margin-top: 3%;
    }
    video{
        width: 100%;
        height: 80%;
        object-fit: fill;
    }
    .video_section{
        width: 100%;
        height: 100%;
        padding-top: 1%;
    }
    .video_container{
        width: 80%;
        height: 80%;
        margin: auto;
    }
    .video_section>p>a:hover{
        color:rgb(253, 131, 131);
    }
    .video_section>p>a:link {
        color: rgb(255, 255, 255);
    }
    .video_section>p>a:visited {
        color: rgb(255, 158, 158);
    }
    .video_section>p>a:active {
        color: rgb(0, 204, 255);
    }
}