html {
  font-size: clamp(10px, 2vw, 16px);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; margin: 0; padding: 0; }

body {
    text-align: center;
    background-color: var(--primary-background-colour);
    color: var(--primary-text-colour);
    transition: 0.5s;
}


.image-text-container {
  vertical-align: middle;
  align-items: center;
}

.white-text {
    color: white;
}

.transparent {
  top: 0;
  left: 0;
  background: transparent;
  z-index: 10000;
  position: absolute;
}

.slide-in {
  position: relative;
  animation: slideIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.image-container {
    position: relative;
    text-align:center;
    height: 100%;
    margin: 0;
  
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
    color: black;
}

.float-right {
  margin-left:auto;
  margin-right:20px;
}

.remove-decoration {
  text-decoration: none !important;
  color: inherit
}

.main-image {
    height: 30rem;
    width: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.parallax-image-container {
    overflow: hidden;
    perspective: 1px;
    height: 20rem;
    position: relative
}

.parallax-layer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateZ(-1px) scale(2);
  will-change: transform;
  overflow: hidden;
  inset: 0;
}

.parallax-top {
    top: 0
}

.parallax-center {
    top: -50%
}

.parallax-bottom {
    top: -100%
}