* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 62.5%;
}

:root {
  --white: 255, 255, 255;
  --black: 0, 0, 0;
  --light-grey: 211, 211, 211;
  --dark-grey: 51, 51, 51;
  --main-yellow: 244, 208, 63;
  --light-yellow: 218, 247, 166;
  --dark-yellow: 255, 195, 0;
  --main-blue: 93, 173, 226;
  --light-blue: 133, 193, 233;
  --dark-blue: 63, 137, 187;
  --light-purple: 192, 165, 255;
}

body {
  /* background: rgba(var(--main-blue)); */
}

h1 {
  font-size: 5.5rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3.2rem;
}

h4 {
  font-size: 2.5rem;
}

h5 {
  font-size: 2rem;
}

p,
span {
  font-size: 1.5rem;
}

a {
  color: inherit;
  text-decoration: none;
}

input:valid {
  border-bottom: 1px rgba(var(--main-blue)) solid;
}
input:focus:invalid {
  border-bottom: 1px rgba(var(--main-yellow)) solid;
}

.btn,
.btn-yellow,
.btn-blue {
  text-transform: capitalize;
  border: none;
  border-radius: 0.6rem;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  padding: 0.7rem 5rem;
  margin: 1rem;
  text-decoration: none;
  color: rgba(var(--white));
  font-size: 1.7rem;
  font-weight: 400;
}

.btn__yellow {
  background-color: rgba(var(--main-yellow));
}
.btn__yellow:hover {
  background-color: rgba(var(--dark-yellow));
}

.btn__blue {
  background-color: rgba(var(--main-blue));
}

.btn__blue:hover {
  background-color: rgba(var(--dark-blue));
}

.btn:active {
  position: relative;
  top: 1px;
}

.loading__img {
  z-index: 2;
}

.loading__img__container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 1;
}

.card:first-child {
  background-color: aqua;
}
