@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/determination.woff2') format('woff2'),
       url('fonts/YourFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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

body {
  min-height: 100vh;   /* fallback for older browsers */
  min-height: 100svh;  /* "small viewport height" - guaranteed visible even with toolbars showing */
  width: 100vw;
  background: url('Images/randomizer-gif-slow.gif') no-repeat center center;
  background-size: cover;
  position: relative;
  overflow-x: hidden;  /* keep horizontal clipping only */
}

.top-logo {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 70px; /* adjust to taste */
}

.center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.center-logo {
  width: min(80vw, 400px);
  height: auto;
}

.under-construction {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'MyCustomFont', sans-serif;
  color: #0C3064;
  font-size: 1.1rem; /* desktop */
  text-align: center;
  width: 90%;
}

@media (max-width: 600px) {
  .under-construction {
    font-size: 1.1rem;
    bottom: 60px;  /* phone portrait — down low, like you liked */
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .center-logo {
    max-width: 220px; /* smaller so it doesn't eat up the short vertical space */
  }

  .under-construction {
    bottom: 30px;
    font-size: 1.1rem;
  }
}