@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

@font-face {
  font-family: "prophet";
  src: url("/fonts/Prophet-Medium.otf");
}

/*  fonts styles don't exist in design system comment out for now */
/* @font-face {
  font-family: "area-inktrap";
  src: url("/fonts/Area-Medium-Inktrap.otf");
} */
/* 
@font-face {
  font-family: "apoc";
  src: url("/fonts/Apoc-Regular.otf");
} */

@font-face {
  font-family: "inter", sans-serif;
  font-weight: 300 700;
  /* Supports range from light to bold */
  src: local("Inter");
  /* Uses the imported Google Font */
}

:root {
  --primary-color: #011402;
  --secondary-color: #f7f7f7; /* propose to use  #f7f7f7 not #f2eee7 for a mores subtle off white */
  --tertiary-color: #fefffe;
  --green-color: #03ffa8;
  /* digital green in design file */
  --light-green-color: #81ffd3;
  --mid-green-color: #1dbb6c;
  /* green color in design file */
  --dark-green-color: #1b643a;
  --very-dark-green-color: #374235;
  --white-color: #fefffe;
  --dark-grey-color: #374235;
  --medium-light-grey-color: #8C9089;
  --light-grey-color: #e1dddd;
  --very-light-grey-color: #f2f2f2;
  --hover-light-grey-color: #f5f5f5a8;
  --red-color: #d3281f;
  --grey-color: #ebe9e9;
  --default-select-icon-color: #00000040;
  --disabled-overlay-color: #000901d6;

  background-color: var(--primary-color);
}

h1,
h2 {
  font-family: "prophet";
}

h3,
h4,
h5,
h6 {
  font-family: "inter";
}

body {
  background-color: var(--secondary-color);
  font-family: "inter";
  color: var(--primary-color);
  font-size: 100%;
}

h1 {
  font-size: 3.2em;
  font-weight: 100;
  color: var(--primary-color);
}

h2 {
  font-size: 1.5em;
  font-weight: 100;
  color: var(--primary-color);
}

h3 {
  font-size: 1.25em;
  font-weight: 100;
  color: var(--primary-color);
}

h4 {
  font-size: 1.2em;
  font-weight: 100;
  color: var(--medium-light-grey-color);
}

p {
  font-family: "inter";
  font-size: 1em;
  font-weight: 100;
  color: var(--primary-color);
}

.ant-tabs-nav-operations {
  display: none !important;
}

.ant-tabs-nav {
  animation: slideInTop 1s;
}

.main-content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  align-items: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.rolling-text {
  display: inline-block;
  position: relative;
  height: 2rem;
  /* Adjust based on font size */
  overflow: hidden;
  font-size: 2rem;
  font-weight: bold;
  color: white;
}

.rolling-text span {
  display: block;
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: roll 8s infinite;
}

.rolling-text span:nth-child(1) {
  animation-delay: 0s;
}

.rolling-text span:nth-child(2) {
  animation-delay: 2s;
}

.rolling-text span:nth-child(3) {
  animation-delay: 4s;
}

.rolling-text span:nth-child(4) {
  animation-delay: 6s;
}

@keyframes roll {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  10% {
    transform: translateY(0%);
    opacity: 1;
  }

  25% {
    transform: translateY(0%);
    opacity: 1;
  }

  35% {
    transform: translateY(-100%);
    opacity: 0;
  }

  40% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideInTop {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideInBottom {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.switch-container {
  display: flex;
  flex-direction: row;
  gap: 0.1em;
  align-items: center;
}
.soft-shadow {
  box-shadow: 0px 0px 0.36em 0.18em rgba(0, 0, 0, 0.02);
}

.modal-shadow {
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}