/* stylesheet for Project - Portfolio */

/*
COLORS USED:
color: #bd3b13; orange shade for buttons and text to highlight
0c364d dark blue from the banner
DCDCDC  gray

*/

html {
    height: 100%;
    margin: 0;
}

body{
    position:relative;
    min-height:100vh;
}

* {
    box-sizing: border-box;

}

html {
    scroll-behavior: smooth;
}

.container {
    padding: 0 15px;
    max-width: 90%;
    margin: 0 auto;
}

.show-image{
    background-color: #fff;
    padding: 1rem;
    margin-left: 2rem;
    margin-right:2rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
}


h1,
h2,
h3,h4,
h5{
    font-family: 'Lora', serif;
    font-size: 1rem;
    /*font-family: 'Roboto Slab', serif;*/
}


h2{
    padding-top: 10px;
    margin:0;
}

p{
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 1rem;
}

.icon-color {
    outline:0px;
    border:0px;
    background-color: inherit;
    color: black;
}

.dropdown-menu {
    margin-top: 0;

}

.zeromargin{
    margin-top: 0;
}



#dropdown-1{
    outline: 0px;
}
#collapse-button-1{
    border:0px;
}
#main-menu{
    position:relative;
}

#layer1 {
    background-color: #DCDCDC;
    color: black;
    padding-left: 1em;
    padding-right: 1em;
    z-index:1;
}

#layer2{
    outline:0px;
    background-color: #DCDCDC;
    color:black;
    z-index:-1;
}


#layer1 a, a:focus, a:visited {
    background-color: #DCDCDC;
    color: black;
}

#layer1 a:hover{
    background-color: #DCDCDC;
    color: brown;
}

#layer2 a:active{
    background-color: #DCDCDC;
    color: black;
}

.row {
    margin: 25px 0;
    padding-bottom: 40px;

}


.line-space{
    padding-bottom: 20px;
}

.navbar-right{
    position:absolute;
    right: 1em;
}

#social-menu a {
    margin-right: 1.5em;
}



#footer  {
    padding-top: 10px;
    padding-bottom: 5px;
    background-color: #DCDCDC;
    bottom:0;
    width:100%;
}


#footer p{
    font-size: .6rem;
    font-weight: bolder;
}



.note-font{
    background-color: transparent;
    font-weight:bolder;
    color: #bd3b13;

}

.list1{
    list-style-type:square;
}

.btn1{
    background-color: #bd3b13;
    padding: 10px 20px;
    border-radius: 15px;
    color: white;
    font-weight: 500;
    transition: 0.2s opacity;
    text-align: center;
    margin-bottom: 1rem;
    text-decoration: none;
}
a.btn1{
    background-color: #bd3b13;
    padding: 10px 20px;
    border-radius: 15px;
    color: white;
    font-weight: 500;
    transition: 0.2s opacity;
    text-align: center;
    margin-bottom: 1rem;
    text-decoration: none;
}
a.btn1:hover{
    color:white;
}

.btn2{
    background-color: #0c364d;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    border: 0px;
    font-size: 14px;
    transition: 0.2s opacity;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}


.navbar{
    padding: 0 !important;
}

.banner{
    padding-top: 55px;
    padding-bottom: 20px;
}

/*medium sized screen */
@media only screen and (min-width: 640px) {
    .banner {
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .btn1, .btn2 {
        font-size: 14px;
    }

    #footer p {
        font-size: .8rem;
        font-weight: bolder;

    }

    /* - for desktop --*/
    @media only screen and (min-width: 1024px) {
        .banner {
            padding-top: 55px;
            padding-bottom: 20px;
        }

        .icon-color {
            font-size: 20px !important;
        }

        .btn1, .btn2 {
            font-size: 18px;

        }

        .important_text {
            font-weight: bolder;

        }

        .navbar {
            padding: .5rem 0 !important;
        }

        h1,
        h2,
        h3, h4,
        h5 {
            font-size: 1em;
        }
    }

    #footer p {
        font-size: .9rem;
        font-weight: bolder;
    }
}