/* Montserrat Font */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Calculate the width and height for a 16:9 aspect ratio */
    --viewport-width: 100vw;  /* Full viewport width */
    --viewport-height: 100vh; /* Full viewport height */
    
    /* Determine the height based on the width to maintain 16:9 */
    --aspect-ratio-height: calc(var(--viewport-width) * 16 / 9);
    
    /* Determine the width based on the height to maintain 16:9 */
    --aspect-ratio-width: calc(var(--viewport-height) * 9 / 16);
    
    /* Final dimensions for the canvas */
    --canvas-width: min(var(--viewport-width), var(--aspect-ratio-width)); /* Use the smaller value */
    --canvas-height: min(var(--viewport-height), var(--aspect-ratio-height)); /* Use the smaller value */

    --modal-width: calc(var(--canvas-width) * 0.85);
    --modal-height: calc(var(--canvas-height) * 0.5);
}

/* Basic style for the modal window */
#errorModal {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.75); /* Black background with opacity */
}

/* Modal content box */
#modalContent {
    position: relative; /* Parent div that positions child elements */
    background-color: white;
    top: calc(0.3 * var(--modal-height));
    border-radius: calc(0.045 * var(--modal-width)); /* Rounded corners based on modal width */
    margin: calc(0.07 * var(--modal-height)) auto; /* Center the modal vertically and horizontally */
    width: var(--modal-width); /* Use calculated modal width */
    height: var(--modal-height); /* Use calculated modal height */
    font-family: "Montserrat", Arial, sans-serif;
    box-shadow: calc(0.02 * var(--modal-width)) calc(0.02 * var(--modal-height)) calc(0.044 * var(--modal-height)) calc(0 * var(--modal-width));
    overflow: hidden; /* Prevent content from overflowing */
    text-align: center;
}

/* Error icon */
#errorIcon {
    position: absolute;
    top: calc(0.02 * var(--modal-height)); /* Positioning from the top relative to modal height */
    left: calc(0.0355 * var(--modal-width)); /* Positioning from the left relative to modal width */
    height: calc(0.165 * var(--modal-height)); /* Height as a percentage of container height */
    width: auto; /* Let the width adjust automatically */
    display: inline-block; /* Allow it to take up space based on the background */
    background-position: center;
    background-size: contain; /* Scale image to fit */
    background-repeat: no-repeat; /* Do not repeat the image */
}

/* Error header */
#errorHeader {
    position: absolute;
    top: calc(0.15 * var(--modal-height)); /* Positioned below the icon */
    left: 50%; /* Align to the center horizontally */
    transform: translateX(-50%); /* Shift it back to center */
    font-size: calc(0.065 * var(--modal-width)); /* Font size adjusted with modal width */
    font-weight: 620;
    margin: 0;
}

/* Error message */
#errorMessage {
    position: absolute;
    top: calc(0.22 * var(--modal-height)); /* Positioned below the header */
    left: 50%; /* Align to the center horizontally */
    transform: translateX(-50%); /* Shift it back to center */
    width: calc(0.85 * var(--modal-width)); /* Responsive width in relation to modal width */
    font-size: calc(0.052 * var(--modal-width)); /* Font size adjusted with modal width */
    font-family: "EB Garamond", Arial, sans-serif;
    font-weight: 600;
}

/* Help button */
#helpButton {
    position: absolute;
    bottom: calc(0.1 * var(--modal-height)); /* Positioned at the bottom */
    left: 50%; /* Align to the center horizontally */
    transform: translateX(-50%); /* Shift it back to center */
    background-color: #4EDDB1;
    color: white;
    font-weight: 500;
    font-size: calc(0.055 * var(--modal-width)); /* Font size adjusted with modal width */
    border-radius: calc(0.1 * var(--modal-width)); /* Rounded corners */
    padding: calc(0.018 * var(--modal-height)) calc(0.045 * var(--modal-width)); /* Padding for the button */
    cursor: pointer; /* Show pointer on hover */
    white-space: nowrap; /* Prevent text from wrapping */
}

#helpButton:hover {
    color: #4EDDB1;
    background-color: white;
    border: calc(0.005 * var(--modal-width)) solid #4EDDB1; /* Border on hover relative to modal width */
}