:root {
  --color-primary :rgb(199, 211, 181);
  --text-color: #FFF4D1;
  --background-color: #2A1F00;  
}

body {
  background : linear-gradient(to bottom right,#dadada,#ffffff);
}

.theme-color {
  color : var(--text-color);
}

.myApp {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

.myApp .subtitle {
  font-size : 70%;
  text-transform: uppercase;
}

.myApp h5 {
  padding-left: 0;
  color : var(--text-color);
  text-transform: uppercase;
  margin-left: 0;
}

.myApp .btn-primary {
  border-radius:200rem;
  border : solid white;
  color: var(--text-color);
  background-color: var(--background-color);
}

.myApp .btn-choice {
}

.myApp .container1 {
}

.myApp .container2 {
}

.myApp .container3 {
}

.myApp .card {
  border-radius : 1rem;
  overflow : hidden;
  border:none;
}

.myApp .card:hover {
  scale:1.05;
}

.myApp .card-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: visible;
}

.banner {
  position : absolute;
  top : 0.25rem;
  right: 0.25rem;
  /* transform: rotate(-45deg); */
  padding : 0.25rem 0.5rem;
  border : none;
  background-color: red;
  z-index: 10;
  border-radius: 0.2rem;
  color : #ffffff;
  text-transform: uppercase;
  overflow: visible;
  font-size : 75%;
}

.banner .top-right {
  top : 1rem;
  right: -0.5rem;
  transform: rotate(45deg);
  background-color:greenyellow;
}

.bg-winner {
  background-color: red;
  transform: rotate(45deg);
  right : -2rem;
  box-shadow: 1rem 1rem 1rem #111;
}

.canvas {

  min-height:60vh;
  min-width:50hw;
  position:relative;
  z-index:1000;
}

.canvas-popup {
  position: absolute;
  z-index: 1001;
  background-color: rgba(0,0,0,0.5);
  color:#eeeeee;
  top : 1em;
  left: 1em;
  min-width: 200px;
  min-height : 150px;
  max-width: 800px;
  max-height : 40vh;
}

.fs-1 {
  font-size: clamp(3rem, 5vw, 4.25rem);   /* Hero title */
  line-height: 1.1;
  font-weight: 600;
}

.fs-2 {
  font-size: clamp(2.25rem, 4vw, 3rem);   /* Section titles */
  line-height: 1.15;
  font-weight: 600;
}

.fs-3 {
  font-size: clamp(1.75rem, 3vw, 2.25rem); /* Subtitles */
  line-height: 1.25;
  font-weight: 500;
}

.fs-4 {
  font-size: 1.375rem; /* Prominent body / lead text */
  line-height: 1.6;
  font-weight: 400;
}

.fs-5 {
  font-size: 1.125rem; /* Standard body text */
  line-height: 1.6;
  font-weight: 400;
}

.fs-6 {
  font-size: 1rem; /* Small UI / meta text */
  line-height: 1.5;
  font-weight: 400;
}