/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/**
 * copyright 2022 codewithsadee
 */





/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  --imperial-red_12: hsla(357, 86%, 57%, 0.12);
  --pacific-blue_12: hsla(188, 78%, 41%, 0.12);
  --davys-gray_12: hsla(210, 9%, 31%, 0.12);
  --imperial-red: hsl(357, 86%, 57%);
  --sonic-sliver: hsl(0, 0%, 47%);
  --pacific-blue: hsl(188, 78%, 41%);
  --blue-ryb_12: hsla(220, 100%, 50%, 0.12);
  --space-cadet: hsl(220, 41%, 20%);
  --eerie-black: hsl(214, 10%, 13%);
  --davys-gray: hsl(210, 9%, 31%);
  --emerald_12: hsla(144, 62%, 53%, 0.12);
  --cool-gray: hsl(225, 11%, 59%);
  --cultured: hsl(225, 20%, 96%);
  --blue-ryb: hsl(220, 100%, 50%);
  --black_08: hsla(0, 0%, 0%, 0.06);
  --black_12: hsla(0, 0%, 0%, 0.12);
  --coral_12: hsla(15, 100%, 65%, 0.12);
  --sunglow: hsl(44, 100%, 61%);
  --emerald: hsl(144, 62%, 53%);
  --onyx-2: hsl(210, 10%, 23%);
  --coral: hsl(15, 100%, 65%);
  --white: hsl(0, 0%, 100%);
  --onyx: hsl(207, 8%, 21%);
  --back-odds: hsl(206, 96%, 82%);
  --lay-odds: hsl(350, 83%, 88%);

  /**
   * typography
   */

  --ff-vietnam: "Be Vietnam Pro", sans-serif;

  --fs-1: 1.563rem;
  --fs-2: 1.5rem;
  --fs-3: 1.25rem;
  --fs-4: 1.078rem;
  --fs-5: 1rem;
  --fs-6: 0.938rem;
  --fs-7: 0.875rem;
  --fs-8: 0.844rem;
  --fs-9: 0.813rem;
  --fs-10: 0.769rem;

  --fw-500: 500;
  --fw-600: 600;

  /**
   * transition
   */

  --transition: 0.25s ease;
  --cubic-out: cubic-bezier(0.45, 0.85, 0.5, 1);
  --cubic-in: cubic-bezier(0.5, 0, 0.50, 0.95);

  /**
   * radius
   */

  --radius-6: 6px;

  /**
   * shadow
   */

  --shadow-1: 0 12px 20px hsla(210, 10%, 23%, 0.07);
  --shadow-2: 0 2px 10px hsla(0, 0%, 0%, 0.04);
  --shadow-3: 0 2px 20px var(--black_08);

}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

a,
img,
span,
data,
time,
input,
button,
span.icon {
  display: block;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

html {
  font-family: var(--ff-vietnam);
  scroll-behavior: smooth;
}

body {
  padding-block-start: 72px;
  background: var(--cultured);
}

:focus-visible {
  outline: 2px solid var(--onyx);
  outline-offset: 1px;
}

/*-----------------------------------*\
  #PRELOADER
\*-----------------------------------*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.svg-icon {
  width: 150px;
  /* Initial size */
  height: 150px;
  /* Initial size */
  animation: zoomIn 1s ease-in-out infinite;
}

@keyframes zoomIn {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
    /* Final size */
  }
}

.content {
  display: none;
  /* Hide content initially */
}

.preloader.loaded {
  display: none;
}

/*-----------------------------------*\
  #PRELOADER
\*-----------------------------------*/

.home {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
}

.home .task-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 3rem 3rem;
}

.home .task-card .card-icon.grey {
  --background: var(--davys-gray_12);
  --color: var(--davys-gray);
}

.home .task-card .card-data {
  color: var(--onyx-2);
  font-size: var(--fs-1);
  font-weight: var(--fw-600);
  margin-bottom: 0.625rem;
  margin-top: 1rem;
}

.home .task-card .incorrect-key {
  color: var(--imperial-red);
  font-size: var(--fs-6);
  visibility: hidden;
}

.card {
  background: var(--white);
  position: relative;
  border-radius: var(--radius-6);
  box-shadow: var(--shadow-2);
}

.grid-container-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.625rem;
  gap: 1rem;
}

.card-badge {
  background: var(--bg, var(--davys-gray_12));
  color: var(--color, var(--davys-gray));
  font-size: var(--fs-3);
  font-weight: var(--fw-600);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-6);
}

.card-badge.grey {
  --background: var(--davys-gray_12);
  --color: var(--davys-gray);
}

.form-control {
  border: 1px solid var(--black_12);
  display: block;
  width: 7.5rem;
  height: 2.5rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-6);
  font-family: var(--ff-vietnam);
  color: var(--onyx-2);
  background: 0 0;
}

.form-control:focus {
  border-color: var(--onyx-2);
  outline: none;
}

@media (max-width: 414px) {

  html {
    font-size: 75%;
    /* 1rem = 12.8px */
  }


}