@font-face {
  font-family: 'OpenSans';
  src:url('../Fonts/OpenSans-Italic.otf'),
      url('../Fonts/OpenSans-Italic.woff') format('woff'),
      url('../Fonts/OpenSans-Italic.ttf') format('truetype'),
      url('../Fonts/OpenSans-Italic.svg') format('svg');
}
:root {
    --primary-light: #7FC2E7;
    --primary: #008BCC;
    --primary-dark: #233589;
    --white: #FFFFFF;
    --greyLight-1: #E4EBF5;
    --greyLight-2: #c8d0e7;
    --greyLight-3: #bec8e4;
    --greyDark: #9baacf;
  }
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
  }
  html {
    box-sizing: border-box;
    font-size: 62.5%;
    overflow-y: scroll;
    background: var(--greyLight-1);
  }
  @media screen and (min-width: 900px) {
    html {
      font-size: 75%;
    }
  }
  .container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'OpenSans';
    font-weight: 700;
    background: var(--greyLight-1);
  }
  .components {
    width: 37rem;
    height: 40rem;
    border-radius: 3rem;
    box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white);
    padding: 4rem;
    display: grid;
    
    grid-template-rows: repeat(autofit, min-content);
    grid-column-gap: 5rem;
    grid-row-gap: 2.5rem;
    align-items: center;
  }
  
  /*  BUTTONS  */
  .btn {
    width: 15rem;
    height: 4rem;
    border-radius: 1rem;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
  }
  
  .btn__secondary {
    margin-left: -2em;

    background: var(--primary);
    box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), inset -0.2rem -0.2rem 1rem var(--primary-dark), 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
    color: var(--greyLight-1);
  }
  .btn__secondary:hover {
    color: var(--white);
  }
  .btn__secondary:active {
    box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), inset -0.2rem -0.2rem 1rem var(--primary-light);
  }
  .btn p {
    font-size: 1.6rem;
  }
  
  /*  FORM  */
  .form {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  /*  SEARCH  */
  .search {
    position: relative;
    display: flex;
    align-items: center;
  }
  .search__input {
    width: 29rem;
    height: 4rem;
    border: none;
    border-radius: 1rem;
    font-size: 1.4rem;
    padding-left: 3.8rem;
    box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
    background: none;
    font-family: inherit;
    color: var(--greyDark);
  }
  .search__input::placeholder {
    color: var(--greyLight-3);
  }
  .search__input:focus {
    outline: none;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  }
  .search__input:focus + .search__icon {
    color: var(--primary);
  }
  .search__icon {
    height: 2rem;
    position: absolute;
    font-size: 2rem;
    padding: 0 1rem;
    display: flex;
    color: var(--greyDark);
    transition: 0.3s ease;
  }
  /*  SEGMENTED-CONTROL */
  .segmented-control {
    /* grid-column: 1 / 4;
    grid-row: 1 / 2; */
    width: 29rem;
    height: 10rem;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    position: relative;
  }
  
  .segmented-control img{
    width: 28rem;
    height: 9rem;
  }