:root { --clr-primary: #1e3956; --clr-primary-light: #2e475d; --clr-primary-dark: transparant; --clr-green: #93f074; --clr-orange: #f5a067; --clr-grey: #dfe1d6; --font-family: "Roboto", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; outline: none; } a, img, button, input, label, select, span, i { display: inline-block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { width: 100%; height: 100%; } html { font-size: 62.5%; } body { min-height: 100vh; font-family: var(--font-family); background-color: var(--clr-primary-dark); color: #fff; } h3.heading { font-size: 1.7rem; margin-bottom: 2.2rem; /*margin-left: 2%;*/ } .btn { text-decoration: none; text-transform: uppercase; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; padding: 0.6rem 1rem; transition: 0.25s; color: #000; } .btn-grey { background-color: var(--clr-grey); border: 2px solid var(--clr-grey); } .btn-orange { background-color: var(--clr-orange); border: 2px solid var(--clr-orange); } .btn-green { background-color: var(--clr-green); border: 2px solid var(--clr-green); } .btn-grey:is(:hover, :focus, :focus-within) { color: #000; border: 2px solid #51515183; background-color: var(--clr-grey); } .btn-orange:is(:hover, :focus, :focus-within) { background-color: var(--clr-orange); color: #000; border: 2px solid #51515183; } .btn-green:is(:hover, :focus, :focus-within) { background-color: var(--clr-green); color: #000; border: 2px solid #51515183; } .scroller { --size: 3rem; overflow-y: scroll; margin: auto 0; height: calc(100% - 10rem); margin-top: calc(var(--size) / 2); } .scroller::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .scroller { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }