:root {
  --main-color-light-light: #36414a;
  --main-color-light-lighter: #4b5b68;
  --main-color-light: #1f262b;
  --main-color: #13191f;
  --main-color-dark: #14191e;


  --main-color-text: #d3ccc1;
  --main-color-text-darker: #9a9a9a;

  --main-color-accent: #d06c06;

  --orange-gradient-light: #ff8a00;
  --orange-gradient-dark: #ff0000;
}


/* FONTS */
@font-face {
  font-family: digital-7;
  src: url(../fonts/digital-7.ttf);
  font-display: block;
}

@font-face {
  font-family: digital-7-mono;
  src: url(../fonts/digital-7-mono.ttf);
  font-display: block;
}

@font-face {
  font-family: eurasiaExBold;
  src: url(../fonts/EurasiaEx\ Bold.ttf);
  font-display: block;
}

@font-face {
  font-family: eurasiaEx;
  src: url(../fonts/EurasiaEx\ Regular.ttf);
  font-display: block;
}

@font-face {
  font-family: russelSquare;
  src: url(../fonts/RusselSquareOpti.otf);
  font-display: block;
}

@font-face {
  font-family: baloo2;
  src: url(../fonts/Baloo2-Regular.ttf);
  font-display: block;
}

@font-face {
  font-family: baloo2-extraBold;
  src: url(../fonts/Baloo2-ExtraBold.ttf);
  font-display: block;
}

/* Base styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: url('/img/rollerbotLogoTransparent.png') no-repeat center center fixed;
  background-color: var(--main-color);
  background-size: contain;
  color: var(--main-color-text);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Container to hold and center buttons */
.container {
  text-align: center;
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  transition: backdrop-filter 0.5s ease;
}

.container:has(.btn:hover) {
  backdrop-filter: blur(0px);
}

/* Button styling */
.btn {
  font-family: baloo2;
  display: inline-block;
  background: linear-gradient(45deg, var(--orange-gradient-light), var(--orange-gradient-dark));
  background-size: 200% 200%;
  background-position: 40% 40%;
  transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--main-color-text);
  padding: 1rem 2.5rem;
  font-size: 1.5rem;
  margin: 1rem;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.btn:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}


/* Responsive for small screens */
@media (max-width: 600px) {
  .btn {
    width: 80%;
    font-size: 1.25rem;
  }
}