/* Universal */
            
            #nav-bar {
                background-color: #708090;
                color: black;
                border-bottom: 10px solid;
                border-color: #abff2e;
            }
            
            .nav-link:hover {
                background-color: black;
                color: white;
            }
            
            .nav-link a:hover {
                color: white;
            }
            
            #contact {
                color: black;
                border-left: 4px solid black;
                border-right: 4px solid black;
                padding-left: 2px;
                padding-right: 2px;
            }
            
            #contact:hover {
                color: white;
            }
            
            #eow {
                border-right: 4px solid black;
                color: black;
            }
            
            #eow:hover {
                color: white;
            }
            
            #about {
                border-left: 4px solid black;
                color: black;
                padding-left: 4px;
                padding-right: 4px;
            }
            
            #about:hover {
                color: white;
            }
            
            #footer {
                width: 100%;
                max-height: 1000px;
                height: fit-content;
                padding: 20px;
                background-color: black;
                margin-bottom: 0%;
                position: absolute;
                overflow: hidden;
            }
            
            #linkedIn {
                height: 30px;
                width: 30px;
            }
            
            #slide1,
            #slide3,
            #slide2 {
                width: inherit;
                height: 400px;
            }
            
            .carousel-inner {
                width: 75%;
                height: 400px;
                background-color: slategrey;
            }
            
            #pre:hover,
            #nxt:hover {
                background-color: black;
                color: slategrey;
            }
            
            #nxt,
            #pre {
                z-index: 0;
                color: slategrey;
            }
            
            #caption1,
            #caption3 {
                color: black;
                text-align: right;
            }
            
            #logo {
                right: 0;
                height: 40px;
                width: auto;
            }
            
            .container {
                overflow: hidden;
            }
            
            .column {
                min-width: 150px;
                /*inline-block lets block elements keep their widths and heights, but lines them up in a row.*/
                display: inline-block;
                vertical-align: top;
            }
            
            .container h4 {
                color: slategrey;
            }
            
            #sl {
                height: 100%;
                width: 100%;
            }
            
            .carousel-inner {
                height: 100%;
            }
            
            .carousel-item.active {
                height: 100%;
            }
            /* Home Page */
            
            #welcome-div {
                background-color: black;
                color: white;
                display: inline-block;
                width: 100%;
                text-align: center
            }
            
            #second-div {
                display: inline-block;
                background-color: slategrey;
                width: 100%;
                padding: 5px;
            }
            
            #second-div #par {
                padding: 5em;
                color: rgb(83, 37, 3);
                size: 10em;
                text-align: center;
            }
            
            #Portfolio {
                text-align: center;
                color: wheat;
                size: 15em;
                background-color: black;
            }
            
            #slogan {
                color: slategrey;
            }
            /* About */
            
            .bodyContainer {
                width: 100%;
                height: fit-content;
                border-bottom: 10px solid #abff2e;
                background-color: slategrey;
                display: inline-block;
            }
            
            .leftColumn {
                height: 100%;
                min-height: 100%;
                width: 50%;
                display: inline-block;
                background-color: black;
                padding-bottom: 10em;
                padding-top: 7em;
            }
            
            .leftColumn h3 {
                color: slategrey;
                size: 30em;
                margin-left: 1em;
            }
            
            .leftColumn h6 {
                color: slategrey;
                size: 1000em;
                margin-left: 2em;
            }
            
            .rightColumn {
                height: 100%;
                min-height: fit-content;
                width: 50%;
                float: right;
                background-color: slategrey;
                padding-bottom: 10em;
                padding-top: 7em;
            }
            
            #workhistory {
                width: 100%;
                height: auto;
                padding-left: 2em;
                padding-bottom: 3em;
            }
            /* * {
        box-sizing: border-box
    } */
            /* Example of work */
            
            #videoCollage {
                width: 100%;
                height: 750px;
                display: inline-block;
            }
            /* .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
    }
    
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    } */
            
            #slide10,
            #slide30,
            #slide20 {
                width: 70%;
                height: 600px;
                margin-left: 15%;
                margin-right: 14%;
            }
            
            .carousel-inner2 {
                width: 100%;
                height: 700px;
                background-color: slategrey;
            }
            
            #linktopage {
                text-align: center;
                color: slategrey;
                background-color: black;
                padding-bottom: 2em;
            }
            
            #exampleofWorkDiv {
                background-color: black;
                color: slategrey;
                display: inline-block;
                text-align: center;
            }
            
            #descriptionBox {
                border: 1em #adff2f solid;
            }
            
            #descriptionBox p {
                text-align: center;
            }
            
            #ViewMore {
                margin-bottom: 2em;
            }
            
            #eowsubpageContainer {
                text-align: center;
            }
            
            #eowsubpageBody {
                background-color: slategrey;
            }
            
            #sl {
                height: 100%;
                width: 100%;
            }
            
            .loader-wrapper {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: #242f3f;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            .loader {
                display: inline-block;
                width: 30px;
                height: 30px;
                position: relative;
                border: 4px solid #Fff;
                animation: loader 2s infinite ease;
            }
            
            @keyframes loader {
                0% {
                    transform: rotate(0deg);
                }
                25% {
                    transform: rotate(180deg);
                }
                50% {
                    transform: rotate(180deg);
                }
                75% {
                    transform: rotate(360deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
            
            @keyframes loader-inner {
                0% {
                    height: 0%;
                }
                25% {
                    height: 0%;
                }
                50% {
                    height: 100%;
                }
                75% {
                    height: 100%;
                }
                100% {
                    height: 0%;
                }
            }
            
            .sidenav {
                height: 100%;
                width: 0;
                position: fixed;
                z-index: 1;
                top: 0;
                left: 0;
                background-color: #111;
                overflow-x: hidden;
                transition: 0.5s;
                padding-top: 60px;
            }
            
            .sidenav a {
                padding: 8px 8px 8px 32px;
                text-decoration: none;
                font-size: 25px;
                color: white;
                display: block;
                transition: 0.3s;
            }
            
            .sidenav a:hover {
                color: lightslategray;
            }
            
            .sidenav .closebtn {
                position: absolute;
                top: 0;
                right: 25px;
                font-size: 36px;
                margin-left: 50px;
            }
            
            @media screen and (max-height: 450px) {
                .sidenav {
                    padding-top: 15px;
                }
                .sidenav a {
                    font-size: 18px;
                }
            }
            
            #by span {
                opacity: 0;
            }
            
            #mypiccontainer {
                float: right;
                top: 35%;
                padding-top: 10vh;
            }
            
            #mypic {
                height: 50vh;
                width: 50vh;
                opacity: 45%;
                border-radius: 33%;
                border: #abff2e dashed 2ch;
            }
            
            #textcontainer {
                display: inline-block;
                position: absolute;
                top: 65%;
                animation: bounce 3s linear;
                color: white;
                z-index: 1;
                height: 100%;
            }
            
            #textcontainer2 {
                display: inline-block;
                position: absolute;
                top: 80%;
                bottom: 20px;
                margin-bottom: 10em;
                text-align: center;
                height: 100%;
            }
            
            #content {
                display: block;
                height: 150ch;
                width: 100%;
                min-height: 100vh;
                background-image: url(../img/logo.PNG);
                background-color: #708090;
                background-size: contain;
                background-blend-mode: darken;
                background-repeat: no-repeat;
                position: relative;
                background-position: center;
                background-position-y: 40%;
                z-index: -1;
            }
            
            @keyframes bounce {
                0% {
                    transform: translateY(0);
                    opacity: 15%;
                }
                50% {
                    opacity: 1;
                }
                70% {
                    opacity: 1;
                }
                100% {
                    transform: translateY(-70vh);
                    opacity: 0;
                }
            }