html{
    height: 100%;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(../img/SimpleLogo.png);
    background-repeat: space;
    background-size: 110px;
    max-width: 99%;
}

.content{
    margin-left:15px;
}


.fa{
    font-size:24px;
}

.row{
    color:white;
    margin-top: 20px;
}

section{
    margin-top: 10px;
    margin-bottom: 20px;
}


/* Contact specific css */

#contactform{
    color:white;
    height: 100vh;
    margin-left: 10%;
    margin-right: 5%;
}


#contacth1{
    margin-left: 3%;
    margin-top: 90px;
    color:white;
}

#contacth1bg{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    background-blend-mode: multiply,multiply;
    padding-left: 10px;
    padding-right: 10px;
}

.contactlabels{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    background-blend-mode: multiply,multiply;
    padding-left: 5px;
    padding-right: 5px;
}


.contacttextbg{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    background-blend-mode: multiply,multiply;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
}

#contacth3{
    margin-top: 10px;
}


#contactbutton{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    background-blend-mode: multiply,multiply;
    color:white;
    margin-left: 15px;
}

#contactbutton:hover {
    background-color: white;
    color: black;
    border:white;
}

.form-control{
    background-color: #DCDCDC;
}

/* Home specific css */

.profilepics{
    border-radius: 10%;
    border-style: solid;
    border-width: 2px;
    border-color: black;
    width: 100%;
}

.homepersonalpics{
    max-width: 40%;
    max-height: 40%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15%;
}

#homecarousel{
    margin-top: 90px;
}

.carousel-control-prev{
    margin-left: 25%;
}


.carousel-control-next{
    margin-right: 25%;
}

#hometext{
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 20px;
    font-size: larger;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
}

.hometextbg{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    background-blend-mode: multiply,multiply;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 5%;
}

/* Portfolio specific css */

.projectpics{
    border-radius: 10%;
    border-style: solid;
    border-width: 2px;
    border-color: black;
    width: 100%;
}

#portfolioh1{
    margin-left: 3%;
    margin-top: 90px;
    color:white;
}

#portfolioh1bg{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    background-blend-mode: multiply,multiply;
    padding-left: 10px;
    padding-right: 10px;
}

#portfolioh3{
    margin-top: 10px;
    color: white;
    font-weight: bold;
}

.portfoliotext{
    padding-left: 25px;
    padding-right: 10px;
    padding-bottom: 10px;
}

#portfoliocontentback{
    margin-left: 20%;
    margin-right: 10%;
}

#portfoliocontent{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    background-blend-mode: multiply,multiply;
    border-radius: 10%;
}


/* Video specific css */

#videoh1{
    margin-left: 3%;
    margin-top: 90px;
    color: white;
}

#videoh1bg{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    background-blend-mode: multiply,multiply;
    padding-left: 10px;
    padding-right: 10px;
}

.videostextbg{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    background-blend-mode: multiply,multiply;
    padding-left: 10px;
    padding-right: 10px;
}

#videoscontentback{
    margin-left: 10%;
    margin-right: 10%;
}


/* Nav specific css */

#videoh3{
    margin-top: 10px;
}
.navbar-toggler{
    background-color:white;
}

.navbar{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    background-blend-mode: multiply,multiply;
    color:white;
    width: 100%;
    position: fixed;
    top: 0; 
    z-index: 5;
}

    .nav-item{
    color: white;
    transition: 0.75s ease;
}

    .nav-item:hover {
    background-color: white;
    color: black;
}

    .navbar-brand{
    color:white;
    font-weight: bold;
}


/* Sidebar specific css */

.icon-bar {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 5;
}

      /* Style the icon bar links */
.icon-bar a {
        display: block;
        text-align: center;
        padding: 16px;
        transition: all 0.3s ease;
        color: white;
        font-size: 20px;
}

    /* Style the social media icons with color, if you want */
.icon-bar a:hover {
    background-color: #000;
}

.github {
    background: #404040;
    color: white;
}

.linkedin {
    background: #007bb5;
    color: white;
}

.youtube {
    background: #bb0000;
    color: white;
}


/* Footer specific css */

.footer{
    margin-top: auto;
    text-align: center;
    width: 100%;
    background-color: #f2f2f2;
    bottom: 0;
    opacity: 80%;
    left: 0;
    bottom: 0;
}


@media screen and (max-width: 600px) {
}