@import url('https://fonts.googleapis.com/css2?family=Alkatra:wght@600&family=Montserrat:ital,wght@0,400;0,500;0,700;0,900;1,600&family=Open+Sans&family=Poppins:ital,wght@0,300;0,500;0,600;1,300;1,400;1,500&family=Raleway:ital,wght@1,900&family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkatra:wght@600&family=Montserrat:ital,wght@0,400;0,500;0,700;0,900;1,600&family=Open+Sans&family=Oswald:wght@200;300;400;600&family=Poppins:ital,wght@0,300;0,500;0,600;1,300;1,400;1,500&family=Raleway:ital,wght@1,900&family=Roboto:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #020510e7;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
      "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
  }
  body{
    background-color: var(--dark);
    color: var(--white);
  }


  /* Circular Progress Bar Styles */
.progress-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.progress-ring {
  transform: rotate(-90deg); /* Rotate it to start from the top */
}

.progress-circle,
.progress-fill {
  transition: stroke-dasharray 1s linear; /* Control the animation speed here */
}

.countdown {
  font-size: 2em;
  margin-top: 10px;
}
