@font-face {
  font-family: 'Tomorrow-bold';
  src: url('/assets/Tomorrow-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tomorrow-medium';
  src: url('/assets/Tomorrow-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tomorrow-extrabold';
  src: url('/assets/Tomorrow-ExtraBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.center-container {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mainpage-card {
  background-color: transparent;
  position: relative;

  color: #E0E0E0;
  overflow: hidden;

  position: absolute;
  height: 20%;
  top: 3%;
  flex-direction: column;
  

  font-family: 'Tomorrow-medium';
}

.mainpage-card-background
{
  height: 85%;
  width: 70%;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 2%;
  bottom: 0%;
  object-fit: cover;
  filter: blur(0.9px);
  opacity: 0.7;
  z-index: 0;
}

.mainpage-card2-winbar
{
  position: absolute; 
  border-top-right-radius: 20%;
  background-image: linear-gradient(
      30deg,
      rgb(41, 136, 136),
      cyan 100%
    );
}

.mainpage-card2-lossbar
{
  position: absolute; 
  border-bottom-right-radius: 20%;
  background-image: linear-gradient(
      150deg,
      rgba(115, 74, 88, 0.5) ,
      rgba(117, 46, 124, 0.8) 20%,
      rgb(110, 42, 78) 40%,
      deeppink 100%
    );
}

.tagline-block 
{
  position: absolute;
  width: 90%;
  height: 80%;
  top: 21%;
  left: 6%;

  padding: 1rem 3rem 0 3rem;
  background-color: transparent;
  color: #E0E0E0;
  font-family: 'Tomorrow-medium';
  white-space: pre-wrap;
  line-height: 1.8;
}

.tagline 
{
  font-size: 34px;
  line-height: 1.3;
  background-color: transparent;
}

.tagline-emphasize
{
  font-size: 42px;
  color: rgb(0, 255, 225);
  font-family: 'Tomorrow-bold';
  line-height: 1.3;
  background-color: transparent;
}

.tagline-head
{
  font-size: 45px;
  font-family: 'Tomorrow-bold';
  line-height: 0.2;
  background-color: transparent;
}

.tagline-head-emphasize
{
  font-size: 100px;
  color: rgb(0, 255, 225);
  font-family: 'Tomorrow-bold';
  background-color: transparent;
}

.mainpage-data-graph
{
  position: absolute;
  height: 95%; 
  width: 96%;
  bottom: -1%;
  left: 1%;
}

.mainpage-data-graph-card
{
  position: absolute;
  height: 85%;
  width: 80%;
  top: 11%;
  left: 10%;
  background-color: #171718;
  border-radius: 40px;
}

.mainpage-data-graph-card-background
{
  height: 86%;
  width: 81%;
  background-color: #0c0c0c;
  transform: rotate(4deg);
}

.mainpage-scroll-btn
{
  position: absolute;
  top: 40%;
  
  font-size: 30px;
  z-index: 5;
  scroll-behavior: smooth;
  font-family: 'Tomorrow-bold';
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  color: transparent;
  background: 
		linear-gradient(90deg, 
                  deeppink 10%,
                  #e7e7e7 35%,
                  rgb(0,255,185) 49.9%,
                  #E0E0E0 50%,
                  #E0E0E0 100%) text;
  background-size: 200%; /* Make the gradient larger for animation */
  background-position:  right; /* Initial gradient start position */
}

@keyframes sliding-color
{
  0% {
    background-position: right;
  }
  100% {
    background-position: left;
  }
}

.mainpage-scroll-btn:hover
{
  animation: sliding-color 0.2s linear forwards;
  color: transparent
}

@keyframes breathing {
  0% { filter: drop-shadow(0px 0px 1px  white); }
  50% { filter: drop-shadow(0px 0px 10px rgba(0, 255, 255, 0.4))
                drop-shadow(0px 0px 5px rgba(211, 211, 211, 0.6))
                drop-shadow(0px 0px 2px white); }
  99% { filter: drop-shadow(0px 0px 1px  white); }
}

.mainpage-downarrow
{
  align-items: center;
  animation: breathing 3s infinite;
  margin-top: 2.2vh;
}

.mainpage-scroll-btn:hover .mainpage-downarrow
{
  filter: drop-shadow(0px 0px 10px rgba(0, 255, 255, 0.4))
          drop-shadow(0px 0px 5px rgba(211, 211, 211, 0.6))
          drop-shadow(0px 0px 2px white);
  animation: none;
}

.mainpage-graph2
{
  position: absolute;
  height: 90%;
  width: 90%;
  right: 3%;
  bottom: 3%;
}


@keyframes pink-breathing {
  0% { filter: 
          drop-shadow(0px 0px 12px rgba(204, 70, 70, 0.6)) 
          drop-shadow(0px 0px 10px rgba(207, 49, 123, 0.8)) 
          drop-shadow(0px 0px 2px deeppink); }
  50% { filter:
          drop-shadow(0px 0px 6px rgba(165, 80, 120, 0.6)) 
          drop-shadow(0px 0px 2px deeppink); }
  100% { filter: 
          drop-shadow(0px 0px 12px rgba(204, 70, 70, 0.6)) 
          drop-shadow(0px 0px 10px rgba(207, 49, 123, 0.8)) 
          drop-shadow(0px 0px 2px deeppink); }
}

.pink-filter
{
  animation: pink-breathing 3s infinite;
}

@keyframes white-breathing {
  0% { filter: 
          drop-shadow(0px 0px 12px rgba(0, 255, 255, 0.2)) 
          drop-shadow(0px 0px 10px rgba(211, 211, 211, 0.5)) 
          drop-shadow(0px 0px 2px rgba(224, 224, 224, 0.6)); }
  50% { filter:
          drop-shadow(0px 0px 6px rgba(211, 211, 211, 0.2)) 
          drop-shadow(0px 0px 2px rgba(224, 224, 224, 0.6)); }
  100% { filter: 
          drop-shadow(0px 0px 12px rgba(0, 255, 255, 0.2)) 
          drop-shadow(0px 0px 10px rgba(211, 211, 211, 0.5)) 
          drop-shadow(0px 0px 2px rgba(224, 224, 224, 0.6)); }
}

.white-filter
{
  animation: white-breathing 3s infinite;
}

@keyframes cyan-breathing {
  0% { filter: 
          drop-shadow(0px 0px 12px rgba(0, 255, 255, 0.4)) 
          drop-shadow(0px 0px 10px rgba(100, 211, 211, 0.5)) 
          drop-shadow(0px 0px 2px rgba(0, 255, 225, 0.7)); }
  50% { filter:
          drop-shadow(0px 0px 6px rgba(100, 211, 211, 0.5)) 
          drop-shadow(0px 0px 2px rgba(0, 255, 225, 0.7)); }
  100% { filter: 
          drop-shadow(0px 0px 12px rgba(0, 255, 255, 0.4)) 
          drop-shadow(0px 0px 10px rgba(100, 211, 211, 0.5)) 
          drop-shadow(0px 0px 2px rgba(0, 255, 225, 0.7)); }
}

.cyan-filter
{
  animation: cyan-breathing 3s infinite;
}

.mainpage-trade-plan-btn-group
{
  position: absolute;
  border: 2px solid #8e8e8e;
  width: 60%;
  top: 0%;
}

.mainpage-trade-plan-btn
{
  background-color: transparent;
  color: #E0E0E0;
  font-family: 'Tomorrow-bold';
  font-size: 17px;
  border: none;
}

.mainpage-trade-plan-btn-active
{
  background-color: rgb(0, 255, 235);
  color: #16191f;
  font-family: 'Tomorrow-bold';
  font-size: 17px;
  border: none;
}

.mainpage-trade-plan-btn-active:hover, .mainpage-trade-plan-btn-active:active{
  
  background-color: rgb(70, 255, 255) !important;
  color: #16191f !important;
}


.mainpage-trade-plan-btn:hover
{
  background-color: #202020 !important;
}

.mainpage-strategy-explain-card
{
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 12%;
  border-radius: 40px;
  background-color: #0e0e0f;
}

.mainpage-strategy-explain-card-background
{
  background-color: #0a0a0a;
  transform: rotate(-4deg);
}

.mainpage-strategy-expalin-block
{
  position: absolute;
  width: 85%;
  left: 6%;
  top: 4%;
  background-color: transparent;
  color: #E0E0E0;
  font-family: 'Tomorrow-medium';
  white-space: pre-wrap;
  line-height: 2.0;
  font-size: 24px;
}