/*Reset styles*/
* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

:root {
    --color-1: #233340;
    --color-2: #50b0a5;
    --color-3: #DCECF9;
    --color-4: #1c2730;
    --color-5: #82a3d1;
    --color-6: rgba(0, 0, 0, 0.6);
    --color-7: rgba(3, 0, 128, 0.3);
    --font-family: Verdana, Geneva, Tahoma, sans-serif;
}

html {
    font-size: 62.5%;
}

body {
    min-width: 80dvw;
    min-height: 100dvh;
    font-size: 1.6rem;
    background-color: var(--color-1);
    background-image: url("../img/nnnoise.svg");
    font-family: var(--font-family);
}

.layout {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    h1,
    h2,
    p {
        margin: 2rem 0;
        color: var(--color-3);
        text-align: center;
    }

    p {
        margin: 0 1rem;
        font-size: 2rem;
    }
}

.layout__input {
    margin-top: 3rem;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    gap: 2rem;

    input[type="text"],
    select,
    .btn {
        padding: 1rem;
        border-radius: 5px;
        outline: none;
        border: none;
        font-size: 2rem;
        font-family: var(--font-family-2);
        border: 3px solid var(--color-2);
        border-radius: 4px;
        color: var(--color-4);
        background-color: var(--color-3);
        transition: all .3s ease-in-out;

        &:hover {
            box-shadow:
                0 1px 2px var(--color-6),
                2px 1px 4px var(--color-4),
                2px 4px 3px var(--color-7),
                0 0 7px 2px var(--color-2),
                inset 0 1px 2px var(--color-6),
                inset 2px 1px 4px var(--color-4),
                inset 2px 4px 3px var(--color-7),
                inset 0 0 7px 2px var(--color-2);
        }
    }

    select {
        width: 22rem;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    select,
    ::picker(select) {
        appearance: base-select;
    }

    ::picker(select) {
        margin-top: 0.5rem;
        border-radius: 5px;
        border: 3px solid var(--color-2);
    }

    ::picker-icon {
        margin: 0;
        color: var(--color-1);
    }

    option {
        padding: 0.5rem;
        outline: none;
        border: none;
        border-bottom: 3px solid var(--color-2);
        background-color: var(--color-3);
        transition: all 0.2s ease-in-out;

        &:last-child {
            border-bottom: none;
        }

        &::checkmark {
            content: "☑️";
            color: var(--color-2);
        }

        &:hover {
            box-shadow:
                0 1px 2px var(--color-6),
                2px 1px 4px var(--color-4),
                2px 4px 3px var(--color-7),
                0 0 7px 2px var(--color-2),
                inset 0 1px 2px var(--color-6),
                inset 2px 1px 4px var(--color-4),
                inset 2px 4px 3px var(--color-7),
                inset 0 0 7px 2px var(--color-2);
        }
    }

    .btn {
        font-weight: bold;
        border: 2px solid var(--color-3);
        background-color: var(--color-2);
        cursor: pointer;
    }
}

.layout__tabla {

    table {
        margin: 4rem 0;
        background-color: var(--color-4);
        border-radius: 5px;
    }

    table thead {
        display: none;
    }

    table,
    tbody,
    tr,
    td {
        width: 100%;
        display: block;
    }

    tr {
        margin-bottom: 1.5rem;
        border: 3px solid var(--color-2);
        border-radius: 5px;
        font-size: 2rem;
    }

    td {
        padding: 1rem;
        padding-bottom: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-bottom: 3px solid var(--color-2);
        color: var(--color-3);

        &.tabla__color {
            background-color: var(--color-1);
        }

        &:last-child {
            border-bottom: none;
        }

        &::before {
            content: attr(data-label);
            margin: 1.5rem 0;
            font-weight: bold;
        }
    }
}

.layout__explicacion {

    margin: 0 1rem;

    h2,
    h3 {
        margin: 2rem 0;
        color: var(--color-5);
        text-align: center;
    }

    h3 {
        font-size: 2.5rem;
    }

    p {
        margin-bottom: 6rem;
        text-align: left;
    }

    ul {
        margin: 5rem 3rem;
        color: var(--color-3);
        font-size: 2rem;

        li {
            margin: 2rem 0;
        }
    }


}

footer {
    width: 100%;
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    background-color: var(--color-4);

    .social-icons {
        display: flex;
        flex-direction: row;
        gap: 2rem;

        a {
            display: block;
            text-decoration: none;
            font-family: inherit;
            font-size: inherit;
            color: inherit;

            img {
                width: 4rem;
                background-color: var(--color-3);
                transition: all 200ms linear;

                &:hover {

                    box-shadow:
                        0 1px 2px var(--color-6),
                        2px 1px 4px var(--color-4),
                        2px 4px 3px var(--color-7),
                        0 0 7px 2px var(--color-2),
                        inset 0 1px 2px var(--color-6),
                        inset 2px 1px 4px var(--color-4),
                        inset 2px 4px 3px var(--color-7),
                        inset 0 0 7px 2px var(--color-2);
                }
            }
        }

        .icon__github {
            border-radius: 100%;
        }

        .icon__linkedin {
            border-radius: 5px;
        }
    }

    p {
        text-align: center;
        font-size: 1.5rem;
        font-family: var(--font-family-2);
        color: var(--color-3);
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}