:root{
  --primary-color: #ffb012;
  --primary-color-tuple: 255, 176, 18;
  --primary-color-light: #ffc44d;
  --primary-color-dark: #cd8900;
  --secondary-color: #ffb012;
  --secondary-color-tuple: 255, 176, 18;
  --secondary-color-light: #ffc44d;
  --secondary-color-dark: #cd8900;
  --background-color: #f5f5f5;
  --container-custom-bg-color: #f6eede;
  --app-bar-item-color: white;
  --menu-item-color: white;
  --menu-item-hover-color: linear-gradient( 89deg, rgba(255, 216, 137, 0.3) 0%, rgba(255, 196, 77, 0) 100% );
  --menu-item-selection-color: linear-gradient( 89deg, #ffb82a 0%, rgba(137, 91, 0, 0) 100% );
  --menu-expansion-background-color: #202020;
  --btn-primary-bg-color: #ffb012;
  --btn-primary-hover-color: #ffcc65;
  --btn-primary-color: black;
  --btn-disabled-color: #909090;
  --green-event-color: #6cab0c;
  --yellow-event-color: #eed028;
  --red-event-color: #ff4040
}

.landing-page-body{
  background:linear-gradient(to bottom, #ffc44d, #cd8900);
  background:linear-gradient(to bottom, var(--secondary-color-light), var(--secondary-color-dark))
}

.landing-page{
  display:grid;
  align-items:center
}

.desktop-view .landing-page{
  grid-template:"area-3 area-2 area-1"
}

.mobile-view .landing-page{
  grid-template:"area-2" "area-1" "area-3"
}

.landing-page .card{
  display:grid;
  justify-items:center;
  align-items:center;
  border-radius:20px;
  padding:1em;
  margin:1em
}

.landing-page .card h1{
  font-size:1.8rem;
  margin:0
}

.landing-page .card p{
  font-size:1.1rem;
  margin:0
}

.desktop-view .landing-page .card{
  min-height:30em;
  grid-template:"area-1" "area-3" "area-2" "area-5" "area-4"
}

.desktop-view .landing-page .card.grid-area-2{
  font-size:105%
}

.mobile-view .landing-page .card{
  height:-webkit-fit-content;
  height:-moz-fit-content;
  height:fit-content;
  grid-template:"area-1 area-3" "area-2 area-3" "area-5 area-3" "area-4 area-3"
}

.landing-page .card .banner img{
  -o-object-fit:contain;
     object-fit:contain;
  width:100%;
  height:100%;
  min-width:2em;
  max-width:16em
}

.mobile-view .landing-page .card .banner img{
  max-width:12em
}

.landing-page .card .button{
  border-radius:10px;
  margin:.5em
}