:root{--card-margin:10px;--card-boarder:4px;--button-height:50px;--button-margin:10px}html,body{background:#121212;width:100%;height:100%;margin:0;font-family:Roboto,sans-serif;overflow:hidden}div{color:#a4a4a4;max-width:500px}button{width:calc(100% - (2*var(--button-margin)));height:var(--button-height);margin:var(--button-margin);color:#a4a4a4;background:#121212;border:2px solid #a4a4a4;padding:0;font-size:16px;position:absolute}button:disabled{color:#333;border:2px solid #333}.card{height:calc(100% - (2*var(--card-margin) + 2*var(--card-boarder)));width:calc(100% - (2*var(--card-margin) + 2*var(--card-boarder)));border:var(--card-boarder)solid #a4a4a4;margin:var(--card-margin);background:#121212;padding:0;position:absolute}.flip-card{perspective:1000px;background-color:#a4a4a4}.flip-card-inner{width:100%;height:100%;transform-style:preserve-3d;background-color:#121212;transition:transform .6s;position:relative;box-shadow:0 4px 8px #0003}.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{backface-visibility:hidden}.flip-card-back{transform:rotateY(180deg)}.centered-logo{width:30%;height:auto;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}.centered-name{text-align:center;width:100%;margin:0;position:absolute;bottom:0%}