:root {
    --primary-font-family: Arial, sans-serif;
    --primary-color: #e0e0e0;
    --secondary-color: grey;
    --link-color: #e6b800;
    --primary-background-color: #000000;
    --secondary-background-color: #3a3a3a;
    --tertiary-background-color: #2e2e2e;
    --primary-border-color: #505050;
    --content-width-small: 95%;
    --content-width-large: 75%;
    --padding-small: .6rem;
    --padding-xsmall: .3rem;
    --modal-width-small: 100%;
    --modal-width-large: 80%;
    --modal-height-small: 100%;
    --modal-height-large: 100%;
    --modal-max-width-small: 800px;
    --modal-max-width-large: 1000px;
    --modal-body-min-height-small: 95vh;
    --modal-body-min-height-large: 95vh;
    --modal-body-iframe-height-small: 95vh;
    --modal-body-iframe-height-large: 95vh;
}

body::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%; 
    /*background-image: url('images/cgr.jpg'); 
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size: 30vh; 
    opacity: 0.11; */
    z-index: -1;
}

body { 
    font-family: var(--primary-font-family); 
    background-color: var(--primary-background-color); 
    color: var(--primary-color); 
    margin: 0; 
    padding: 0;
    top: 0;
    position: absolute; 
    display: flex; 
    flex-direction: column; 
    align-items: center;  
}

header { 
    text-align: center; 
    background-color: var(--secondary-background-color);  
    width: 100%; 
}

footer {
  width: 100%;
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

a { 
    color: var(--link-color); 
    text-decoration: none; 
    font-weight: bold;
}

a:hover { 
    color: var(--secondary-color); 
    text-decoration: none; 
}

#lg-title { 
    padding: var(--padding-small); 
    justify-content: left;
}

#content { 
    width: var(--content-width-small); 
    align-items: center; 
}

.video-wrapper {
    max-width: 100%; /* you can change this value according to your needs */
    margin: 0 auto; /* centers the video container */
    width: 100%;
    align-items: center;
    padding-top: 56.25%; /* for maintaining 16:9 aspect ratio */
    position: relative;
}

#video-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

.goat-names { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    white-space: nowrap; 
}

.goat-name { 
    display: inline-block; 
    padding: var(--padding-small); 
    margin: 20px; 
    border: 1px solid var(--primary-border-color); 
    border-radius: 10px; 
    background-color: var(--tertiary-background-color); 
    color: var(--primary-color); 
    font-weight: bold; 
    cursor: pointer; 
    text-decoration: none; 
}

.modal-content { 
    background-color: var(--primary-background-color);  
    color: var(--primary-color); 
    margin: 0;
    padding: 0;
    top: 0;
    position: absolute;
    display: flex; 
    flex-direction: column;  
}

@media (min-width: 768px) { 
    .modal-content { 
        width: var(--modal-width-large); 
        height: var(--modal-height-large); 
    } 
}

.modal-dialog { 
    max-height: none; /* Fixed syntax */
}

.modal-body iframe { 
    border: none; 
    width: 100%; 
    height: var(--modal-body-iframe-height-small); 
}

.modal-body { 
    display: flex; 
    align-items: top; 
    justify-content: center; 
    min-height: var(--modal-body-min-height-small); 
}

.modal-footer { 
    padding: 0.5rem; 
    border-color: var(--primary-border-color); 
}

@media (min-width: 768px) { 
    .modal-dialog { 
        max-width: var(--modal-max-width-large); 
    }

    .modal-body iframe { 
        height: var(--modal-body-iframe-height-large); 
    }

    .modal-body { 
        min-height: var(--modal-body-min-height-large); 
    } 
}

/* Styles for smartphones (portrait and landscape) */
@media only screen and (max-width: 767px) { 
    #content { 
        width: var(--content-width-small); 
    }

    .goat-name { 
        padding: var(--padding-small); 
    }
}

/* Styles for tablets and small desktops */
@media only screen and (min-width: 768px) and (max-width: 1024px) { 
    #content { 
        width: var(--content-width-large); 
    }

    .goat-name { 
        padding: var(--padding-xsmall); 
        font-size: 1rem;
        border-radius: 5px;
    }
}

/* Styles for large desktop screens */
@media only screen and (min-width: 1025px) { 
    #content { 
        width: var(--content-width-large); 
    }

    .goat-name { 
        padding: var(--padding-xsmall); 
        font-size: 1.2rem;
        border-radius: 5px;
    }
}