:root {
  --color-bg: #000000;
  --color-text: #ff0000;
  /* Row heights (defaults for large screens) */
  --row1-h: 300px;
  --row2-h: 500px;
  --row3-h: 400px;
  --row4-h: 500px;
  --row5-h: 450px;
}

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

html,
body {
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  font-family: "Confillia Bold", sans-serif;
  font-weight: bolder;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.header {
  width: 100%;
  height: 120px;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  align-items: flex-start;
  color: var(--color-text);
}
.logo a {
  font-weight: bolder;
  font-size: 16px;
}

nav {
  position: fixed;
  width: 100%;
  padding: 30px 20px; /* shorthand to match others */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1001; /* keep above overlays consistently */
}
p {
  font-size: 16px;
  font-weight: bolder;
  color: red;
  text-transform: uppercase;
}


img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.container {
  width: 100%;
  height: 100%;
}

.row {
  width: 100%;
  display: flex;
  /* object-fit: scale-down; */
}

.col {
  height: 100%;
  margin-top: 100px; /* Adjust the margin-top value to match the height of the nav element */
}

.img-container {
  width: fit-content;
  height: 100%;
}

.img-container.left {
  text-align: right;
}

.img-container p {
  position: relative;
  padding: 5px 0;
  color: var(--color-text);
  opacity: 1;
  transition: opacity 0.3s, transform 0.3s;
}
.hide {
  display: none;
}

#row-1 { height: var(--row1-h); }

#row-2 { height: var(--row2-h); }

#row-3 { height: var(--row3-h); }

#row-4 { height: var(--row4-h); }

#row-5 { height: var(--row5-h); }

.col:nth-child(1) {
  flex: 3;
  display: flex;
  justify-content: flex-end;
}

.col:nth-child(2) {
  flex: 5;
}

.img-container.right img {
  clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
}

.img-container.left img {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

.whitespace {
  width: 100%;
  height: 500px;
}

a:link {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: white;
  background-color: transparent;
}

a:active {
  color: red;
  background-color: transparent;
}


/* Nav consistency across pages */
nav .logo a,
nav .contact a {
  font-size: 16px !important;
  font-weight: bolder;
  line-height: 1;
}

/* <= 1200px */
@media (max-width: 1200px) {
  .contact { font-size: 16px; }
  :root {
    --row1-h: 300px;
    --row2-h: 500px;
    --row3-h: 400px;
    --row4-h: 500px;
    --row5-h: 325px;
  }
}

/* <= 900px (tablet) */
@media (max-width: 900px) {
  .contact { font-size: 16px; }
  :root {
    --row1-h: 300px;
    --row2-h: 450px;
    --row3-h: 350px;
    --row4-h: 450px;
    --row5-h: 275px;
  }
}

/* <= 600px (mobile) */
@media (max-width: 600px) {
  .contact { font-size: 14px; }
  :root {
    --row1-h: 150px;
    --row2-h: 250px;
    --row3-h: 150px;
    --row4-h: 200px;
    --row5-h: 125px;
  }
}

/* >= 1920px (desktop XL) */
@media (min-width: 1920px) {
  :root {
    --row1-h: 450px; /* 1.5x */
    --row2-h: 750px;
    --row3-h: 600px;
    --row4-h: 750px;
    --row5-h: 675px;
  }
}

/* >= 3840px (4K) */
@media (min-width: 3840px) {
  :root {
    --row1-h: 600px; /* 2x */
    --row2-h: 1000px;
    --row3-h: 800px;
    --row4-h: 1000px;
    --row5-h: 900px;
  }
}