html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Bitter', serif;
}

#about, #services, #bio{
    scroll-margin-top: 50px;
    scroll-snap-margin-top: 50px;
}

/*navbar*/
.navbar{
    border-bottom: #ffffff 2px solid;
}

.navbar-dark .navbar-brand{
    font-weight: 700;
    color: #ffffff;
}

.navbar-dark .navbar-brand:hover{
    color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link{
    color: #ffffff;
}

.navbar-dark .navbar-toggler{
    color:#468ebe;
    background-color: #468ebe;
}

.fixed-top.scrolled{
    background-color: #ffffff !important;
    transition: background-color 200ms linear;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    display: flex;
    border-bottom: #000000 2px solid;   
}

.fixed-top.scrolled.navbar-dark .navbar-brand{
    color: #000000;
}

.fixed-top.scrolled.navbar-dark .navbar-nav .nav-link{
    color: #000000;
}

.fixed-top.scrolled.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:hover, .fixed-top.scrolled.navbar-dark .navbar-toggler
{
    color: #468ebe;
}

header.masthead{
    padding-top: 6rem;
    height: 100vh;
    padding-bottom: calc(10rem - 4.5rem);
    background-image: linear-gradient(135deg, rgba(19, 66, 98, 0.7) 0%, rgba(19, 66, 98, 0.7) 81%), url('../assets/home/1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    color: #ffffff;
}

header.masthead h1{
    font-weight: 700;
    color: #ffffff;
    font-size: 2rem;
}

header.masthead p{
    font-size: 1rem;
}

.masthead a{
    border: #ffffff 2px solid;
    color: #ffffff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

#about h2{
    font-weight: 700;
    font-size: 1.8rem;
}

#about h2 ~ p{
    color: #468ebe;
    font-weight: 500;
}

#services{
    background-color: #dfd6d1;
}

#services h2{
    color: #000000;
    font-weight: 700;
    font-size: 1.8rem;
}

#services h2 ~ p{
    color: #468ebe;
}

#services h3{
    
    color: #000000;
}

#services h3 ~ p{
    color: #222222;
    font-size: .9rem;
}

#services img{
    box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
}

.contact-bg{
    background-color: #f2f2f27a;
}

#bio h2{
    font-weight: 700;
    font-size: 1.8rem;
}

#contact{
    background-color: #134262;
    color: #ffffff;
}

#contact h2{
    font-weight: 700;
    color: #ffffff;
    font-size: 1.8rem;
}

#contact a{
    color: #ffffff;
}

iframe{
    width: 250px;
    height: 140px;
}

footer{
    background-color: rgb(11, 37, 55);
}

@media (min-width: 576px){
    header.masthead h1{
        font-size: 2.4rem;
    }
    
    header.masthead p{
        font-size: 1rem;
    }

    header.masthead a{
        font-size: 1.4rem;
    }

    #contact p{
        font-size: .9rem;
    }
}

@media (min-width: 768px){
    header.masthead p{
        font-size: 1.1rem;
    }
}

@media (min-width: 992px){
    header.masthead h1{
        font-size: 2.6rem;
    }

    header.masthead p{
        font-size: 1.3rem;
    }

    #services h3{
        font-size: 1.2rem;
    }
    
    #services h3 ~ p{
        font-size: .9rem;
    }
}