:root {
  /* --main: #FEF9F3; */
  --main: #ffecc4;
  --logo: #BEA200;
  --back: #fff8e8;
  /* --gold: linear-gradient(15deg, #ffecc4 5%, hsl(51, 77%, 53%) 30%, hsl(51, 77%, 53%) 60%, #ffecc4 90%, #ffecc4) */
  --gold: linear-gradient(0deg, #ffecc4 5%, #fff8e8 50%, #fff8e8)
  /* --gold: linear-gradient(0deg, #ffecc4 2%, #fff8e8 10%, #fff8e8 80%, #ffecc4) */
  /* --gold: linear-gradient(0deg, hsl(51, 77%, 53%) 2%, #ffecc4 10%, #ffecc4 80%, hsl(51, 77%, 53%)) */
}

#root {
  overflow-x: hidden;
}

.logo-container {
  /* border: 3px solid var(--main); */
  padding: 5px 15px;
  border-radius: 900000px;
  font-weight: bold;
  position: relative;
  height: 4em;
  width: 11em;
}
.logo-container > img {
  position: absolute;
  color: white;
  height: 100%;
  bottom: 1.2em;
}

.bg-gold {
  background: var(--gold);
  /* color: white;
  fill: white; */
}
.bg-gold * {
  fill: white;
}
.bg-main {
  background: var(--main);
}
.border-main {
  border-color: var(--main);
}
.border-logo {
  border: 1px solid;
  border-color: var(--logo) !important;
}
.text-logo {
  color: var(--logo) !important;
}
.border-black {
  border-color: black;
}
.bg-sun {
  background: var(--back);
}

.header-sun {
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  position: absolute;
  /* background: #fff9f4; */
  background: var(--back);
  top: 0;
  right: 0;
  border-radius: 300em;
  transform: translate(50%, -50%);
  z-index: -1;
}
.content-sun {
  width: max(200vw, 100vh);
  height: max(200vw, 100vh);
  border-radius: 300em;
  position: absolute;
  background: var(--back);
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -1;
}

.homepage-computer-preview-container {
  width: 100%;
  z-index: -1;
}
.homepage-computer-preview-container > img {
  border: 2px solid var(--logo);
  border-radius: 10px;
  position: relative;
}

.homepage-phone-preview-container {
  height: 19em;
  z-index: 10;
  position: absolute;
  right: 2em;
  bottom: -3em;
  transform: translateZ(20px);
}
.homepage-phone-preview-container > img {
  border: 2px solid var(--logo);
  /* border: 2px solid black; */
  position: relative;
  border-radius: 10px;
}

.homepage-images-container {
  /* perspective: 60em; */
  perspective: 1000px;
  transform: translateX(-5px);
}
.homepage-images {
  transform-style: preserve-3d;
  animation: 3s infinite movemobile 0ms;
}

@keyframes movemobile {
  0% { transform: rotateY(-10deg); }
  50% { transform: rotateY(-15deg); }
  100% { transform: rotateY(-10deg); }
}

.quick-cards-icon-container {
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-cards-container {
}

.feature-cards-icon-container {
  height: 14em;
  background: white;
  margin-bottom: 2em;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid var(--logo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-cards-icon-container > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.feature-cards-container:nth-child(1) > .feature-cards-icon-container {
  padding: 1em 5em;
}
.feature-cards-container:nth-child(2) > .feature-cards-icon-container > img {
  object-fit: cover;
  height: auto;
  padding: 10px 15px;
}
.feature-cards-container:nth-child(3) > .feature-cards-icon-container > img {
  /* object-fit: cover; */
}
.feature-cards-container:nth-child(4) > .feature-cards-icon-container > img {
  object-fit: contain;
  padding: 10px 15px;
}

.input-outlined {
	background-color: var(--surface);
	color: var(--surface-text);
	border-color: var(--surface-text);
	border-width: 1px;
	border-radius: 5px;
	padding: 0.7em 1.2em;
	opacity: 50%;
}
.input-outlined:focus,
.input-outlined:hover {
	opacity: 100%;
}


.btn-contained {
	color: var(--logo);
	border: 1px solid var(--logo);
	border-radius: 5px;
	padding: 0.7em 1.2em;
}
.btn:disabled,
.btn-contained:disabled,
.btn-outlined:disabled,
.btn-2:disabled,
.btn-2-contained:disabled,
.btn-2-outlined:disabled {
	opacity: .5;
}