@font-face { font-family:cavalero; src:url(/css/cavaleroBTroman.ttf); }
@font-face { font-family:gothic; src:url(/css/gothicMedium.ttf); }
@font-face { font-family:rocksalt; src:url(/css/rocksalt.ttf); }
body            { background-color:dimgray; font-family:gothic; user-select:none; }
button          { cursor:pointer; font-size:3vw; color:white; background-color:gray; border:1px solid lightslategray; border-radius:1vw; padding:10px 20px; box-shadow:5px 5px black; white-space:nowrap; margin:0 10px; }
button:hover    { background-color:darkgray; }
button:active   { transform:translateY(2px) translateX(2px); }
.pos            { position:absolute; left:50%; transform:translateY(-50%) translateX(-50%); }
.pnf            { position:relative; top:15%; margin:auto; text-align:center; background-color:white; padding:20px 40px; color:indianred; font-size:2vw; border-radius:5px; z-index:1; }
.sdc            { top:25%; font-family:cavalero; font-size:20vw; }
.lgo            { top:25%; font-size:5vw; color:white; white-space:nowrap;}
.tek            { top:45%; font-size:5vw; color:gray; white-space:nowrap; }
.con            { top:59%; font-size:3vw; display:inline-flex; }
.hlp            { top:73%; font-size:3vw; display:inline-flex; }
.loc            { top:87%; font-size:4vw; color:gray; white-space:nowrap; }
.cpy            { top:95%; font-family:rocksalt; font-size:1vw; color:silver; white-space:nowrap; }
@media (pointer:coarse), (hover:none) { [title] { display:flex; justify-content:center; z-index:1; }
[title]:focus::after { white-space:normal; position:absolute; top:60%; font-family:gothic; font-size:2vw; color:black; background-color:white; content:attr(title); padding:3px 5px; border:1px solid; } }
@media (orientation:portrait) { button { font-size:5vw; padding:2vw 4vw; border-radius:2vw; } .tek { font-size:7vw; top:40%; } .loc { top:82%; font-size:7vw; } .cpy { font-size:3vw; top:92%;  font-size:4vw; } }
@media (orientation:landscape) and (max-height:700px) { button { font-size:3vw; } .tek, .loc { font-size:5vw; } .cpy { font-size:2vw; } [title]:focus::after { font-size:2vw; } }
@media (orientation:landscape) and (max-height:400px) { body { background-color:darkgray; } button { font-size:2vw; } .tek { top:46%; font-size:3vw; } .loc { font-size:3vw; } }