:root {
    --color-primary: rgb(15,215,239);
    --color-primary-rgb: 15,215,239;
    --color-primary-hex: #0fd7ef;
    --color-primary-light: #c9f3f5;
    --color-secondary: #239A9E;
    --color-tertiary: #22696B;
   
    --color-grey-light-1:#C5DBE0;
    --color-grey-light-2: #B1C5C9;
    --color-grey-light-3: #D3EBF0;
    --color-grey-light-4: #CAE1E6;

    --color-grey-light-4-rgb: 202,225,230;

    --color-grey-dark-1: #313A45;
    --color-grey-dark-2: #5F7085;
    --color-grey-dark-3: #677A91; 

    --shadow-dark: 0 2rem 6rem rgba(0,0,0,.3);
    --shadow-light: 0 2rem 5rem rgba(0,0,0,.06);


    --line: 2px solid var(--color-grey-dark-2); 
    --line-wht: 2px solid var(--color-grey-light-3); 

}

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

#root {
    height: 100vh;
    width: 80vw;
    border: var(--color-secondary) 3px solid;
    border-radius: 5px;
    background-color: var(--color-grey-dark-1);

   
  }

html {

    font-size: 62.5%; 
    box-sizing:  border-box;
  
}

body {
    
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 400;
   line-height: 1.6;
   color: var(--color-grey-dark-2);
   font-family: 'BenchNine', sans-serif;
   margin-top: 3rem;
   

}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
}