*{
    box-sizing: border-box;
    font-family: Monospace;
    margin: 0;
    padding: 0;
    color: goldenrod;
    
}

@font-face {
    font-family: headerFont;
    src: url("headerFont.otf");
    font-weight: bold;
}

a:hover {
    text-decoration: none;
}

header {
    margin: 40px 0px 50px 0px;
}
header h1, h3{
    text-align: center;
    font-family: headerFont;
    text-shadow: 1px 1px rgba(30,30,30,1.0);
}

header h1{
    font-size: 6em;
    z-index: 1401;
}

header h3{
    font-size: 2em;
}

body {
    background: url("../resources/images/bgImage.jpg") no-repeat center center fixed; 
    background-size: cover;
    background-repeat: no-repeat;
}

#main{
    margin-top: 50px;
}



::-webkit-scrollbar {
    width: 5px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background: rgba(0,0,0,0.3);
}


.modalImg{
    box-shadow: 2px 2px 2px black; 
    width:30%; 
    height: auto; 
    float: left; 
    margin: 0px 25px 10px 0px;
    border-radius: 5px;
}

.modal-body p {
    color:black;
}

.modal-content h3 {
    font-size: 30px; 
   
}

.modal-content {
    background: url(../resources/images/bgImage7.jpg);
}

.modal-body p{
    color: white;
}


footer::before{
    content: '';
    display: block;
    border-top: 1px solid goldenrod;
    margin: 0 10%;
}

footer {
    margin-top: 15%;
}

footer div h4, footer div p{
    text-align: center;
}

.inModalImg {
    clear: left;
    position: relative;
    float: none;
    left: 15%;
    width: 45%;
}