@font-face { font-family: 'fontDos'; src: local('fonts/Eutemia.ttf'); } * {box-sizing: border-box;} body{ background-color: #4D5157; font-family: "fontDos" } h1{ color: #2FF924; font-weight: bold; } /* Modal Stuff */ .avatar { border-radius: 20px; width: 100%; } .modalHeaderWrapper{ text-align: center; margin: 0; width: 100%; } .closeModalButton { border-radius: 50px; } .modalButton{ position: absolute; top: 0; right: 0; padding: 6px; padding: 9px 25px; background-color: rgba(0,136,169,1); border: none; border-radius: 50px; cursor: pointer; transition: all 0.3 ease 0; margin: 3%; font-size: 1.2rem; } .modalButton:hover{ background-color: rgba(0,136,169,0.8); } /* To unduck chrome modal pic size */ .modal-header img { max-width: 15rem; height: auto; padding: .3rem; } /* Move On */ .moveOn{ display: inline-block; border: none; padding: 6px 12px; margin-botton: 0; font-size: 1rem; font-weight: normal; text-align: center; cursor: pointer; border-radius: 4px; background-color: #4BB543; color: white; } button:disabled{ opacity: 0.5; cursor: not-allowed; } /* Pood Itself */ .main { padding: 1% 10%; display: flex; flex-wrap: wrap; justify-content: center; } h3, h5 { text-align: center; } /* PoeKaart */ .card { margin: 2rem .5rem; padding: .5rem; width: calc(20% - 1rem); color: black; background-color: #D22730; } .card img { height: 57%; } .card-body{ padding: 0; margin: 0; } .cardInnerWrapper { background-color: white; display:flex; paddig: 0; margin: 0; } .rublaHind, .symbol{ font-size: 1.5rem; } .uno { width: 50%; border-right: .5rem solid #D22730; } .dos { border-left: .5rem solid #D22730; width: 50%; } .dos input { width: 80%; margin-bottom: 1rem; } .kontrolliKaarti{ margin-top: 1rem; display: inline-block; border: none; padding: 3px 6px; margin-botton: 0; font-size: 1.07rem; font-weight: normal; text-align: center; cursor: pointer; border-radius: 4px; background-color: #006E33; color: white; } /* Media Querries*/ @media screen and (max-width: 1650px) { .card{ width: calc(25% - 1rem); } }