body{
    background-color: #dff3fd;
}
.title{
    background-color: #000000;
    color: #ffffff;
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 1rem;
}
.title h1{
    letter-spacing: 1em;
}
.title h1 span{
color: #ff0000;
}
.menu-bar{
    margin: auto;
}
.navbar-light .navbar-nav .nav-link {
    color: #000000;
    padding: .5rem 2.5rem;
    font-weight: 500;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active {
    color: #ff0000;
}
.navbar-expand-lg .navbar-collapse {
    justify-content: center;
}
section{
    min-height: 650px;
}
.side-menu {
    float: right;
}
.side-menu a {
    background-color: #1bc1f3;
    color: #ffffff;
    display: block;
    padding: 10px;
    text-decoration: none;
    font-weight: 500;
}
.side-menu a:hover , .side-menu a.active{
    color: #000000;
}
.red-box-div{
    display: flex;
    justify-content: center;
    align-items: center;
}
.red-box{
    background-color: #ff0000;
    color: #ffffff;
    width: 100px;
    height: 80px;
    font-weight: 600;
    padding: 1.5rem 1rem;
    text-align: center;
}
.red-link{
    color:#a63437;
    font-weight: 500;
    text-decoration: none;
}
.red-link:hover{
    color:#000000;
}
.red-text{
    color:#ff0000;
    font-weight: 500;
}
.blue-text{
    color:#31a2db;
    font-weight: 500;
}
.vertical-div{
    display: flex;
    justify-content: center;
}
.vertical{
    writing-mode: vertical-lr;
    text-orientation: mixed;
    vertical-align: middle;
}
.vertical-180-red{
    transform: rotate(180deg);
    color: #ff0000;
}
.right-side-menu {
    width: 150px;
    float: right;
}
.right-side-menu a, .resources a {
    color: #000000;
    display: block;
    margin: 10px;
    padding: 10px;
    border: 2px solid #aee9fd;
    text-decoration: none;
    font-weight: 500;
}
.resources a {
    width: 30%;
    height: 150px;
    float: left;
}
.right-side-menu a:hover , .right-side-menu a.active, .resources a:hover{
    color: #aee9fd;
}
.footer{
    background-color: #000000;
    color: #ffffff;
    margin: auto;
}
@media only screen and (max-width: 600px) {
    .title{
        width: 100%;
        padding: 0.2rem;
    }
    .title h1{
        letter-spacing: 0.2em;
    }
}

@media only screen and (min-width: 600px) {
    .title{
        width: 100%;
        padding: 0.2rem;
    }
    .title h1{
        letter-spacing: 0.2em;
    }
}
 
@media only screen and (min-width: 768px) {
    .title{
        width: 80%;
        padding: 1rem;
    }
    .title h1{
        letter-spacing: 1em;
    }
} 
  
@media only screen and (min-width: 992px) {

} 
  
@media only screen and (min-width: 1200px) {
    
}