* {
    padding: 0;
    margin: 0;   
}

body {
    font-family: 'calibri';
    /* background-image: url('../img/background.jpg');
    background-repeat: no-repeats;
    background-size: cover;
    background-position: bottom left;
    background-attachment: fixed;
     */
    background-color: #FFFFFF;
} 

/* .drop-cap::first-letter {
    font-size: 3rem;
    font-weight: 600;

    float: left;
    line-height: 2rem;

    margin-right: 0.5rem;
} */

/* Navigation bar */

.nav {
    /* positions elements to the right and adds a line break */
    display: flex; 
    /* inverts the order of the list in the nav bar */
    flex-direction: row-reverse; 
}

.nav li{
    /* positions elements in the navbar to the left */
    float: left; 
}

.nav ul {
    list-style: none; 
}

.nav li a {
    display: block;
    color: #333;
    padding: 14px 16px;
    text-decoration: none; 
}

.nav li a:hover {
    background-color: #333; 
    /* sets a smooth transition between nav buttons */
    transition: background-color .3s; 
    color: white; 
}

.nav .active-nav {
    /* underline active nav button */
    text-decoration: underline; 
}

.call-action{
    text-decoration: none;
    color: #343434;
}

.call-action :hover {
    text-decoration: underline;
}

.heading {
    /* shifts entire heading section to center */
    text-align: center; 
}

/* targets body content like paragraphs */
.content {
    text-align: center; 
}

.content h2 {
    /* space out heading */
    padding: 1%; 
}

.issues{
    margin-bottom: 10%;
}

.cover-image { /* cover image properties */
    width: 368px;
    height: 520px;
    margin-left: 1%;
    margin-right: 1%;
    border-radius: 10px;
    /* adds shadow on blog image */
    box-shadow: 10px 10px 20px -10px black;
}

.row {
    text-align: center;
}

.blog {
    text-align: justify;
    box-shadow: 0 0 5px 0 ; 
    background: inherit; 
    backdrop-filter: blur(10px); 
    margin: 20px;
    padding: 2%;
    border-radius: 20px;
}

.blog:hover {
    /* adds smooth transition of zoom in effect */
    transition: ease-in 0.3s;
    /* adds effect to zoom in subject */
    transform: scale(1.6);
    font-size: 24px;
}

.glass {
    margin-left: auto;
    margin-right: auto;
}

.blog-image {
    margin-top: 1%;
    margin-bottom: 1%;
    width: 300px;
    height: 300px;
    /* adds rounded corners to blog image */
    border-radius: 20px;
}

.blog-image:hover {
    /* adds shadow on blog image */
    box-shadow: 10px 10px 20px -10px black;
    /* adds smooth transition of shadow */
    transition: box-shadow 0.3s ease-in;
    /* adds smooth transition of zoom in effect */
    transition: ease-in 0.3s;
    /* adds effect to zoom in subject */
    transform: scale(1.05);
}

/* adds space after paragraph */
p {
    padding-bottom: 1%;
    padding-top: 1%;
}

/* formats the table spaces and maintains one border */
table {
    border-collapse: collapse;
    text-align: left;
    box-shadow: 0 0 5px 0 ; 
    background: inherit; 
    backdrop-filter: blur(10px); 
    margin: 2px;
    padding: 0;
}

/* sets solid line for the table and cells */
td {
    border: 1px solid rgba(141, 141, 141, 0.151);
    text-align: left;
}

/* customizes the table heading */
th {
    background-color: #343434;
    color: burlywood;
}

/* adds space within each cell */

th, td {
    margin: 1%;
    padding: 10px;
}

/* customizes horizontal rules */
hr {
    margin-top: 2%;
    border: 0.5px solid #333;
    margin-left: 30%;
    margin-right: 30%;
}

/* formats social media icons on about page */
.icons {
    margin-top: 2%;
    width: auto;
}

/* formatting input */
input, select{
    padding: 1%;
    border-radius: 10px;
    border-style: none;
    margin-bottom: 2%;
    width: 35%;
}

button.submit_button {
    padding: 1%;
    border-radius: 10px;
    border-style: none;
    margin-bottom: 2%;
    width: 35%;
}

button.submit_button:hover {
    /* adds shadow on submit button */
    background-color: rgb(76, 175, 80);
    color: white;
    cursor: pointer;
}

/* formats footer */
footer {
    text-align: center;
    width: 100%;
    padding-top: 2%;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position:relative;
    /* display: auto; */
    padding-top: 2%;
    padding-left: 90%;
    /* positions elements to the right and adds a line break */
    display: flex; 
    /* inverts the order of the list in the nav bar */
    flex-direction: row-reverse;
}

/* Dropdown Content on brand (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    background: inherit; 
    backdrop-filter: blur(10px); 
    border-radius: 20px;
}

/* Links inside the dropdown */
.dropdown-content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content .active-menu {
    text-decoration: underline; 
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: rgb(190, 151, 76);
    border-radius: 20px;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .hamburger-btn {
    color: white;
}

/* responsive media queries */

/* Light mode styles desktop */
@media (prefers-color-scheme: light) {
    body{
        background-color: #FFFFFF;
        /* background-image: url('../img/background.jpg'); */
    }
}

/* dark mode styles desktop */
@media (prefers-color-scheme: dark) {
    body{
        color: white;
        background: linear-gradient(200deg, #1c2c1e 0%, #616b62 45%, #2c3a2e 75.52%);
        background-repeat: no-repeat;
        background-attachment:fixed;
        /* background: #0E1217; */
        /* background-image: url('../img/dark-background.jpg'); */
    }

    .nav li a {
        color: white;
    }
}

/* screens below 1024px such as tablets and mobile devices */
@media all and (width < 1024px) {

    .cover-image {
        width: 227px;
        height: 320px;
    }

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

    .content {
        height: auto;
    }

    .blog {
        margin-left: 15%;
        margin-right: 15%;
    }

    .blog:hover {
        /* adds smooth transition of zoom in effect */
        transition: ease-in 0.3s;
        /* adds effect to zoom in subject */
        transform: scale(1);
        font-size: 20px;
    }

    .blog-image {
        width: 200px;
        height: 200px;
    }

    .dots {
        display:none;
    }

    body {
        background-image: none;
    }

    h1 {
        font-size: 24px;
    }

    .nav {
        display: none;
    }

    .about{
        width: 250px;
        height: 250px;
    }

    /* Light mode styles mobile*/
    @media (prefers-color-scheme: light) {
        /* Style The Dropdown Button */
        .hamburger-btn {
            background-image: url('../img/menu-dark.png');
            background-repeat: no-repeat;
            padding: 16px;
            font-size: 24px;
            border: none;
            cursor: pointer;
        }

        body {
            /* background-image: url('../img/background.jpg'); */
        }
    }

    /* dark mode styles mobile*/
    @media (prefers-color-scheme: dark) {
        body{
            color: white;
            /* background-color:rgb(25, 27, 38); */
            /* background-color: #343434; */
            background: linear-gradient(200deg, #1c2c1e 0%, #616b62 45%, #2c3a2e 75.52%);
            background-repeat: no-repeat;
            background-attachment:fixed;
        }
        
        .hamburger-btn {
            background-image: url('../img/menu-light.png');
        }

        /* Links inside the dropdown */
        .dropdown-content a {
            color: white;
        }
    }

    /* Style The Dropdown Button */
    .hamburger-btn {
        background-repeat: no-repeat;
        padding: 16px;
        font-size: 24px;
        border: none;
        cursor: pointer;
    }
}

/* screens below 1024px such as laptops and desktops */
@media all and (width > 1024px) {
    .blog {
        margin-left: 25%;
        margin-right: 25%;
    }
}