.journal-content { flex-direction: column; gap: 1rem; } .top-button { width: 18.5rem; } .class-picker { display: flex; flex-direction: row; justify-content: center; align-items: center; padding-top: 0.25rem; margin-bottom: 1.5rem; gap: 1rem; width: 100%; height: 8rem; border: var(--gold-2); div.class:first-child { margin-right: 2rem; } background-image: url("/assets/images/texture-0.jpg"); border-radius: 10px; box-shadow: var(--shadow); } // Classes @mixin class-icon { width: 70px; height: 70px; background-size: cover; background-position: center center; border-radius: 50%; opacity: 0.5; transition: opacity 0.2s ease-in-out; &:hover { opacity: 0.75; } } .class { width: 100px; height: 100px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: space-between; label { width: 10rem; text-align: center; font-weight: 500; color: var(--text); } } .icon-active { opacity: 1 !important; &::after { border: 3px solid var(--gold-dark); content: ""; height: 80px; width: 80px; display: block; border-radius: 50%; position: relative; top: -5px; left: -5px; } } .nav-link { background-color: var(--tab); color: black; font-size: 1.123rem; font-weight: 500; width: 8rem; height: 4rem; border-radius: 10px 10px 0 0; border: var(--border); transition: all 0.2s ease-in-out; &:hover { background-color: var(--tab-hover); } } .nav-link.active { background-color: var(--tab-active); width: 9.25rem; font-size: 1.25rem; font-weight: 550; border: var(--border); } .card-container { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; min-height: 400px; padding: 1rem; padding-top: 2rem; background-image: url("/assets/images/texture-0.jpg"); border-radius: 0 0 10px 10px; box-shadow: var(--shadow); border: var(--gold-2); border-top: none; } spellcard { display: inline-block; } .empty { display: flex; justify-content: center; align-items: center; width: 100%; height: 320px; font-size: 1.5rem; font-weight: 600; } .all-icon { @include class-icon; background-image: url("/assets/images/classes/all.png"); } .artificer-icon { @include class-icon; background-image: url("/assets/images/classes/artificer.jpg"); } .cleric-icon { @include class-icon; background-image: url("/assets/images/classes/cleric.jpg"); } .bard-icon { @include class-icon; background-image: url("/assets/images/classes/bard.jpg"); } .druid-icon { @include class-icon; background-image: url("/assets/images/classes/druid.jpg"); } .paladin-icon { @include class-icon; background-image: url("/assets/images/classes/paladin.jpg"); } .ranger-icon { @include class-icon; background-image: url("/assets/images/classes/ranger.jpg"); } .sorcerer-icon { @include class-icon; background-image: url("/assets/images/classes/sorcerer.jpg"); } .warlock-icon { @include class-icon; background-image: url("/assets/images/classes/warlock.jpg"); } .wizard-icon { @include class-icon; background-image: url("/assets/images/classes/wizard.jpg"); }