:root {
  --tractor-speed: 4.2s;
  --tractor-play-state: running;
}

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

html {
  height: 100%;
}

/* The field represents the landscape background */
.field {
  min-height: 100%;
  width: 100%;
  background-image: url('bg.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: rgb(64, 16, 126);
  animation: tractor-drive var(--tractor-speed) linear infinite;
  animation-play-state: var(--tractor-play-state);
}

/* Centered barn container using CSS grid */
.barn {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
}

/* Semi-transparent banner representing the farmer society */
.farmer-society {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 12px 16px;
}

.farmer-society p {
  color: #fff;
  font-weight: 700;
  font-family: Calibri, Tahoma, Verdana, sans-serif;
  font-size: 11pt;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  .field {
    animation: none;
  }
}

/* Continuous cycle through subdued color spectrum */
@keyframes tractor-drive {
     0.0% { background-color: rgb(64, 16, 126); }
    2.38% { background-color: rgb(73, 11, 124); }
    4.76% { background-color: rgb(83, 6, 121); }
    7.14% { background-color: rgb(91, 3, 116); }
    9.52% { background-color: rgb(99, 1, 110); }
    11.9% { background-color: rgb(107, 1, 103); }
   14.29% { background-color: rgb(113, 2, 96); }
   16.67% { background-color: rgb(119, 4, 87); }
   19.05% { background-color: rgb(123, 8, 78); }
   21.43% { background-color: rgb(125, 13, 69); }
   23.81% { background-color: rgb(127, 19, 60); }
   26.19% { background-color: rgb(127, 26, 50); }
   28.57% { background-color: rgb(125, 34, 41); }
   30.95% { background-color: rgb(123, 43, 33); }
   33.33% { background-color: rgb(119, 52, 25); }
   35.71% { background-color: rgb(113, 62, 18); }
    38.1% { background-color: rgb(107, 71, 12); }
   40.48% { background-color: rgb(99, 80, 7); }
   42.86% { background-color: rgb(91, 89, 4); }
   45.24% { background-color: rgb(83, 97, 2); }
   47.62% { background-color: rgb(73, 105, 1); }
    50.0% { background-color: rgb(64, 112, 2); }
   52.38% { background-color: rgb(55, 117, 4); }
   54.76% { background-color: rgb(45, 122, 7); }
   57.14% { background-color: rgb(37, 125, 12); }
   59.52% { background-color: rgb(29, 127, 18); }
    61.9% { background-color: rgb(21, 127, 25); }
   64.29% { background-color: rgb(15, 126, 32); }
   66.67% { background-color: rgb(9, 124, 41); }
   69.05% { background-color: rgb(5, 120, 50); }
   71.43% { background-color: rgb(3, 115, 59); }
   73.81% { background-color: rgb(1, 109, 68); }
   76.19% { background-color: rgb(1, 102, 78); }
   78.57% { background-color: rgb(3, 94, 87); }
   80.95% { background-color: rgb(5, 85, 95); }
   83.33% { background-color: rgb(9, 76, 103); }
   85.71% { background-color: rgb(15, 66, 110); }
    88.1% { background-color: rgb(21, 57, 116); }
   90.48% { background-color: rgb(29, 48, 121); }
   92.86% { background-color: rgb(37, 39, 124); }
   95.24% { background-color: rgb(45, 31, 126); }
   97.62% { background-color: rgb(55, 23, 127); }
   100.0% { background-color: rgb(64, 16, 126); }
}