* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    body {
        padding-top: 1rem;
    }
    
    .nav-bar {
        width: 100%;
        height: 70px;
        background-color: #353b48;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: center;
    }
    
    .nav-bar img {
        height: 70px;
        width: 70px;
        margin-right: 5px;
    }
    
    .nav-bar h2 {
        line-height: 70px;
        text-align: center;
        color: white;
    }
    
    .side-bar {
        width: 20%;
        height: 100vh;
        background-color: #353b48;
        position: fixed;
        top: 0;
        left: -100%;
        margin-top: 70px;
        transition: 1s;
        -webkit-transition: 1s;
        -moz-transition: 1s;
        -ms-transition: 1s;
        -o-transition: 1s;
    }
    
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    ul li {
        color: white;
        border-bottom: 2px solid rgba(255, 255, 255, .1);
    }
    
    ul li a {
        display: block;
        color: white;
        text-decoration: none;
        text-transform: uppercase;
        padding: 20px;
    }
    
    ul li a:hover {
        background-color: #dcdde1;
        color: black;
    }
    
    ul li a:hover i {
        background-color: #dcdde1;
        color: black;
    }
    
    a i {
        font-size: 18px;
        color: white;
        margin-right: 20px;
    }
    
    .show-btn,
    .hide-btn {
        position: fixed;
        font-size: 30px;
        color: white;
        transition: .4s;
        top: 20px;
        left: 20px;
    }
    
    .hide-btn {
        opacity: 0;
    }
    
    #chk {
        position: absolute;
        visibility: hidden;
        z-index: -100;
    }
    
    #chk:checked~.side-bar {
        left: 0;
    }
    
    #chk:checked~.show-btn {
        opacity: 0;
    }
    
    #chk:checked~.hide-btn {
        opacity: 1;
    }
    
    #chk:checked~.content {
        width: 100%;
    }
    
    .content {
        float: right;
        width: 100%;
        transition: .7s;
        padding: 20px;
    }
    
    .content img {
        width: 100%;
        max-width: 600px;
        display: block;
        margin: auto;
        margin-top: 50px;
    }
    
    .content p {
        text-align: justify;
        padding-top: 1rem;
    }
    
    .social-icon {
        margin-top: 180px;
        display: flex;
        justify-content: space-evenly;
        border-top: 2px solid rgba(255, 255, 255, .1);
        border-bottom: 2px solid rgba(255, 255, 255, .1);
    }
    
    .social-icon i {
        padding: 10px 0;
        font-size: 30px;
        color: white;
        float: left;
    }
    
    .fa-facebook-square:hover {
        color: blue;
    }
    
    .fa-youtube-square:hover {
        color: rgb(247, 4, 4);
    }
    
    .fa-instagram:hover {
        color: rgb(238, 10, 105)
    }
    
    @media (max-width: 500px) {
        .nav-bar {
            width: 100%;
            height: 70px;
            background-color: #2f3640;
            position: fixed;
            top: 0;
            display: flex;
            justify-content: center;
        }
        .nav-bar img {
            height: 70px;
            width: 70px;
            margin-right: 5px;
        }
        .nav-bar h2 {
            display: none;
        }
        .side-bar {
            width: 100%;
            height: 100vh;
            background-color: #353b48;
            position: fixed;
            top: 0;
            left: -100%;
            margin-top: 70px;
            transition: .7s;
        }
        ul {
            list-style: none;
        }
        ul li {
            border-bottom: 2px solid rgba(255, 255, 255, .1);
        }
        ul li a {
            display: block;
            color: white;
            text-decoration: none;
            text-transform: uppercase;
            padding: 20px;
        }
        .show-btn,
        .hide-btn {
            position: fixed;
            font-size: 30px;
            color: white;
            line-height: 70px;
            transition: .4s;
            top: 0px;
            left: 20px;
        }
        .hide-btn {
            opacity: 0;
        }
        #chk {
            position: absolute;
            visibility: hidden;
            z-index: -100;
        }
        #chk:checked~.side-bar {
            left: 0;
        }
        #chk:checked~.show-btn {
            opacity: 0;
        }
        #chk:checked~.hide-btn {
            opacity: 1;
        }
        #chk:checked~.content {
            width: 80%;
        }
    }