@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');

:root {
    --bgColor: #377ec5;
    --bgColor2: #121c4e;
    --accentColor: #FFF;
    --font: 'Karla', sans-serif;
    --delay: .3s;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--font);
    background: linear-gradient(45deg, #02e1ba 0%, #26c9f2 29%, #d911f2 66%, #ffa079 100%);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite, transitionAnimation 1s ease-out var(--delay) forwards;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    overflow: hidden;
    position: relative;
    opacity: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

body::before, 
body::after {
    content: "";
    width: 70vmax;
    height: 70vmax;
    position: absolute;
    background: rgba(255, 255, 255, 0.07);
    left: -20vmin;
    top: -20vmin;
    animation: morph 15s linear infinite alternate, spin 20s linear infinite;
    z-index: 1;
    will-change: border-radius, transform;
    transform-origin: 55% 55%;
    pointer-events: none;
}
    
body::after {
    width: 70vmin;
    height: 70vmin;
    left: auto;
    right: -10vmin;
    top: auto;
    bottom: 0;
    animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
    transform-origin: 20% 20%;
}

@-webkit-keyframes Gradient {
    0% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@-moz-keyframes Gradient {
    0% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@keyframes Gradient {
    0% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@keyframes morph {
    0% { border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
    100% { border-radius: 40% 60%; }
}

@keyframes spin {
    to { transform: rotate(1turn); }
}

@keyframes transitionAnimation {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.st0 { display: none; }
.st1 { display: inline; }
.st2 { opacity: 0.29; }
.st3 { fill: #FFFFFF; }
.st4 { clip-path: url(#SVGID_2_); fill: #FFFFFF; }
.st5 { clip-path: url(#SVGID_4_); }
.st6 { clip-path: url(#SVGID_6_); }
.st7 { clip-path: url(#SVGID_8_); }
.st8 { clip-path: url(#SVGID_10_); }
.st9 { fill: none; }
.st10 { clip-path: url(#SVGID_12_); }
.st11 { opacity: 0.7; }
.st12 { clip-path: url(#SVGID_14_); }
.st13 { opacity: 0.2; }
.st14 { clip-path: url(#SVGID_16_); }
.st15 { opacity: 0.3; fill: #FFFFFF; enable-background: new; }

main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#profilePicture, #profilePicture img {
    position: relative;
    width: 96px;
    height: 96px;
    display: block;
    margin: 40px auto 20px;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}

#userName {
    color: var(--accentColor);
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.25;
    display: block;
    font-family: var(--font);
    width: 100%;
    text-align: center;
    text-decoration: none;
}

#links {
    max-width: 675px;
    width: auto;
    display: block;
    margin: 27px auto;
}

.link {
    position: relative;
    background-color: transparent;
    color: var(--accentColor);
    border: solid var(--accentColor) 2px;
    border-radius: 10px;
    font-size: 1rem;
    text-align: center;
    display: block;
    margin: 10px auto;  /* 中央揃えにして余白を統一 */
    padding: 10px;
    text-decoration: none;
    transition: all .25s cubic-bezier(.08, .59, .29, .99);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .link:hover {
        background-color: var(--accentColor);
        color: var(--bgColor);
    }
}

.link:active {
    background-color: var(--accentColor);
    color: var(--bgColor);
}

.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px; /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}