/* General styles for a centered page */
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    cursor: crosshair;
    background-image: url('../src/bitmapa.png');
    background-repeat: repeat-x;
    min-width: 375px;
}

.container {
    width: 600px;
    padding: 0px;
    margin: 0px;
    text-align: left;
}

.social-media img {
    width: 20px;
    height: 20px;
    margin: 0 5px;
    border-radius: 50%;
}

.social-media a {
    text-decoration: none;
    color: #000;
}

.content {
    padding-left: 20px;
    padding-right: 20px;
}


main .content section {
    margin: 15px 0px 15px 0px;
    padding: 0px;
    text-align: justify;
}

/* Layout styles for head, main, and footer */
header, main, footer {
    display: block;
    width: 100%;
    margin: 10px 0;
    border: 1px solid red;
    position: relative;
}


main img {
    width: 100%;
    height: auto;
}

main img:first-of-type  {
    border-bottom: 1px solid red;
}

main img:not(:first-of-type){
    border-bottom: 1px solid red;
    border-top: 1px solid red;
}

.no-border {
    border: 0px !important;
}

header h1 {
    font-family: "Tiny5", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: absolute; /* Position nav relative to header */
    bottom: 0; /* Stick to the bottom of the header */
    left: 0; /* Stretch to the right */
    width: auto; /* Adjust width to content */
    padding: 0px 10px 0px 0px;
    margin: 0px;
    background-color: white;
}

h1 {
    font-family: "Tiny5", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h2 {
    font-family: "Tiny5", sans-serif;
    font-weight: 400;
    font-style: normal;
}

ul {
    list-style-type: square
}

li::marker {
  color: red;
}

ol {
    font-family: "Tiny5", sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    font-style: normal;
}

ol li{
    padding-bottom: 10px;
}
ol li span {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    font-style: italic;
    display: block;
}

ol li img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

ol h2 {
    margin-left: -40px;
    padding: 5px
}

footer {
    text-align: center;
    font-size: 0.6rem;
    margin-bottom: 40px
}

footer {
    padding-top: 10px;
}

header {
    position: relative; /* Ensure header is the positioning context */
    border: 2px solid transparent;
    border-width: 0px 0px 0px 2px;
    height: 200px;
/*    background-image: url(g2674.png);*/
    background-size: cover; /* Make the background fill the entire header */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the background from repeating */
    background-color: transparent;
    overflow: visible; /* Allow content to overflow */
}


header::before {
    content: '';
    position: absolute;
    top: -50px; /* Move the background image above the element */
    left: -50px; /* Move the background image to the left */
    right: -50px; /* Extend to the right */
    bottom: -50px; /* Extend below the element */
    background-image: url('../src/tlo.png');
    background-size: contain; /* Ensure the image covers the area */
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; /* Place it behind the content */
}

#dolly {
    position: absolute;
    bottom: -26px;
    right: 0px;
}

.logo {
    position: absolute;
    top: 10px;
    left: 0px;
    width: 100px;
    background-color: white;
    padding: 5px;
}

nav {
    font-family: "Tiny5", sans-serif;
    font-weight: 200;
    font-style: normal;
    background-color: white; /* Light background for the menu */
    padding: 0px; /* Padding around the menu */
    margin: 0; /* Remove default margin */
    border: 1px solid #000; /* Optional: Add a border around the menu */
    position: absolute; /* Position nav relative to header */
    bottom: 0; /* Stick to the bottom of the header */
    right: -40px; /* Stretch to the right */
    width: auto; /* Adjust width to content */
    z-index: 100;
}

nav ul {
    list-style: none; /* Remove bullet points */
    padding: 0px;
    margin: 0;
    display: flex; /* Use flexbox to align items in one line */
    justify-content: center; /* Center the menu items */
    border: 0px;
}

nav ul li {
    border: 0px;
    margin: 0 0px; /* Add spacing between menu items */
}

nav ul li a {
    text-decoration: none; /* Remove underline from links */
    color: #000; /* Set link color */
    display: block; /* Make the link behave like a block element */
    border: 0px; /* Transparent border for hover effect */
    padding: 10px
}

nav ul li a:hover {
    background-color: red; /* Change background on hover */
    color: white; /* Change text color on hover */
    border: 0px; /* Optional: Change border color on hover */
}


.banner {
    position: absolute; /* Position the banner relative to the header */
    top: 0px; /* Align to the top */
    right: 0px; /* Align to the right */
    width: auto; /* Adjust width as needed */
    height: auto; /* Adjust height as needed */
    border: 5px solid red;
    max-width: 200px; /* Optional: Limit the banner's width */
}


/* Hamburger button styles */
.hamburger {
    display: none; /* Hide by default */
    cursor: pointer;
    font-size: 40px;
    background: none;
    border: none;
    position: absolute;
    bottom: -5px;
    right: 0px;
    color: black;
}

.youtube, .facebook, .tiktok, .instagram {
    width: 20px;
    height: 20px;
    background-color: white;
    padding: 0px;
    display: inline-block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 4px;
    border-radius: 50%;
}

.youtube {
    background-image: url('social/youtube.png');
} 
.facebook {
    background-image: url('social/facebook.png');
}
.tiktok {
    background-image: url('social/tiktok.png');
}
.instagram {
    background-image: url('social/instagram.png');
}

.language {
    border-style: solid;
    border-width: 0px 0px 0px 1px;
    border-color: black;
}


/* Responsive design for mobile */
@media (max-width: 650px) {
    .container {
        width: 90%;
    }
    .hamburger {
        display: block; /* Show the hamburger button */
    }

    nav ul {
        list-style: none;
        padding: 0;
        flex-direction: column; /* Stack items vertically */
        background-color: white; /* Background for the menu */
        position: absolute;
        top: 10px; /* Adjust based on your header height */
        right: 0px;
        border: 1px solid #000;
        width: 300px; /* Set a fixed width for the dropdown */
        font-size: 1.6rem;
    }    

    nav ul li {
        margin: 5px 0px 5px 0px;
        padding-left: 10px;
    }
    nav {
        border: 0px;
        right: 0px;
        display: none; /* Initially hide the menu */
    }

    nav.show {
        display: flex; /* Show the menu when toggled */
    }    


    header::before {
        top: -50px; /* Move the background image above the element */
        left: 0px; /* Move the background image to the left */
        right: 0px; /* Extend to the right */
        bottom: -50px; /* Extend below the element */
    }

    ol {
        font-size: 1.2rem;
    }
        
    nav ul li a:hover {
        background-color: white; /* Change background on hover */
        color: black; /* Change text color on hover */
        border: 0px; /* Optional: Change border color on hover */
    }

    .language {
        border-width: 1px 0px 0px 0px;
        text-align: right;
    }
    
}