/* Font Styles */

@font-face {
    font-family: 'museo-sans-500';
    src: url('fonts/museo-sans-500.otf') format('truetype');
}

/* header.css */

header {
    background-image: url(images/banner.png);
    background-size: 100%;
    background-position: 2.8%;
    color: #fff;
    padding: 25px;
    text-align: center;
  }

    header h1 {
        font-family: 'museo-sans-500';
        font-size: 8vw;
        color: rgb(255, 255, 255);
        text-shadow: #010000 8px 1px;
        margin: 10px;
    }
  
  .logo {
    width: 100px;
    height: auto;
    margin-right: 10px;
  }

.title {
    max-width: 550px;
    width: 100%;
    height: auto;
    padding-bottom:15px;
}

nav {
    display: inline-flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    font-family: 'museo-sans-500';
    background-color: rgba(0,0,0,0.5);
    margin-top: 0;
}
  
  nav a:hover {
    color: red;
  }
  
  nav ul {
    list-style: none;
    padding: 10px;
    margin: 0;
  }
  
  nav ul li {
    display: inline-block;
    margin-right: 10px;
  }

.main-nav-item a {
    color: #fff;
    text-decoration: none;
    font-size: 2vw;
    padding: 1vw;
    font-family: museo-sans-500;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    
}

    .main-nav-item a:hover {
        background-color: #555;
        border-radius: 25px;
    }
  
  .social-links {
    display: flex;
    list-style: none;
    padding: 7px;
    margin: 0;
  }
  
  .social-links li {
    margin-left: 10px;
  }
  
  .social-links li a img {
    height: 30px;
    width: 30px;
  }
  
  .social-links li a:hover img {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
  }




/* Apply styling for the active page */
.main-nav-item.active a {
    background-color: #555;
    color: #ff0000;
    border: rgb(0, 0, 0);
    border-style: double;
    border-radius: 25px;
}

.responsive-iframe {
    width: 100%;
    height: 100%;
    
}




    /* ===================================================
SECTION 11: Media Queries
================================================== */
    /* Tablets and Desktops */
    @media (max-width: 768px) {
        /* Responsive styles for tablets and desktops */

        /* Container styles */
        .container {
            padding: 10px;
        }

        /* Social Feed styles */
        #social-feed {
            flex-direction: column;
            align-items: center;
        }

        /* Social Wrapper styles */
        .social-wrapper {
            flex-direction: column;
        }

        /* Social Item styles */
        .social-item {
            min-width: 100%;
        }

        /* Main Navigation Item styles */
        .main-nav-item a {
            font-size: 22px; /* Increase this value to adjust the size */
        }

        /* Header styles */
        header {
            padding: 10px;
        }

        /* Header H1 styles */
        h1 {
            font-size: 8vw;
        }

        /* Header H2 and .h2 styles */
        h2,
        .h2 {
            font-size: 4vw;
        }

        /* .h22 and .h3 styles */
        .h22,
        .h3 {
            font-size: 4vw;
        }

        /* Footer styles */
        footer {
            padding: 10px;
        }
    }
    /* Mobile Devices */
    @media (max-width: 600px) {
        /* Responsive styles for mobile devices */

        /* H1 styles */
        h1 {
            font-size: 7vw;
        }

        /* About .h2 styles */
        #about .h2 {
            font-size: 8vw; /* Updated font size value for mobile devices */
        }

        /* Main Navigation Item styles */
        .main-nav-item a {
            font-size: 2.02vh; /* Increase this value to adjust the size */
        }

        /* H2 and .h2 styles */
        h2,
        .h2 {
            font-size: 5vw;
        }

        /* .h22 and .h3 styles */
        .h22,
        .h3 {
            font-size: 4vw;
        }


    }
    /* Small Tablets */
    @media (max-width: 768px) {
        /* Responsive styles for small tablets */

        /* Header styles */
        header {
            padding: 10px;
        }

        /* Header H1 styles */
        h1 {
            font-size: 5vw;
        }

        /* Logo styles */
        .logo {
            width: 80px;
        }
    }
    /* Mobile Phones */
    @media (max-width: 480px) {
        /* Responsive styles for mobile phones */

        /* Container styles */
        .container {
            padding: 10px;
        }

        /* Header H1 styles */
        header h1 {
            font-size: 5vw;
        }

        /* Header H2 styles */
        header h2 {
            font-size: 3vw;
        }

        /* Main Navigation Item styles */
        .main-nav-item a {
            font-size: 18px;
            padding: 0.5vh;
        }

        /* About .h2 styles */
        #about .h2 {
            font-size: 6vw;
        }


    }
    /* Smallest Mobile Phones */
    @media (max-width: 320px) {
        /* Responsive styles for smallest mobile phones */

        /* Header H1 styles */
        header h1 {
            font-size: 4vw;
        }

        /* Header H2 styles */
        header h2 {
            font-size: 2.5vw;
        }

        /* Main Navigation Item styles */
        .main-nav-item a {
            font-size: 16px;
            padding: 0.3vh;
        }

        /* About .h2 styles */
        #about .h2 {
            font-size: 5vw;
        }

        /* Remove previous styling for #video */
        #video {
            text-align: center;
            background-color: rgba(253, 253, 253, 0.793);
            margin: 0;
            padding: 20px; /* Add padding for spacing */
        }

        /* Updated styles for the video container */
        .videoWrapper {
            position: relative;
            width: 100%;
            max-width: 800px; /* Set a maximum width for larger screens */
            margin: 0 auto; /* Center horizontally */
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            overflow: hidden;
        }

            /* Style the embedded iframe */
            .videoWrapper iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

        /* Media query for mobile devices */
        @media screen and (max-width: 768px) {
            .videoWrapper {
                padding-bottom: 75%; /* Adjust aspect ratio for mobile screens */
            }

                /* Increase the size of the video on mobile */
                .videoWrapper iframe {
                    width: 120%; /* Adjust the width as needed for larger size */
                    height: 120%; /* Adjust the height proportionally */
                }


        }


    }

/* Style for the embedded link */
.embedded-link {
    text-align: center; /* Center align the link */
    margin: 20px auto; /* Add spacing around the link and center it horizontally */
}

    .embedded-link a {
        text-decoration: none; /* Remove underlines from the link */
    }

    .embedded-link img {
        max-width: 100%; /* Make the image responsive within its container */
    }

    .embedded-link p {
        margin: 10px 0; /* Add spacing above and below the link text */
    }