/* Universal Styles */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    margin: 0;
    background-size: auto;
    font-family: "Source Code Pro", system-ui;
}

#content {
    flex: 1;
}

header {
    padding: 25px 15px;
}

.background-image {
    background-image: url('../images/cdrom-background.png');
    background-position: top right;
    background-repeat: no-repeat;
    min-height: 60vh; 
}

.title-section h1 {
    font-size: 4vw; 
    font-family: "Source Code Pro", monospace;
    font-weight: 900;
    text-align: center;
}



.background-image-art {
    background-image: url('../images/cdrom-background.png');
    background-position: top right; 
    background-repeat: no-repeat; 
    height: 80vh;
}

/* Media query for mobile devices */
@media (max-width: 768px) { 
    .background-image {
        background-size: contain;
        height: 120px; 
        width: auto;
    }
}

/* Fonts */
h1 {
    font-size: 68px;
    font-family: "Source Code Pro", monospace;
    font-weight: 900;
    text-align: center;
}

h2 {
    font-size: 32px;
    font-family: "Source Code Pro", monospace;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}

h3, h4 {
    font-size: 18px;
    font-family: "Open Sans", sans-serif;
    font-weight: 100;
    line-height: 1.4;
    text-align: center;
}

h5 {
    font-size: 28px;
    font-family: "Source Code Pro", monospace;
    font-weight: 800;
    line-height: 1.4;
    text-align: left;
}

h6 {
    font-size: 16px;
    font-family: "Source Code Pro", monospace;
    font-weight: 300;
    line-height: 1.4;
    text-align: left;
}

p {
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    font-weight: 100;

}

.essay {
    font-size: 22px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}

.quotes {
    font-style: italic;
    margin-left: 40px;
}

.palignmiddle {
    text-align: center;
}

.palignleft {
    text-align: left;
}

.pbold {
    font-weight: bold;
}
.h4left {
    text-align: left;
    font-weight: 600;
    line-height: 1.6;
}
.h4quote {
    font-style: italic;
    margin-left: 40px;
    text-align: left;
    font-size: 18px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

.h4bio {
    padding: 5px;
    text-align: left;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

a {
    color: #F94A4A;
}

a:hover {
    color: #4AE6F9;
}

.white-text {
    color: #FFFFFF;    
    text-align: center;

}

/* Navigation Styles */
nav {
    margin-top: 25px;
}

.logo-container {
    min-width: 150px; /* Keep this or adjust */
    max-width: 300px; /* Set a max width for the logo */
    display: flex; /* Flexbox to center the image if needed */
    align-items: center; /* Center vertically */
}

.logo {
    width: 250px; /* Increase this value for a larger logo */
    height: auto; /* Maintain aspect ratio */
    margin-right: 20px; /* Space between logo and menu */
}

/* Logo Hover Effect */
.logo-container img {
    transition: filter 0.3s ease; /* Smooth transition effect */
}

.logo-container img:hover {
    filter: invert(100%); /* Inverts colors on hover */
}

/* Menu Styles */
.menu {
    list-style-type: none; /* Remove bullet points */
    padding: 0;
    margin: 0; /* Remove margin from the menu */
    display: flex; /* Flexbox to make items horizontal */
}

.menu li {
    text-align: left; /* Left-align the text */
}

.menu li a {
    display: block;
    padding: 14px 20px;
    color: black; /* Set text color to black */
    text-decoration: underline; /* Underline the text */
    font-size: 18px;
}

.menu li a:hover {
    color: black; 
    font-weight: bold;
}

/* Header Styles */
.header-section {
    background-color: #36d9fa; /* Background color */
    background-image: url('../images/cdrom-background.png'); /* Background image */
    background-position: top right; /* Positions the image in the top-right corner */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-size: auto; /* Keeps the original size of the image */
    height: 90vh; /* Set height (adjust as needed) */
    padding-top: 30px; /* Add padding to avoid overlap with the fixed menu */
}

.title-section {
    height: 60vh; /* Set height (adjust as needed) */
    display: flex; /* Use flexbox to center content */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center content vertically */
    color: white; /* Text color */
    text-align: center; /* Center text */
    position: relative; /* Establish a positioning context for child elements */
}

.bg-dark {
    display: flex;             /* Enables flexbox */
    align-items: center;       /* Vertically centers items */
    justify-content: center;   /* Horizontally centers items */
    height: 100%;              /* Ensure the div has full height for alignment */
    text-align: center;        /* Centers text within the container */
}

/*.row {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center vertically */
    justify-content: space-between; /* Distribute space between columns */
    margin: 20px 0; /* Add some vertical space between the rows */
/*.} */

.row {
    display: flex;
    align-items: flex-start; /* Ensures children align to the top */
    justify-content: space-between;
    margin: 20px 0;
}

.col-md-4 {
    margin: 0; /* Ensure no extra margin */
    padding: 0; /* Adjust as necessary */
}

.text-left, .text-center, .text-right {
    text-align: center; /* Center text in each column */
}

.col {
    flex: 1; /* Allow columns to grow equally */
}

.top-left-image {
    position: absolute;
    top: 0; /* Align to the top */
    left: 30px; /* Align to the left */
    width: 450px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
    opacity: 0.8; /* Reduce opacity for the faded effect */
}

.bottom-right-image {
    position: absolute;
    bottom: 0; /* Align to the bottom */
    right: 90px; /* Align to the left */
    width: 690px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
    opacity: 0.8; /* Reduce opacity for the faded effect */
}

/* Emulation */
/* #emulation-container {
   /*  position: relative;
    /* z-index: 1; /* Adjust as needed */
    /* text-align: center;
    /* margin-top: 20px; /* Reduced margin to lessen gap */
    /* width: 100rem; /* Fixed width */
    /* max-width: 100%; /* Ensures it doesn't exceed the screen width */
    /* margin-left: auto; /* Centering the container */
    /* margin-right: auto; /* Centering the container */
/* }*/

.playitagain {
    width: 100%; /* Ensures the playitagain component takes full width */
    border: 0;
}

#launch-emulation {
    max-width: 100%;
    height: auto; /* Keep the aspect ratio */
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 999; /* Ensure it's on top of everything */
}

.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    z-index: 1000; /* On top of overlay content */
}


.overlay-content {
    color: white;
    text-align: center;
    font-size: 24px;
}


.trigger-image {
    cursor: pointer; /* Change cursor to pointer for the image */
}



.close-button:hover {
    color: #76f9f9; /* Change color on hover for better visibility */
}


/* Card Styles */
.card-group {
    display: flex;
    flex-wrap: wrap; /* Allows cards to wrap onto new lines */
    margin-bottom: 10px;
}

.card-group .card {
    display: flex;
    flex-direction: column;
    flex: 1 1 24%; /* Ensure cards take up 24% of the width (4 cards per row) */
    margin: 15px;
    margin-bottom: 25px;
    background-color: #f6f6f6;
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space between card content and button */
    flex-grow: 1; /* Makes sure the card body takes available height */
}

.card-body .btn {
    width: 100%; /* Ensure button takes up full width */
    height: auto; /* Set button height */
    border-radius: 0; /* Remove rounded corners to make it square-like */
    margin-top: auto; /* Push the button to the bottom */
}

.card-img-grow {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* Ensure image is responsive */
    height: auto; /* Maintain aspect ratio */
}

.card-img-grow img {
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for hover effects */
}

.card-img-grow img:hover {
    opacity: 0.8; /* Reduce opacity for a faded effect */
    transform: scale(1.02); /* Slightly scale for a button-like hover effect */
}

.card-body .card-text:empty {
    display: none; /* Hides empty paragraphs */
}

/* Footer Styles */
.sitefooter {
    padding: 20px 0;
    background: #36d9fa; /* Same background color */
    text-align: center;
}

footer {
    color: white;
    font-size: smaller;
}

footer p, footer strong {
    color: white;
    font-size: smaller;
    line-height: 1;
}

/* Content Styles */
.content {
    display: block;
    padding: 0px;
    margin: 0 auto;
    text-align: center;
    width: 90%;
}

/* Media Queries */

@media screen and (max-width: 480px) {
    footer p, footer strong {
        font-size: x-small;
        line-height: 0.8;
    }

    .card-img-top {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 98%; /* Ensures it is responsive */
        height: auto; /* Maintain aspect ratio */
    }

    .logo {
        width: 160px; /* Adjust this value for a larger logo */
        margin-right: 15px; /* Space between logo and menu */
    }
}
@media (max-width: 768px) {
    .background-image {
        background-size: cover;
        min-height: 300px; /* Ensure enough height on mobile */
    }

    .title-section {
        padding: 20px 10px;
    }

    .title-section h1 {
        font-size: 9vw; /* Increase font scaling on smaller screens */
    }

    nav {
        margin-top: 15px;
    }

    .menu li a {
        font-size: 16px;
        padding: 10px 15px;
    }

    .logo {
        width: 200px; /* Reduce logo size on mobile */
    }

    .responsive-image {
        display: none; /* Hides the image on mobile */
    }

    h1 {
        font-size: 40px; /* Adjust font size for smaller screens */
    }
    
    #launch-emulation {
        max-width: 100%;
        height: auto; /* Keep the aspect ratio */
    }

}