/*
#background {
    z-index: -2;
    background: url('./images/bg-1.jpg');
    filter: blur(5px);
    background-size: auto;
}
*/
body {
    overflow-x: hidden;
}
#bg-slider {
    position: fixed; /* Keeps it in the background while scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Pushes it BEHIND your content */

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
}

.container-title {
    font-weight: bold;
    font-family: fira, monospace;
    color: white;
    font-style: normal;
    font-size: 27px;
    display: block;
    grid-template-columns: auto auto auto;
    padding: 10px;
    text-align: center;
}
.container-title-black {
    font-family: fira, monospace;
    color: black;
    font-style: normal;
    font-weight: 700;
    font-size: 27px;
    display: block;
    grid-template-columns: auto auto auto;
    padding: 10px;
    text-align: center;
}
.container-title-sub {
    font-family: fira, monospace;
    color: white;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    display: block;
    grid-template-columns: auto auto auto;
    padding: 10px;
    text-align: center;
}
.container-title h1 {
    font-size: 75px;
    display: grid;
    padding: 10px;
    text-align: center;
}
.container-page {
    display: block;
    grid-template-columns: auto auto auto;
    height: 75vh;
    width: 100%;
    padding: 10px;
    text-align: center;
    align-content: center;
}



ul {
    list-style-type: none;
    position: sticky;
    margin-right: 20px;
    padding: 0;
    width: 100%;
    background-color: rgba(225, 225, 225, 0.75);
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    color: rgba(0, 0, 0, 0.85);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

ul li {
    padding-left: 10px;
    padding-right: 20px;
    float: left;
    text-shadow:
            0 2px 3px rgba(0,0,0,0.1),
            0 0 0.25px rgba(255,255,255,0.5);
}

ul li a {
    display: block;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    font-size: 16px;
    color: black;
    text-shadow:
            0 2px 6px rgba(0,0,0,0.1),
            0 0 0.5px rgba(255,255,255,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

ul li a:hover {
    outline: white;
    text-shadow:
            0 2px 6px rgba(0,0,0,0.1),
            0 0 0.5px rgba(255,255,255,0.5);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.02);
}
ul .icon {
    display: none;
}
@media screen and (max-width: 600px) {
    .ul a:not(:first-child) {display: none;}
    .ul a.icon {
        float: right;
        display: block;
    }
}
@media screen and (max-width: 600px) {
    .ul.responsive {position: relative;}
    .ul.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .ul.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}
.dropdown {
    position: relative;
}

.dropbtn {
    background-color: rgba(225, 225, 225, 0.75);
    padding: 16px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.5px solid rgba(500, 500, 500, 0.25);
    border-radius: 15px;
    color: black;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dropdown-content {
    color: black;
    display: none;
    position: absolute;
    background-color: rgba(225, 225, 225, 0.95);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 15px;
    color: black;
    transform: scale(1.02);
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: rgba(255, 255, 255, 0.75);
    transform: scale(1.02);
}
form {
    display: block;
    flex-direction: column;
    padding: 20px;
    border-radius: 8px;
    background-color: #f2f2f2;
    grid-template-columns: auto auto auto;
}
input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    box-sizing: border-box;
    border-radius: 8px;
}
.navbar img {
    vertical-align: middle;
}
.frosted-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: rgba(225, 225, 225, 0.8); /* translucency; light mode by default */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.frosted-navbar-dark {
    background-color: rgba(0, 0, 0, 0.8); /* override for dark mode */
}

.navbar-brand img {
    vertical-align: middle;
    height: 25px;
    width: auto;
}
.navbar {
    position: fixed;
 }

.navbar-brand {
    color: rgba(0, 0, 0, 0.85);
    /*  disabled for light mode
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(255, 255, 255, 0.2); */
    transition: color 0.3s ease, text-shadow 0.3s ease;
    transform: translateY(-3px) scale(1.02);
    overflow: hidden;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    align-items: center;
}
.frosted-navbar a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 25px;
    text-decoration: none;
    font-size: 17px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.icon-bar {
    width: 20px;
    height: 2px;
    background-color: black;
    margin: 8px 0;
    transition: 0.4s;
}
.navbar-toggler {
    border: none;
    box-shadow: none;
}
textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    box-sizing: border-box;
    border-radius: 8px;
    font-family: sofia-pro, sans-serif;
}
input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    font-size: 16px;
    margin: 10px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=submit]:hover {
    background-color: #449e46;
}
button[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    font-size: 16px;
    margin: 10px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button[type=submit]:hover {
    background-color: #449e46;
}
.monogram {
    font-weight: bold;
    font-family: fira, monospace;
    font-size: 32px;
    color: black;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition-duration: 0.2s;
}
.monogram:hover {
    transform: rotate(360deg);
}
.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}
.column {
    flex: 25%;
    max-width: 50%;
    padding: 0 4px;
}
.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

@media screen and (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 75%;
    }
}

@media screen and (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}
.topnav {
    overflow: hidden;
    margin-right: 20px;
    padding: 0;
    width: 27%;
    %;
    background-color: rgba(255, 255, 255, 0.75);
    justify-content: space-between;
    align-items: center;
    top: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.5px solid rgba(500, 500, 500, 0.25);
    border-radius: 15px;
    color: rgba(0, 0, 0, 0.85);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 15px;
    color: black;
    transform: scale(1.02);
}

/* Add an active class to highlight the current page */
.topnav a.active {
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 15px;
    color: black;
    transform: scale(1.02);
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}