html{font-size:1vh}body{--background-color:white;--main-color:black;--secondary-color:lightgrey;--day-color:white;--night-color:grey;--now-color:red;--moon-arc-color:steelblue;background-color:var(--background-color);color:var(--main-color);user-select:none;flex-direction:column;width:100dvw;height:100dvh;margin:0;font-size:3rem;display:flex}.RomanSunclock{perspective:100rem;justify-content:center;align-items:center;height:100%;display:flex;overflow:hidden}.RomanSunclock__Container{text-align:center;backface-visibility:hidden;border:.2rem solid var(--secondary-color);width:min(80vw,34rem);height:55rem;transform-style:preserve-3d;justify-content:center;align-items:center;padding:4rem;transition:transform 1s;display:inline-flex;position:absolute}.RomanSunclock__Container--front{z-index:1;transform:rotateY(0)}.RomanSunclock__Container--back{z-index:0;transform:rotateY(180deg)}.RomanSunclock__Container--back .RomanSunclock__Description,.RomanSunclock__Container--back .RomanSunclock__Version{color:#0000;transition:color 1s}.RomanSunclock--flipped .RomanSunclock__Container--front{z-index:0;transform:rotateY(-180deg)}.RomanSunclock--flipped .RomanSunclock__Container--back{z-index:1;transform:rotateY(0)}.RomanSunclock--flipped .RomanSunclock__Container--back .RomanSunclock__Description{color:var(--main-color)}.RomanSunclock--flipped .RomanSunclock__Container--back .RomanSunclock__Version{color:var(--secondary-color)}.RomanSunclock__Container__Content{scrollbar-width:none;flex-direction:column;align-items:center;height:52rem;display:flex;overflow:hidden scroll}.RomanSunclock__Container--back .RomanSunclock__Container__Content p:first-of-type{margin-top:0}.RomanSunclock__Container--front .RomanSunclock__Container__Content{height:52rem}.RomanSunclock--loading .RomanSunclock__LoadingDetails{display:block}.RomanSunclock--loading .RomanSunclock__Details,.RomanSunclock__LoadingDetails{display:none}.RomanSunclock__Details{flex-direction:column;justify-content:center;align-items:center;display:flex}.RomanSunclock__Details__Small{color:var(--secondary-color);font-size:2rem;line-height:1.25}.RomanSunclock__Description{margin:0;font-size:2.7rem}.RomanSunclock__ClockImage{justify-content:center;width:30rem;height:30rem;margin:3rem 0 2rem;font-size:25px;display:flex}.RomanSunclock__ClockImage svg{width:30rem;height:30rem}.RomanSunclock__Version{text-align:center;font-size:2rem}.RomanSunclock__Version a{color:inherit;text-decoration:none}.RomanSunclock__Logo{width:calc(100% - 8rem);height:1.5rem;position:absolute;bottom:-9.75rem}.RomanSunclock__Logo svg{background:var(--background-color);width:3rem;height:3rem;fill:var(--secondary-color);padding:0 1rem;position:relative;bottom:9.5rem}@media (prefers-color-scheme:dark){body{--background-color:black;--main-color:white;--secondary-color:grey;--moon-arc-color:khaki}}svg{& #base-clock{stroke:var(--main-color)}& #day-full{stroke:var(--day-color)}& #day-full .clock-lines{stroke:var(--night-color)}& #day-part{stroke:var(--day-color)}& #day-part .clock-lines{stroke:var(--night-color)}& #local-time{fill:var(--secondary-color);stroke:none}& #moon-arc{stroke:var(--moon-arc-color)}& #moon-icon,& #new-moon-stars{stroke:var(--main-color)}& #night-full{stroke:var(--night-color)}& #night-full .clock-lines{stroke:var(--day-color)}& #night-part{stroke:var(--night-color)}& #night-part .clock-lines{stroke:var(--day-color)}& #now-marker{fill:var(--now-color)}& #roman-time{fill:var(--main-color);stroke:none}& #sun-icon{stroke:var(--main-color)}}