/* import poppins font family (having a variety of fonts like bold, extra bold , loght etc ) */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@300;400;500;600;700;800&display=swap'); /* ^^ How to use? :->To specify a particular weight or style for the Poppins font in your p element, you can use the font-weight and font-style properties, respectively. For example, if you want to use the 500 (medium) weight and normal style. You can write: */ p { font-family: 'Poppins', sans-serif; font-weight: 500; font-style: normal; /* no bold,italic etc */ } *{ margin: 0; padding: 0; } body{ display: flex; justify-content: center; align-items: center; /* .container is only flex item */ min-height: 100vh; /* Force body to take whole viewport height (thus comes at center bcz we have container(as its flex item) which must fill in viewport height */ background-color: #3c6e71; background: linear-gradient(45deg,#353535,#3c6e71); } .container{ background-color: #ffffff; padding: 2rem; /* rem : retaive to root font size , which is mostlt 16px to browsers (1rem = 16px for most of browsers) */ border-radius: 1rem; min-height: 45vh; min-width: 40vw; border: 2px solid #d9d9d9; box-shadow: 0 0 20px #d9d9d9; } form{ /* top right bottom left */ margin: 2rem 0 1rem 0; } form input,select,button{ width: 100%; /* % relative to parent i.,e
*/ border: none; /* we give below custom boder */ outline: none; /*for input and select actually: so that when we go there e.g to input amount, we will not get default outline */ border-radius: 0.75rem ; } form input{ border:1px solid rgb(224, 219, 219); font-size: 1rem; padding: 0.5rem; } .dropdown{ /* align From */ display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; } .select-container img{ max-width: 2rem; /* make img(flag) smaller */ } .select-container{ display: flex; /* img and dropdown in same line */ justify-content: center; align-items: center; border: 1px solid rgb(224, 219, 219); width: 6rem; /* little bit bigger */ border-radius: 0.5rem; } /* adjust size of Selected country */ .select-container select{ font-size: 1rem; width: auto; /* default : The browser calculates the width (inside allowed width (select-container just above as 6rem)*/ } /* Place well icon b/w From and To boxes */ .dropdown i{ font-size: 1.5rem; margin-top: 1rem; } .msg{ padding: 0.25rem; margin-top: 2rem; margin-bottom: 2rem; font-size: 1.1rem; font-weight: 600; border: none; outline: none; box-shadow: 0 0 .51px #353535; border: 0.2px solid rgb(224, 219, 219); } form button{ height: 3rem; /* enlarge */ background-color: #353535; color: #fff; font-weight: 600; font-size:1.13rem; /* enlarge */ cursor: pointer; }