/* Basic reset and body styling */
body {
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'GothamSSm-Light';
  src: url('fonts/GothamSSm-Light.otf') format('otf');
  font-weight: normal;
  font-style: normal;
}

/* Container styling */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px; /* Padding around the container */
  box-sizing: border-box;
  background-color: #FFFFFF;
}

/* Aspect ratio container */
.aspect-ratio-container {
  position: relative;
  width: 100%;
  max-width: 100%; /* Ensure it doesn't exceed viewport width */
  box-sizing: border-box; /* Includes padding in the width and height calculations */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect for the container */
  border-radius: .75rem; /* Rounded corners for the container */
}

/* Inner content area */
.aspect-ratio-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Ensure iframe covers the container */
.aspect-ratio-content iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: .75rem; /* Rounded corners for the iframe */
}

/* Modal styling */
.modal {
  position: absolute; /* Position absolutely within the container */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF; /* Slightly transparent white background */
  color: black;
  border: none;
  z-index: 1000;
  display: none; /* Hidden by default */
  overflow: auto;
  border-radius: .75rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect for the modal */
  font-family: GothamSSm-Light, sans-serif;
  font-size: .875rem;
  line-height: 1.25rem;
}

/* Header styling */
.modal-header {
  background-color: #007bff;
  color: white;
  padding: 1rem 2rem;
  text-align: center;
  border-bottom: 2px solid #0056b3;
  border-radius: .75rem .75rem 0 0;
}

/* Body styling */
.modal-body {
  padding: 1rem 2rem;
  text-align: center;
}