@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'BoxingStriped';
  src: url('../fonts/transfonter.org-20250914-064039/BOXING.woff2') format('woff2'),
       url('../fonts/transfonter.org-20250914-064039/BOXING.woff') format('woff'),
       url('../fonts/transfonter.org-20250914-064039/BOXING.eot') format('eot');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


html {
  background-color: black;
}
body {
  font-family: Montserrat, sans-serif;
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
  color: white;
  background-color: black;
  position: relative;
  overflow: visible;
}
[class~="spinner"] { border: 0.25rem solid #f3f3f3; border-top: 0.25rem solid #007bff; border-radius: 50%; width: 2.5rem; height: 2.5rem; animation: spin 1s linear infinite; margin-bottom: 0.625rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } [class~="loader"] { display: flex; gap: 0.625rem; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); } [class~="dot"] { width: 1.25rem; height: 1.25rem; background-color: rgba(255, 255, 255, 0.404); border-radius: 50%; animation: bounce 0.6s infinite alternate; } [class~="dot"]:nth-child(2) { animation-delay: 0.2s; } [class~="dot"]:nth-child(3) { animation-delay: 0.4s; } @keyframes bounce { to { transform: translateY(-1.25rem); } } [class~="capsule"] { display: flex; width: 100%; position: relative; } [class~="capsule"] [class~="capsule-container"] { display: flex; width: 75rem; margin: auto; } [class~="import"] { display: flex; padding: 0rem; display: flex; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #1a1b1f; background: #292f42; border-radius: 0.9375rem; transition: 0.2s ease-in-out; width: 50rem; min-height: 25rem; border-radius: 0.625rem; } [class~="import"] [class~="import-container"] { display: flex; } [class~="import"] [class~="import-container"] [class~="leftside"] { display: flex; align-items: center; justify-content: center; padding: 1rem; line-height: 2; max-width: 30%; min-width: 30%; } [class~="import"] [class~="import-container"] [class~="leftside"] [class~="message"] { display: flex; flex-direction: column; align-items: center; height: fit-content; gap: 2rem; } [class~="import"] [class~="import-container"] [class~="leftside"] [class~="message"] p { font-size: 0.8125rem; text-align: center; text-overflow: yes; } [class~="import"] [class~="import-container"] [class~="leftside"] [class~="message"] svg { height: 2rem; } [class~="import"] [class~="import-container"] [class~="rightside"] { width: 70%; display: flex; flex-direction: column; border-left: solid 0.0.3125rem rgba(128, 128, 128, 0.226); background: rgba(0, 0, 0, 0.24); position: relative; border-top-right-radius: 0.625rem; border-bottom-right-radius: 0.625rem; }



.import .import-container .rightside .section1 {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  justify-content: flex-end;

  background-image: radial-gradient(
      circle at center,
      transparent 0%,
      rgba(0, 0, 0, 50) 100%
    ),
    url("../images/background.png");
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}


[class~="import"] [class~="import-container"] [class~="rightside"] [class~="section1"] [class~="section1-container"] { display: flex; flex-direction: column; height: fit-content; padding: 0.7rem; background: black; gap: 0.625rem; justify-content: flex-end; background: #0e0f17; padding-top: 2rem; padding-bottom: 1rem; border-bottom-right-radius: 0.625rem; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section1"] [class~="section1-container"] [class~="click"] { display: flex; width: 100%; background: #292f42; padding: 1rem; border-radius: 0.9375rem; gap: 1rem; align-items: center; cursor: pointer; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section1"] [class~="section1-container"] [class~="click"] p { color: #3498db; font-size: 0.8125rem; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section1"] [class~="section1-container"] [class~="click"] svg { fill: #3498db; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section1"] [class~="section1-container"] [class~="exit"] { display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 0.5rem; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section1"] [class~="section1-container"] [class~="exit"] p { font-size: 0.75rem; color: grey; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section2"] { display: flex; padding: 2rem 1rem; flex-direction: column; gap: 2rem; width: 100%; display: none; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section2"] [class~="top"] { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section2"] [class~="top"] [class~="back"] { cursor: pointer; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section2"] [class~="top"] button { padding: 0.5rem; font-size: 0.75rem; border-radius: 0.3125rem; font-family: montserrat, sans-serif; border: none; font-weight: 500; background-color: #51e0cf; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section2"] [class~="bottom"] { display: flex; gap: 0.3125rem; flex-direction: column; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section2"] [class~="bottom"] h2 { font-size: 1.25rem; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section2"] [class~="bottom"] p { font-size: 0.75rem; padding-top: 1rem; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] { display: flex; padding: 2rem 1rem; flex-direction: column; gap: 2rem; width: 100%; display: none; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] [class~="top"] { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] [class~="top"] [class~="back"] { cursor: pointer; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] [class~="top"] button { padding: 0.5rem; font-size: 0.75rem; border-radius: 0.3125rem; font-family: montserrat, sans-serif; border: none; font-weight: 500; background-color: #51e0cf; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] [class~="bottom"] { display: flex; gap: 0.3125rem; flex-direction: column; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] [class~="bottom"] h2 { font-size: 1.25rem; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] [class~="bottom"] p { font-size: 0.75rem; padding-top: 1rem; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] [class~="bottom"] [class~="private-grid"] { padding: 1rem; border-radius: 0.3125rem; margin-top: 1rem; height: 4.375rem; background-color: #292f42; border: none; cursor: pointer; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] [class~="bottom"] [class~="private-grid"] input { flex: 1; padding: 0.5rem 0.8rem; border: none; border-radius: 0.25rem; font-size: 0.75rem; outline: none; transition: border-color 0.2s; background: #292f42; color: white; width: 100%; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] [class~="bottom"] [class~="private-grid"] input:focus { border-color: #007bff; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] [class~="bottom"] [class~="private-grid"] input[class~="invalid"] { border-color: #dc3545; } [class~="input-group"] { display: flex; align-items: center; width: 100%; } [class~="input-group"] span { width: 1rem; text-align: right; margin-right: 0.5rem; color: #666; font-size: 0.75rem; } input { flex: 1; padding: 0.5rem 0.8rem; border: none; border-radius: 0.25rem; font-size: 0.75rem; outline: none; transition: border-color 0.2s; background: #292f42; color: white; width: 100%; } input:focus { border-color: #007bff; } input[class~="invalid"] { border-color: #dc3545; } [class~="submit-btn"]:hover { background: #0056b3; } [class~="submit-btn"]:disabled { background: #6c757d; cursor: not-allowed; } [class~="submit-btn2"]:disabled { background: #6c757d; cursor: not-allowed; } [class~="error"] { color: #dc3545; text-align: center; margin-top: 1rem; display: none; color: #dc3545; text-align: center; margin-top: 1rem; display: none; font-size: 0.8125rem; justify-content: center; align-items: center; } [class~="toggle-container"] { display: flex; justify-content: center; margin-bottom: 1rem; padding-top: 1rem; } [class~="toggle-btn"] { padding: 0.5rem 1rem; margin: 0 0.5rem; border: none; border-radius: 0.25rem; background: #ddd; cursor: pointer; font-size: 0.8125rem; transition: background 0.2s; } [class~="toggle-"]btn[class~="active"] { background: #007bff; color: white; } [class~="toggle-btn"]:hover:not([class~="active"]) { background: #ccc; } [class~="seed-grid"] { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1rem; } [class~="seed-"]grid[class~="words-24"] { grid-template-columns: repeat(6, 1fr); } [class~="input-group"] { display: flex; align-items: center; } [class~="submit-btn"]:hover { background: #0056b3; } [class~="submit-btn"]:disabled { background: #6c757d; cursor: not-allowed; } #errorMsg { color: #dc3545; text-align: center; margin-top: 1rem; display: none; font-size: 0.8125rem; justify-content: center; align-items: center; } #errorMsg2 { color: #dc3545; text-align: center; margin-top: 1rem; display: flex; font-size: 0.8125rem; justify-content: center; align-items: center; } @media (max-width: 75rem) { [class~="capsule"] [class~="capsule-container"] { width: 100%; padding: 1rem; } } @media (max-width: 53.125rem) { [class~="capsule"] { padding: 2rem; } [class~="import"] { width: 90%; } } @media (max-width: 46.875rem) { [class~="import"] [class~="import-container"] [class~="leftside"] [class~="message"] p { font-size: 0.6875rem; } } @media (max-width: 34.375rem) { [class~="loader"] { top: 25%; } [class~="import"] [class~="import-container"] [class~="leftside"] [class~="message"] { gap: 1rem; } [class~="import"] [class~="import-container"] { flex-direction: column; width: 100%; } [class~="import"] [class~="import-container"] [class~="leftside"] { min-width: 100%; max-width: 100%; } [class~="import"] [class~="import-container"] [class~="rightside"] { min-width: 100%; width: 100%; height: 100%; border-bottom-right-radius: 0.625rem; border-bottom-left-radius: 0.625rem; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section1"] { border-top-right-radius: 0rem; border-top-left-radius: 0rem; border-bottom-right-radius: 0.625rem; border-bottom-left-radius: 0.625rem; width: 100%; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section1"] [class~="section1-container"] { display: flex; border-bottom-right-radius: 0.625rem; border-bottom-left-radius: 0.625rem; } [class~="import"] [class~="import-container"] [class~="rightside"] [class~="section3"] { min-width: 100% !important; } }