body{ width: 100vw; height: 100vh; margin: 0; color: #f4f09c; } #root{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle, rgba(131,58,180,1) 0%, rgba(6,25,186,1) 28%, rgba(46,60,168,1) 100%); } .wrapper{ width: 800px; height: 400px; background-color: #2e3ca8; } .informBlockWrapper{ width: 100%; height: 40%; display: flex; flex-direction: column; } .currencyBlockWrapper{ width: 100%; height: 50%; display: flex; justify-content: space-around; align-items: end; } .currencyBlockWrapperValue{ display: flex; justify-content: space-around; } .tableHeader{ display: flex; width: 100%; } .blockTitle{ width:50%; font-size: 25px; padding: 0 30px 5px; } .titleHeaderRight{ padding-left: 90px; } .currencyBlock{ background-color: #2e3ca8; height: 50px; display: flex; cursor: pointer; padding:10px 35px; } .exchangeRatesWrapper{ width: 100%; height: 50%; } .converterWrapper{ width: 100%; height: 50%; display: flex; color: #f4f09c; } .converterBlock{ width: 45%; height: 100%; border: 1px solid grey; display: flex; flex-direction: column; justify-content: center; } .converterBlockCenter{ width: 10%; display: flex; justify-content: center; align-items: center; } .converterBlockTitle{ font-size: 20px; width: 100%; padding-top: 10px ; padding-left: 20px; } .fa-sync-alt{ font-size: 35px; color: #D6BD22; padding: 15px; } i:hover{ cursor: pointer; -webkit-transform: rotate(180deg); transform: rotate(180deg); transition: 0.3s ; } .converterCurrency{ color: #FFF; height: 70px; margin: 20px 0 0 10px; font-size: 36px; font-weight: 700; margin-bottom: 7px; width: calc(100% - 20px); box-sizing: border-box; background-color: transparent; border: none; border-bottom: 2px solid #c5ea9d; outline: none; } .converterBlockInfo{ padding-left: 20px; }