@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

@font-face{font-family:Flight;src:local('Segoe UI')} :root{font-family:Ubuntu,'Trebuchet MS',sans-serif;color:#fff;background:#75a7bf;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}#scene{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none}header,footer{position:fixed;z-index:2;left:clamp(24px,4vw,64px);right:clamp(24px,4vw,64px);display:flex;align-items:center;justify-content:space-between}header{top:32px}.brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;letter-spacing:.01em}.brand svg{width:25px;height:25px;fill:currentColor;transform:rotate(-20deg)}button{font:inherit;color:inherit;cursor:pointer}#pause{display:flex;gap:10px;align-items:center;border:1px solid #ffffff60;border-radius:100px;background:#14395715;padding:12px 18px;font-size:14px;backdrop-filter:blur(12px)}#pause:hover{background:#ffffff25}button:focus-visible{outline:3px solid white;outline-offset:5px}#pause:disabled{opacity:.45;cursor:wait}#pause svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}main{pointer-events:none}.caption{position:fixed;z-index:1;bottom:clamp(112px,16vh,170px);left:clamp(24px,4vw,64px);text-shadow:0 2px 30px #264e7426}h1{margin:0;font-size:clamp(36px,5.5vw,80px);font-weight:400;letter-spacing:-.045em;line-height:1.1}.caption p{font-size:clamp(16px,1.5vw,20px);margin:15px 0 0;opacity:.85}footer{bottom:26px;font-size:13px;opacity:.8}footer p{margin:0}#status{position:fixed;z-index:5;inset:0;display:flex;flex-direction:column;gap:14px;justify-content:center;align-items:center;background:#507f9fe8;transition:opacity .5s,visibility .5s}#status.loaded{opacity:0;visibility:hidden;pointer-events:none}#status p{font-size:16px}.spinner{width:30px;height:30px;border:2px solid #ffffff35;border-top-color:white;border-radius:50%;animation:spin 1s linear infinite}#status.error .spinner{display:none}#retry{border:1px solid #ffffff80;padding:12px 20px;border-radius:30px;background:transparent}#retry[hidden]{display:none}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:600px){header{top:22px}.caption{bottom:120px}footer{bottom:24px;font-size:12px}footer>span{display:none}#pause{padding:10px 14px}.caption p{margin-top:10px}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}#status{transition:none}}

a {
    text-decoration: none;
}



#avatar-border {
    -webkit-animation-name: shakal;
	-webkit-animation-duration: 6.0s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
    display: grid;
    padding: 2px;
    border-radius: 100%;
    background: linear-gradient(135deg,#505add 34.4%,#be40c0 66.11%,#fba82b 96.37%);
    margin-bottom: 4px;
}

#avatar {
    height: 128px;
    border-radius: 100%;
}

#title {
    font-size: 2em;
    font-weight: bold;
}
.info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
}
.overlay {
  position: absolute;     /* размещение поверх */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;   /* чтобы HTML-кнопки работали */
  
  display: flex;          /* пример центрирования */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none;
  
  color: white;
 
}

.overlay .links {
  z-index: 9999;
  pointer-events: auto;
}

.overlay .info {
  z-index: 9999;
  pointer-events: auto;
}

.links {
    display: flex;
    margin: 0 8px;
    justify-content: center;
    flex-flow: row wrap;
}

.links a {
    font-weight: 500;
    color: white
}

.icon {
    height: 16px;
    margin-right: 4px;
}

.button {
    padding: 8px;
    background: rgb(49, 49, 49);
    border-radius: 1rem;
    transition: .2s;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.links a:not(:last-child) {
    margin-right: 4px;
}