@font-face {
  font-family: 'Feijoa-Medium';
  src: URL('Kinfolk-Font/Feijoa\ Medium.otf') format('opentype');
}

  body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    background: #F0F0F0;
    font-family: 'Feijoa-Medium';
    color: #1d22b9;
  }

  
  @media only screen and (max-width: 600px){
    img{
      width: 50vw;
    }
  
    .intro{
      padding: 4vw;
      margin: 2vw;
      white-space: pre-line;
    }
  
    input[type=text] {
      font-family: 'Feijoa-Medium';
      color: #1d22b9;
      text-align: center;
      box-sizing: border-box;
      font-size: 3vw;
      border: 0;
    }
  
    .button{
      background-color: #1d22b9;
      color: white;
      padding: 2vw 6vw;
      border: none;
      border-radius: 5px;
      font-family: 'Feijoa-Medium';
      font-size: 3vw;
      margin: 0;
    }
  
    form{
      width: 70vw;
    }

    select{
      font-family: 'Feijoa-Medium';
      color: #1d22b9;
      text-align: center;
      box-sizing: border-box;
      font-size: 1.5vw;
      border: 0;
      width: 50%;
      background-color: white;
    }

    .item-left{
      text-align: left;
      width: 80%;
      font-size: 3vw;
      margin: 1vw;
    }

    .item-right{
      width: 20%;
      font-size: 3vw;
      margin: 2vw;
    }
  }

  @media only screen and (min-width: 601px){
    img{
      width: 30vw;
    }
  
    .intro{
      padding-bottom: 2vw;
      margin-bottom: 1vw;
      white-space: pre-line;
      font-size: 1.5vw;
    }
  
    input[type=text] {
      font-family: 'Feijoa-Medium';
      color: #1d22b9;
      text-align: center;
      box-sizing: border-box;
      font-size: 1.5vw;
      border: 0;
    }
  
    .button{
      background-color: #1d22b9;
      color: white;
      padding: 1vw 3vw;
      border: none;
      border-radius: 5px;
      font-family: 'Feijoa-Medium';
      font-size: 1vw;
      margin: 0;
    }
  
    form{
      width: 50vw;
    }

    select{
      font-family: 'Feijoa-Medium';
      color: #1d22b9;
      text-align: center;
      box-sizing: border-box;
      font-size: 1.5vw;
      border: 0;
      width: 50%;
      background-color: white;
    }

    .item-left{
      text-align: left;
      width: 80%;
      font-size: 1.5vw;
      margin: 1vw;
    }

    .item-right{
      width: 20%;
      font-size: 1.5vw;
      margin: 1vw;
    }
  }

  input::placeholder{
    font-family: 'Feijoa-Medium';
    color: #1d22b9;
    text-align: center;
    opacity: 0.5;
  }

  .container{
    display: flex;
  }