@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css);

/*
Main Body
*/

body {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: 16px;
    background-color: #0A0916;
    color: #7a7a7a;
    padding: 3px;
}

#main {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #0A0916;
    border-radius: 5px 5px 5px 5px;
}

/*
	Image
*/
img {
    border-radius: 4px 4px 4px 4px;
}


/*
	Gallery
*/

#gallery {
    margin: 45px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#galleryIMG {
    margin: 1%;
}

#galleryIMG img {
    border-radius: 14px 14px 14px 14px;
}

#galleryIMG iframe#small {
    width: 250px;
    height: 141px;
}

#galleryIMG iframe#med {
    width: 375px;
    height: 211px;
}

#galleryIMG iframe#large {
    width: 800px;
    height: 450px;
}

#galleryIMG desc {
    text-align: center;
}

h2 {
    font-size: 40px;
    color: #c0c0c0;
    text-align: center;
}

h2 small {
    font-size: 50%;
    font-weight: 400;
    color: #7a7a7a;
}

h3 {
    font-size: 32px;
    color: #c0c0c0;
    text-align: center;
    margin: 12px;
}

h4 {
    font-size: 24px;
    color: #c0c0c0;
    text-align: left;
    margin: 12px;
}


/*
	Masthead
*/

.masthead {
    padding: 1px;
    margin: 20px;
    margin-bottom: 55px;
}

.masthead header.title {
    font-size: 35px;
    color: #c0c0c0;
    display: inline-block;
}

.masthead header.title small {
    font-size: 75%;
    font-weight: 400;
    color: #7a7a7a;
    letter-spacing: 0;
}

.masthead .dropbtn {
    background-color: #2864A6;
    color: white;
    padding: 16px;
    font-size: 18px;
    border: none;
    border-radius: 4px 4px 4px 4px;
    width: 125px;
}

/* The container <div> - needed to position the dropdown content */
.masthead .dropdown {
    float: right;
    display: inline;
}

/* Dropdown Content (Hidden by Default) */
.masthead .dropdown-content {
    display: none;
    position: absolute;
    background-color: #0A0916;
    width: 125px;
    font-size: 18px;
}

/* Links inside the dropdown */
.masthead .dropdown-content a {
    background-color: #c0c0c0;
    padding: 10px 20px;
    text-decoration: none;
    color: #0A0916;
    display: block;
}

/* Links inside the dropdown */
.masthead .dropdown-content a:last-child {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* Change color of dropdown links on hover */
.masthead .dropdown-content a:hover {
    color: #c0c0c0;
    background-color: #0A0916;
}

/* Show the dropdown menu on hover */
.masthead .dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.masthead .dropdown:hover .dropbtn {
    background-color: #2864A6;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

/*
 caption
*/

.caption {
    font-size: 22px;
    color: #2864A6;
    text-align: center;
    text-decoration: none;
}

/*
 List
*/

li {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: 16px;
    color: #7a7a7a;
}

li b {
    color: #2864A6;
}

li a {
    text-decoration: none;
}

/*
 Menu
*/

ul#menu {
    font-size: 22px;
    display: inline-block;
    padding: 0;
    margin-bottom: 0px;
    display: inline-block;
}

ul#menu li {
    display: inline;
    margin-right: 3px;
}

ul#menu li a {
    background-color: #ffffff;
    padding: 10px 20px;
    padding-bottom: 10px;
    text-decoration: none;
    color: #0A0916;
    border-radius: 4px 4px 4px 4px;
}

ul#menu li a:hover {
    color: #c0c0c0;
    background-color: #0A0916;
}

/* Footer */

#footer {
    bottom: 0;
    width: 100%;
    margin: 8px;
}

/* unvisited link */
a:link {
    color: #2864A6;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #c0c0c0;
    text-decoration: none;
}

/*Styles for font awesome icons*/

.fa-solid {
    font-size: 25px;
}

.fa-solid:hover {
    opacity: 0.7;
}

.fa-solid:link {
    color: #c0c0c0;
}

.fa-solid:visited {
    color: #c0c0c0;
}

.fa-brands {
    font-size: 25px;
}

.fa-brands:hover {
    opacity: 0.7;
}

.fa-brands:link {
    color: #c0c0c0;
}

.fa-brands:visited {
    color: #c0c0c0;
}