/* Add to your HTML <head>:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Inter', sans-serif;
}

@font-face {
  font-family: 'RIMONS';
  src: url('/fonts/RIMONS.woff2') format('woff2'),
       url('/fonts/RIMONS.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.container {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: row;
}

/* LEFT PANE STYLING */
.left-pane {
  position: relative;
  overflow: hidden;
  flex: 1;
  height: 100%;
}

.slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: crossfade 20s infinite;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }
.slide:nth-child(4) { animation-delay: 12s; }
.slide:nth-child(5) { animation-delay: 16s; }

@keyframes crossfade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  33%  { opacity: 1; }
  41%  { opacity: 0; }
  100% { opacity: 0; }
}

/* RIGHT PANE STYLING */
.right-pane {
  flex: 1;
  height: 100%;
  background-color: #363840;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.right-pane .content {
  max-width: 900px;
  padding-left: 50px;
  text-align: left;
}

.right-pane h1 {
  font-family: 'RIMONS', sans-serif;
  color: #ffffff;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.right-pane p {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  color: #ffffff;
  line-height: 1.6;
}

p {
  margin-bottom: 30px;
}

a {
  font-family: 'Inter', sans-serif;
  color: #f4c15d;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover,
a:focus {
  color: #ff7b7b;
  text-decoration: underline;
}

/* RESPONSIVE STYLING */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .left-pane,
  .right-pane {
    flex: none;
    height: 50vh;
    width: 100%;
  }

  .right-pane .content {
    max-width: 90%;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
  }

  .right-pane h1,
  .right-pane p {
    text-align: center;
  }
}
