@import 'fonts.css';



/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* font-family:  'Crimson Pro', */
  /* font-family:  'Bona Nova', */
  font-family:  'Montserrat',
  /* font-family:  'ProximaNova', */
  /* font-family:  'Open Sans', */
                'OpenSans-Semibold',
                'sans-serif',
                'Cantarell',
                'Ubuntu',
                'Oxygen',
                '-apple-system',
                'BlinkMacSystemFont',
                'Segoe UI',
                'Roboto';
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* VARIABLES */
:root {
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;

  --radius: 8px;
  --radius-16: 16px;
  --radius-30: 30px;
  --radius-9999: 9999px;

  --color-white: rgba(255, 255, 255, 1);
  --color-light-250: rgba(250, 250, 250, 1);
  --color-light-250-opacity: rgba(250, 250, 250, 0.5);
  --color-light-239: rgba(239, 239, 239, 1);
  --color-light-221: rgba(221, 221, 221, 1);
  --color-dark-99: rgba(99, 99, 99, 1);
  --color-dark-33: rgba(33, 33, 33, 1);
  --color-black: rgba(0, 0 , 0, 0.6);

  --color-orange: rgba(255, 80, 0, 1);
  --color-green: rgba(156, 196, 169, 1);
  --color-blue: rgba(0, 123 , 255, 1);
  --color-dark-blue: rgba(52, 39, 114, 0.8);

  --color-border-33: rgba(33, 33, 33, 1);
  --color-border-99: rgb(221, 221, 221, 1);
  
  --color-text-white: rgb(255, 255, 255, 1);
  --color-text-light: rgb(250, 250, 250, 1);
  --color-text-dark: rgb(33, 33, 33, 1);
  --color-text-blcak: rgb(0, 0, 0, 1);

  --mobile: 440px;
}

/* TYPOGRAPHY */
h1, h2, h3 {
  margin: 0;
}
footer h1 {
  font-size: 1rem;
}

ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.nowrap-li > li {
  width: auto;
  white-space: nowrap;
}
a {
  text-decoration: none;
  color: var(--color-dark-33);
}
a:hover {
  color: var(--color-dark-99);
  cursor: pointer;
}


select,
input {
  width: 100%;
  height: 39px; 
  background: var(--color-white);
  border: 1px solid var(--color-light-221);
  color: var(--color-dark-99); 
  margin: auto;
  padding-left: 0.5rem;
  box-sizing: border-box;
  font-size: 1rem;
}
input:focus {
  outline: none;
  border: 1px solid var(--color-dark-99);
}
input::placeholder {
  color: var(--color-light-221); 
}

/* 
* Inital google icon
*/
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 40
}
.material-symbols-outlined {
  font-size: 2rem;
}


i {
  font-size: 1.5rem;
}
.padding-1rem {
  padding: 1rem;
}


.tip,
.errorlist {
  color: var(--color-orange)
}
.tip,
.tip span {
  display: block;
  height: 30px;
}
.tip {
  overflow: hidden;
}


@media (max-width: 860px) {
  body {
    position: relative;
    background: var(--color-light-250);
    /* left: 0; */
    /* transition: left 0.3s; */
  }
 
  .material-symbols-outlined {
    font-size: 1.8rem;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1rem;
  }

  /* input[type='text'] { */
  input {
    width: 100%;
    height: 50px;
  }
}