@import url('https://fonts.googleapis.com/css2?family=Exo+2&display=swap');

:root {
    --theme: #3E00FF;
    --theme--dark: #170055;
    --theme--light: #AE00FB;
    --theme--contrast: #B5FFD9;
}

.test {
    outline: 0.1rem solid #0f0;
}

body {
    background-color: #000;
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    margin: 0rem;
    font-weight: normal;
}

.-button {
    padding: 1rem;
    font-size: 1rem;
    background-color: var(--theme);
    font-family: 'Exo 2', sans-serif;
    color: #fff;
    transition-duration: 0.1s;
    border: none;
    cursor: pointer;
    font-weight: bolder;
}

.-button:hover {
    background-color: var(--theme--light);
}

.-button:disabled {
    cursor: not-allowed;
    background-color: #aaa;
}

.-form {
    margin: 0rem;
    margin-block-end: 0rem;
}

.-input {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    background-color: #fff;
    font-family: 'Exo 2', sans-serif;
    color: #111;
    border: none;
    font-weight: bolder;
}

.-input:focus {
    outline: none;
}

.-center {
    text-align: center;
}

.-center__block {
    margin-left: auto;
    margin-right: auto;
}

.-center__flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.-link {
    cursor: pointer;
    color: var(--theme--light);
    text-decoration: underline;
    transition-duration: 0.1s;
}

.-link:hover {
    color: var(--theme--contrast);
}

.-pad {
    padding: 1rem;
}

.-title {
    font-size: 1.5rem;
}

.-subtitle {
    font-size: 0.7rem;
    color: #aaa;
}

.-unskew {
    transform: skewX(10deg);
}

.-main {
    opacity: 0%;
}

.-header {
    overflow: hidden;
    background-color: #111;
    user-select: none;

    & > .content {
        display: grid;
        grid-template-columns: max-content 1fr repeat(4, max-content) 3rem;
        transform: skewX(-10deg);
    
        & > .title {
            padding-left: 3rem;
            padding-right: 3rem;
            font-size: 2rem;
            font-weight: bolder;
            cursor: pointer;
        }

        & > .sites {
            background-color: var(--theme);

            &:hover {
                background-color: var(--theme--light);
            }
        }

        & > .sites--selected {
            background-color: var(--theme--light);
        }

        & > .tab {
            padding-left: 3rem;
            padding-right: 3rem;
            font-size: 1.5rem;
            border-left: var(--theme--dark) 0.1rem solid;
            border-right: var(--theme--dark) 0.1rem solid;
            transition-duration: 0.1s;
            cursor: pointer;
        
            &:hover {
                box-shadow: 0rem -0.5rem 0rem 0rem var(--theme--light) inset;
            }
        }

        & > .tab--selected {
            box-shadow: 0rem -0.5rem 0rem 0rem var(--theme--light) inset;
        }
    }

    & > .border {
        height: 0.2rem;
        background-color: var(--theme);
    }
}

.-content {
    overflow-x: hidden;
}

.-footer {
    display: grid;
    grid-template-columns: max-content 1fr repeat(4, max-content) 5rem;
    background-color: var(--theme--dark);
    user-select: none;
    overflow: hidden;

    & > .title {
        padding: 3rem;
    }

    & > .tab {
        color: var(--theme--light);
        transition-duration: 0.1s;
        padding: 2rem;
        cursor: pointer;

        &:hover {
            color: #fff;
        }
    }
}

.-intro {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.-intro__fade {
    animation-name: -intro__fade;
}

.-intro__float__up {
    animation-name: -intro__float__up;
}

.-intro__float__down {
    animation-name: -intro__float__down;
}

.-intro__float__left {
    animation-name: -intro__float__left;
}

.-intro__float__right {
    animation-name: -intro__float__right;
}

@keyframes -intro__fade {
    from {
        opacity: 0%;
    }
    
    to {
        opacity: 100%;
    }
}

@keyframes -intro__float__up {
    from {
        transform: translateY(1rem);
        opacity: 0%;
    }

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

@keyframes -intro__float__down {
    from {
        transform: translateY(-1rem);
        opacity: 0%;
    }

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

@keyframes -intro__float__left {
    from {
        transform: translateX(1rem);
        opacity: 0%;
    }

    to {
        transform: translateX(0rem);
        opacity: 100%;
    }
}

@keyframes -intro__float__right {
    from {
        transform: translateX(-1rem);
        opacity: 0%;
    }

    to {
        transform: translateX(0rem);
        opacity: 100%;
    }
}

@media (orientation: portrait) {
    html {
        font-size: 3vw;
    }

    .-header {
        & > .content {
            grid-template-columns: 1fr;
            transform: skew(0deg);

            & > .title {
                text-align: center;
            }
        }
    }

    .-unskew {
        transform: skew(0deg);
    }

    .-footer {
        grid-template-columns: 1fr;

        & > .tab {
            padding: 1rem;
        }
    
        & > .title {
            text-align: center;
        }
    }
}