@font-face { font-family: "alkatara"; src: url(fonts/alkatra/alkatara.ttf); } @font-face { font-family: "bebas"; src: url(fonts/bebas/bebas.ttf); } @font-face { font-family: "changa"; src: url(fonts/changa/changa.ttf); } @font-face { font-family: "handrawn"; src: url(fonts/handrawn/handrawn.ttf); } /*--------------------------------------*/ * { box-sizing: border-box; } body{ background-color: #43464b; color: white; } h1 { color: #ED8B00; font-weight: bold; } .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; } /* Modal Stuff */ .avatar { border-radius: 20px; width: 100%; max-width: 15rem; } .modalHeaderWrapper{ text-align: center; margin: 0; width: 100%; } .modalButton{ display: inline-block; padding: 6px 12px; margin-left: 30px; background-color: rgba(0,136,169,1); border: none; border-radius: 50px; cursor: pointer; transition: all 0.3 ease 0; font-size: 1rem; } .modalButton:hover{ background-color: rgba(0,136,169,0.8); } /* Mainers */ .main{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 5% 15%; } .loosungWrapper { overflow: hidden; overflow-wrap: break-word; } #loosung{ padding: 6rem 1rem; font-size: 2rem; border-top: 3px solid #fff; border-bottom: 3px solid #fff; } .info .innerWrapper{ display: flex; flex-direction: column; justify-content: start; align-items: start; } .info h4{ margin-top: 2rem; color: #ED8B00; } .info a { text-decoration: underline; color: white; } #resetBtn{ border: none; border-radius: 4px; font-size:1.3rem; color:white; padding: 4px; margin: .7rem; font-size: 0.9rem; background-color: red; margin-left: 3rem; }