svg .world-title-wrapper, svg .level-title-wrapper div { overflow: visible; } svg .world-title-wrapper div, svg .level-title-wrapper div { width: 100%; height: 100%; } svg .world-title-wrapper div, svg .level-title-wrapper div { display: flex; align-items:center; justify-content:center; overflow: visible; } svg .world-title, svg .level-title { color: white; margin: 0; padding: 0; text-align: center; } svg .world-title { font-weight: 700; } svg .level-title { font-weight: 400; opacity: 0; transition: opacity .3s; } svg .level:hover .level-title { opacity: 1; } svg .disabled { cursor: default; } .world-selection { display: block; margin-left: auto; margin-right: auto; margin-top: 2em; max-width: 100%; } .world-selection-menu { right: 1em; top: 1em; /* margin: 1em; */ /* border: 1px solid var(--clr-primary); */ border: 1px solid var(--clr-primary); background-color: #fff; border-radius: .5em; filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5)); } .world-selection-menu.desktop { position: absolute; } .world-selection-menu .btn, .welcome .btn { min-width: 5em; text-align: center; margin-left: .4em; margin-right: .4em; margin-bottom: .2em; } .world-selection-menu .slider-wrap { display: flex; flex-direction: column; /* width: 100%; */ height: 7em; /* min-width: 16em; */ padding: .5em 1em 1.3em 1em; margin-left: auto; margin-right: auto; } .difficulty-label { /* font-size: 0.875em; */ padding-bottom: 1.2em; } /* Test for mobile `title`s */ /* @media (pointer: coarse), (hover: none) { [title] { position: relative; display: inline-flex; justify-content: center; } [title]:focus::after { content: attr(title); position: absolute; top: 90%; color: #000; background-color: #fff; border: 1px solid; width: fit-content; padding: 3px; } } */ .world-label { /* border: 2px solid purple; */ padding: .2em; border-radius: .5em; } .world-selection-menu .helpButton { position: absolute; right: .5em; top: .5em; color: var(--clr-primary); }