html,body{height:100%;margin:0;display:flex;justify-content:center;align-items:center;background:#213}.App{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;text-shadow:0 1px 0 #000}.profile-image-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.icon{color:#fff;width:24px;height:24px;vertical-align:middle;margin-left:8px;text-shadow:0 1px 0 #ff1ca0}h1{display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:20px;font-size:24px}.link-button{display:block;width:calc(70% - 20px);margin:10px auto;padding:16px 24px;background-color:#f03;color:#fff;text-decoration:none;border-radius:8px;transition:background-color .2s ease,transform .2s ease;font-weight:700;max-width:600px}.link-button:hover{background-color:#f03;transform:translateY(-2px)}@media (max-width: 600px){.profile-image{width:100px;height:100px}h1{font-size:20px}h2{font-size:10px}.link-button{padding:14px 20px}}@media (min-width: 1024px){.profile-image{width:150px;height:150px}h1{font-size:28px}.link-button{padding:18px 28px;font-size:18px}}.logo{width:14px;height:15px}.link-button{display:inline-block;margin:10px 0;padding:10px 20px;font-size:16px;color:#fff;background-color:#f03;text-decoration:none;border-radius:5px;transition:background-color .3s}.link-button:hover{background-color:#f03}.profile-image-container{display:inline-block;justify-content:center;align-items:center;width:200px;height:200px;border:solid 5px transparent;border-radius:50%;--border-angle: 0turn;--main-bg: conic-gradient( from var(--border-angle), #ffed19, #59ff05 5%, #f03 60%, #ffed19 95% );--gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #cd0038 65%, #f400b5, #f03 99%, transparent);background:var(--main-bg) padding-box,var(--gradient-border) border-box,var(--main-bg) border-box;animation:bg-spin 3s linear infinite}.profile-image{width:100%;height:100%;border-radius:50%}@keyframes bg-spin{to{--border-angle: 1turn}}.profile-image-container:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: true; initial-value: 0turn;}
