html, body {
    padding: 0;
    margin: 0;
}

body * { box-sizing: border-box }

body {
    background: #202125;
    min-height: 100vh;
    font-family: Stem;
    font-weight: 300;
}

a { color: white; }

.container {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    color: white;
    align-items: center;
    justify-content: center;
    min-height: inherit;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
    max-width: 100%;
    width: 500px;
    padding: 2rem;
}

.logotype-container {
    display: flex;
    /*align-items: flex-end;*/
    /*column-gap: 1rem;*/
    position: relative;
}

.logotype {
    background: linear-gradient(45deg, #8066FF 0%, #690DFF 100%);
    border-radius: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-family: 'Kanit', serif;
    font-weight: 500;
    font-style: normal;
    font-size: 4rem;
    line-height: 80%;
    padding: 1rem;
    position: relative;
    width: 110px;
    height: 110px;
    overflow: hidden;
}

.logotype .title {
    z-index: 2;
}

.logotype .variant {
    border-radius: inherit;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .4s ease-in-out;
    transition-delay: 300ms;
}

.variant.swift {
    background: linear-gradient(45deg, #FF4325 0%, #FFAB27 100%);
}

.variant.figma {
    background: linear-gradient(45deg, #17181A 0%, #66D996 27.08%, #A16AF7 51.04%, #EC673E 76.04%, #272626 100%);
}

.variant.about {
    border: 3px solid #333;
    background: #222 url("assets/avatar-square.jpg") no-repeat;
    background-size: cover;
    z-index: 3;
}

.logotype .variant.active {
    opacity: 1;
}

.copyright {
    text-align: center;
    color: #646673;
    line-height: 170%;
}


/* Animating */

[data-words] {
    overflow: hidden;
    font-family: 'Kanit', serif;
    font-weight: 500;
    font-style: normal;
    font-size: 4rem;
    position: relative;
    line-height: 178%;

    transition: width .3s ease-in-out;
    transition-delay: 300ms;
}

[data-words]:after {
    display: none !important;
}

.text-anim-item {
    white-space: nowrap;
    position: absolute;
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
}

.text-anim-item:not(:empty) {
    padding-left: 1rem
}

.text-anim-item.anim-in {
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
    -webkit-animation: textAnimInCenter .6s .3s forwards;
    animation: textAnimInCenter .6s .3s forwards;
}

.text-anim-item.anim-out {
    -webkit-transform: translate3d(0, 0%, 0);
    transform: translate3d(0, 0%, 0);
    -webkit-animation: textAnimOutCenter .3s  forwards;
    animation: textAnimOutCenter .6s  forwards;
}

/*  */
.button {
    border: 1px solid slategray;
    border-radius: .75rem;
    color: slategray;
    display: flex;
    justify-content: center;
    padding: 1rem 2rem;
    text-decoration: none;
    transition: all .2s ease-in-out;
    width: 100%;
}

.button:hover, .button.fill {
    background-color: #690DFF;
    border-color: #690DFF;
    color: white;
    opacity: .9;
}

.button:active {
    transform: scale(.98);
}

.button.link {
    border: none;
    color: slategray;
}

.button.link:hover {
    background: none;
    text-decoration: underline;
}

/* Modal */
.dialog-container * {
    box-sizing: border-box;
}

.dialog-container {
    background-color: rgba(112,128,144,.6);
    backdrop-filter: blur(5px);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    -webkit-backdrop-filter: blur(5px);
    width: 100vw;
    z-index: 99;

    opacity: 0;
    overflow: hidden;
    transition: opacity .2s ease-in;
}

.dialog-wrapper {
    display: flex;
    align-items: flex-end;
    width: inherit;
    height: inherit;
    position: relative;
    justify-content: flex-start;
    overflow: auto;
}

.dialog {
    background-color: white;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    box-shadow: 0 .5rem 2rem rgba(50,50,50,.5);
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: 95%;
    bottom: 0;
    position: fixed;
    transform: translateY(120%);
    transition: transform .3s ease-in-out;
}

.dialog .title,
.dialog .content {
    color: #222;
    padding: 1rem;
}

.dialog > .title {
    font-size: 1.3rem;
    font-weight: bold;
}

.dialog .content {
    display: block;
    padding: 0 1rem;
    max-height: 100%;
    width: 100%;
    overflow-y: auto;
}

.dialog .footer {
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
    flex-grow: 1;
    padding: 1rem;
}

.dialog-container.show {
    display: block;
    opacity: 1;
}
.dialog-container.show .dialog {
    /*top: 0;*/
    /*visibility: visible;*/
    /*transform: translateY(30%);*/
    /*opacity: 0;*/
}

.dialog-container.show .dialog.swipe {
    transform: translateY(0);
    /*transform: translateY(0);*/
}

/**
 *
 */
.dialog .table {
    border-collapse: collapse;
    width: 100%;
}

.dialog .table tbody tr td {
    border-bottom: 1px solid rgba(112, 128, 144, 0.2);
    padding: .65rem .5rem;
}

.dialog .table tbody tr:hover td {
    background-color: rgba(112, 128, 144, 0.05);
}

.dialog .table tbody tr td:nth-child(2) {
    white-space: nowrap;
}

.dialog .table tbody tr td .description {
    display: block;
    margin-top: .5rem;
}

.dialog .table tbody tr.title td {
    background-color: rgba(112, 128, 144, 0.2);
    font-size: .9rem;
    font-weight: bold;
    padding: .5rem 1rem;
}

.text-secondary {
    color: slategray;
}

.text-center {
    text-align: center;
}

.only-desktop {
    display: none;
}

@media screen and (min-width: 768px) {
    .dialog-wrapper {
        align-items: center;
        justify-content: center;
        max-height: 100%;
    }

    .dialog {
        border-radius: 1rem;
        max-width: 400px;
        max-height: 90%;
        position: static;
    }

    .only-desktop {
        display: block;
    }
}

@-webkit-keyframes textAnimIn {
    0% {
        -webkit-transform: translate3d(0, -120%, 0);
        transform: translate3d(0, -120%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }
}
@keyframes textAnimIn {
    0% {
        -webkit-transform: translate3d(0, -120%, 0);
        transform: translate3d(0, -120%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }
}
@-webkit-keyframes textAnimOut {
    0% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }
    50% {
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 120%, 0);
        transform: translate3d(0, 120%, 0);
    }
}
@keyframes textAnimOut {
    0% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }
    50% {
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 120%, 0);
        transform: translate3d(0, 120%, 0);
    }
}
@-webkit-keyframes textAnimInCenter {
    0% {
        -webkit-transform: translate3d(0, -120%, 0);
        transform: translate3d(0, -120%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
    }
}
@keyframes textAnimInCenter {
    0% {
        -webkit-transform: translate3d(0, -120%, 0);
        transform: translate3d(0, -120%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
    }
}
@-webkit-keyframes textAnimOutCenter {
    0% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }
    50% {
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 120%, 0);
        transform: translate3d(0, 120%, 0);
    }
}
@keyframes textAnimOutCenter {
    0% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }
    50% {
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 120%, 0);
        transform: translate3d(0, 120%, 0);
    }
}