.heading { width: 500px; height: auto; padding: 10px 0px; }

.hero { width: 600px; height: auto; }

.wrapperHero, .odinHero { display: grid; margin: 0px; gap: 20px; place-items: center; padding: 20px; }

.wrapperHero { grid-template-columns: 4.5fr 5.5fr; background-color: #606060; }

.odinHero { grid-template-columns: 3fr 1fr; background-color: #606060; }

@media screen and (max-width: 1000px) { .wrapperHero, .odinHero { grid-template-columns: 100%; padding: 10px; } }

.heroText { color: #fff; padding: 20px 0px; }

@media screen and (max-width: 700px) { .heroText { padding: 20px 0px; } }

a { color: #fffffe; text-decoration: underline; font-weight: 900; }

a:hover { text-decoration: none; color: #fffffe; }

a:visited { text-decoration: none; }

.ctaButton, .activeButton { background-color: #EF4123; Lime Green color: white; font-size: 16px; font-weight: bold; padding: 10px 20px; margin: 10px 10px 0px 0px; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; transition: background-color 0.3s ease, transform 0.2s ease; }

.activeButton { background-color: #32CD32; cursor: default; pointer-events: none; }

.ctaButton:hover { background-color: #32CD32; transform: scale(1.05); }

.ctaButton:active { background-color: #66FF66; transform: scale(0.98); }

.close { background-color: #606060; padding: 6px 10px; color: #fffffe; }

mark { background-color: transparent; color: #fffffe; }

main { width: 100%; }

figcaption { line-height: 150%; margin: -20% 0% 0%; padding: 4px 20px 20px; text-align: justify; }

.figureHeading { margin: 0px 0px -10% 0px; padding: 0px 20px; }

.section-title { position: relative; display: flex; flex-direction: column; color: #fff; margin: 4px 0px; padding: 10px; background: rgba(58,58,58,0.9); }

.greyGlass { margin: 0px; }

.lightGlass { background-color: #606060; color: #fff; margin: 0px; padding: 7px 8px; }

h1 { color: #fffffe; }

header { grid-template-columns: 1fr 2fr; margin: 4px 0px 0px 0px;

.blur { box-shadow: none; }