@media (prefers-color-scheme: dark) {
    body {
        background-color: #1C1C1E;
        color: #FFFFFF;
    }
}

.icon {
    text-align: center;
    border-radius: 50%;
    opacity: 0;
    animation-name: fadein-bottom;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes fadein-bottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.name {
    font-family: sans-serif;
    text-align: center;
    opacity: 0;
    animation-name: fadein-bottom;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes fadein-bottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.button {
    display: flex;
    justify-content: center;
    opacity: 0;
    animation-name: fadein-bottom;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes fadein-bottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.LINE {
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: 10px;
    position: relative;
    margin: auto;
    width: 150px;
    height: 55px;
    background: #7fff7f
}

.LINE span {
    font-family: sans-serif;
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-block;
    top: 50%;
    left: 50%;
    color: #FFFF;
    font-size: 12pt;
}

.instagram {
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: 10px;
    position: relative;
    margin: auto;
    width: 150px;
    height: 55px;
    background: #ff7fbf
}

.instagram span {
    font-family: sans-serif;
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-block;
    top: 50%;
    left: 50%;
    color: #FFFF;
    font-size: 12pt;
}

.illustration {
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: 10px;
    position: relative;
    margin: auto;
    width: 150px;
    height: 55px;
    background: #7f7fff
}

.illustration span {
    font-family: sans-serif;
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-block;
    top: 50%;
    left: 50%;
    color: #FFFF;
    font-size: 12pt;
}

.comingsoon {
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: 10px;
    position: relative;
    margin: auto;
    width: 150px;
    height: 55px;
    background: #ffbf7f
}

.comingsoon span {
    white-space: nowrap;
    font-family: sans-serif;
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-block;
    top: 50%;
    left: 50%;
    color: #FFFF;
    font-size: 12pt;
}

.dis {
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: 10px;
    position: relative;
    margin: auto;
    width: 150px;
    height: 55px;
    background: #0000ff
}

.dis span {
    font-family: sans-serif;
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-block;
    top: 50%;
    left: 50%;
    color: #FFFF;
    font-size: 12pt;
}