body {
    margin: 0;
    height: 100vh;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;

    .logo-wrapper {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            height: 40%;
        }
    }

}

.container {
    height: 80%;

    .form-wrapper {
        display: flex;
        justify-content: space-around;
        margin-right: 28px;
        margin-left: 28px;
        height: 100%;

        form {
            width: 100%;
            font-family: "Roboto", sans-serif;
            display: flex;
            flex-direction: column;
            row-gap: 30px;

            .input-wrapper {
                width: 100%;
                display: flex;
                flex-direction: column;
            }

            label {
                font-size: 16pt;
                font-weight: bolder;
                color: rgb(14, 14, 14);
                display: block;
                margin-bottom: 10px;
            }

            input[type="text"] {
                display: flex;
                background-color: #EEEEEE;
                width: 90%;
                height: 36px;
                border: none;
                border-radius: 18px;
                padding-left: 20px;
            }

            .color-picker-wrapper {
                display: flex;
                flex-direction: column;
                align-items: center;
                flex-wrap: wrap;
                width: 100%;
                gap: 10px;

                .color-line {
                    width: 260px;

                    .color-dot {
                        appearance: none;
                        width: 32px;
                        height: 32px;
                        border-radius: 50%;
                        border: none;
                        cursor: pointer;
                        transition: transform 0.1s, border 0.1s;
                    }

                    .color-dot:checked {
                        border: 3px solid #00000063;
                        transform: scale(1.1);
                    }

                }
            }

            input[type="submit"] {
                font-weight: bold;
                height: 36px;
                width: 90%;
                border-radius: 20px;
                border: none;
                color: white;
                align-self: center;
                background-color: rgb(14, 14, 14);
            }

        }
    }

}

footer {
    width: 100vw;
    height: 80px;
    position: fixed;
    bottom: 0px;
    font-family: Consolas, -apple-system;
    color: rgb(14, 14, 14);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10pt;

    & a {
        color: rgb(14, 14, 14);
    }
}