@media screen and (min-width: 800px) {
    body {
      width:60%;
      margin: 0 auto;
  }

    h2 {margin-bottom: -94px;}

  }
  
  @media screen and (max-width: 1300px) {
    body {
      width:90%;
      margin: 0 auto;
    }
  }
  
  @media screen and (max-width: 900px) {
  h2 {margin-bottom: -114px;}
  .illu {opacity:0;}
  }
  
  body {
    margin-top: 50vh;
    transform: translateY(-50%);
    background: white;
  }
  
  
  h1 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 38px;
    line-height: 46px;
    color: #111111;
    margin-bottom: 16px;
  }

  h2 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
  }

  h3 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #666666;
  }
  h3 a {color: #666666;}
  h3 a:hover {color: black;}
  
  #search-bar {
    /* This bit sets up the horizontal layout */
    display:flex;
    flex-direction:row;
    justify-content: space-between;
  
    /* This bit draws the box around it */
    border: 1px solid #E5E5E5;
    border-radius: 5px;
    background: #FFFFFF;
  
  }
  #search-bar:hover {
    border: 1px solid #939EAE;
  }
  
  /* Add the focus effect to the form so it contains the button */
  #search-bar:focus-within { 
    border: 1px solid #118CFD;
    box-shadow: 0px 0px 0px 3px rgba(17, 140, 253, 0.25);
    border-radius: 5px; 
  
  }
  #search-bar svg {
    margin:10px
  }
  
  
  input {
    /* Tell the input to use all the available space */
    flex-grow:2;
    /* And hide the input's outline, so the form looks like the outline */
    border:none;
  
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
  }
  
  /* remove the input focus blue box, it will be in the wrong place. */
  input:focus {
    outline: none;
  }
  
  /* remove autofill style */
  input:-webkit-autofill,input:-webkit-autofill:focus {
      transition: background-color 600000s 0s, color 600000s 0s;
    }
  
  
  .red-btn {
    border:0;
    background: #E16259;
    border-radius: 3px;
    color:white;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 23px;
    padding: 6px 18px;
    margin:4px;
  }
  .red-btn:hover {
    background: #EB5757
  }
  
  
  #copy-bar {
    height: 40px;
    width: 80px;
    width: fit-content;
    margin-top:24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 8px 4px 4px;
    gap: 12px;
    border: 1px solid #E5E5E5;
    border-radius: 5px;
  }
  
  
  #favicon {
    background: white;
    width:32px;
    height:32px;
  
  }
  
  .white-btn {
    background: #FFFFFF;
    box-shadow: 0px 0px 0px 1px rgba(15, 15, 15, 0.1), 0px 2px 4px rgba(15, 15, 15, 0.1);
    border:none;
    border-radius: 3px;
    padding:5px;
    height:24px;
  }
  
  .white-btn:hover {
    background: #EFEFEE;
  }
  
  .illu {
    margin-bottom: -20px;
    margin-right: 48px;
    position:relative;
    left: calc(100% - 256px - 48px);
    z-index:20;
    text-align:right;
  }