:root {
    --clr-dark: #070a13;
    --clr-light: #f1f5f9;
    --clr-slate100: #f1f5f9;
    --clr-slate200: #e2e8f0;
    --clr-slate300: #cbd5e1;
    --clr-slate400: #94a3b8;
    --clr-slate500: #64748b;
    --clr-slate600: #475569;
    --clr-slate700: #334155;
    --clr-slate800: #1e293b;
    --clr-slate900: #020617;
    --clr-indigo-500: #6366f1;
    --clr-indigo-600: #4f46e5;
    --clr-purple-500: #a855f7;
    --clr-purple-600: #9333ea;
    --clr-rose-500: #f43f5e;
    --clr-rose-600: #e11d48;
    --clr-artic-lime: #d0ff14;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "General Sans", system-ui;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--clr-dark);
    color: var(--clr-light);
    background-image: url(wallpaper.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

/* HEADER && FOOTER */

header,
footer {
    height: 5rem;
}

header,
footer {
    display: grid;
    place-items: center;
}

header a,
footer a {
    text-decoration: none;
}

header p,
footer p {
    font-family: "Source Code Pro", system-ui;
    color: var(--clr-slate500);
    cursor: pointer;
}

/* FORM PARENT - GLOBAL CSS */

.form__wrapper {
    display: flex;
    justify-content: center
}

form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: auto;
    width: 35rem;
    padding: 3rem;
    font-size: 1rem;
    background-color: rgb(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border: 2px solid rgb(255, 255, 255, 0.25);
    border-radius: 2rem;
}

form h1 {
    font-size: 2.5rem;
    padding: 0.25rem 0rem;
    text-align: center;
    font-weight: 600;
    font-family: "Clash Display";
    backdrop-filter: blur(100px);
    border-radius: 0 2.5rem 0 2.5rem;
    color: var(--clr-light);
    background-color: hsl(274, 87%, 13%);
    border-bottom: 4px solid rgb(255, 255, 255, 0.25);
    border-right: 4px solid rgb(255, 255, 255, 0.25);
}

form input,
form select {
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    outline: none;
    border: 2px solid rgb(255, 255, 255, 0.25);
    margin: 0.5rem 0rem;
    border-radius: 50px;
    height: 3.5rem;
    color: #25043E;
    background-color: rgb(255, 255, 255, 0.3);
}

form input::placeholder {
    color: rgb(37, 4, 62, 0.7);
}

form label {
    font-size: 1.2rem;
    font-weight: 600;
}

form .langs label,
form .os label {
    font-size: 1.1rem;
    font-family: "Source Code Pro";
    font-weight: 400;
}

form select {
    color: #25043E;
}

form select option {
    font-weight: 500;
    color: rgb(37, 4, 62, 0.7);
    background-color: var(--clr-slate300);
}

/* :FORM: USER USER USER */
.user__role,
.user__langs,
.user__os,
.user__feedback {
    gap: 1rem;
}

/* FORM: USER INFO */

.user__info {
    position: relative;
}

.user__info i {
    position: absolute;
    left: 1rem;
    transform: translateY(100%);
    color: #25043E;
}

.user__info>input {
    /* 👇👇👇 */
    width: 100%;
    padding-left: 3rem;
}

/* FORM: USER ROLE */

.user__role {
    display: flex;
    flex-direction: column;
}

/* FORM: USER LANGS */

.user__langs {
    display: flex;
    flex-direction: column;
}

.user__langs input {
    /* 👇👇👇 */
    height: 1.3rem;
    width: 1.3rem;
    /* margin: 0; */
    accent-color: var(--clr-purple-600);
}

.langs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 3rem;
    place-items: center;
}

.user__langs>.langs>label {
    /* border: 2px solid yellow; */
    /* 👇👇👇 */
    /* margin: auto; */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* FORM: USER OS */

.user__os {
    display: flex;
    flex-direction: column;
}

.user__os input {
    height: 1.3rem;
    width: 1.3rem;
    accent-color: var(--clr-purple-600);
}

.os {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 3rem;
    place-items: center;
}

.user__os>.os>label {
    /* margin: auto; */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* FORM: USER FEEDBACK */

.user__feedback {
    display: flex;
    flex-direction: column;
}

.user__feedback textarea {
    background-color: var(--clr-slate100);
    outline: none;
    min-width: 100%;
    max-width: 100%;
    min-height: 7rem;
    font-size: 1.1rem;
    font-family: "General Sans", system-ui;
    font-weight: 500;
    color: var(--clr-slate800);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    background-color: rgb(255, 255, 255, 0.2);
    color: var(--clr-slate200);
}

.btn__wrapper {
    display: flex;
    gap: 1rem;
    margin-bottom: -0.5rem;
}

.btn__wrapper input {
    width: 100%;
    cursor: pointer;
    color: var(--clr-light);
    font-weight: 600;
    background-color: hsl(274, 87%, 15%);
    border-bottom: 6px solid rgb(255, 255, 255, 0.25);
    border-right: 4px solid rgb(255, 255, 255, 0.25);
    transition: 0.3s;
}

.btn__wrapper input:hover {
    background-color: hsl(274, 87%, 20%);
    transform: translateY(-7px);
}

/* EXTERNAL CSS */

::-webkit-scrollbar {
    background-color: var(--clr-dark);
}

::-webkit-scrollbar-thumb {
    background-color: var(--clr-slate700);
}

/* Responsiveness */

@media screen and (max-width: 600px) {

    form {
        width: 30rem;
    }
}

@media screen and (max-width: 525px) {

    form {
        width: 25rem;
        padding: 1rem;
    }

    form h1 {
        font-size: 2rem;
        padding: 0.5rem;
        margin-top: 1.5rem;
    }

    .langs,
    .os {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 3rem 3rem;
        justify-items: start;
    }

    .langs label,
    .os label {
        transform: translateX(1rem);
    }

}

@media screen and (max-width: 420px) {

    form {
        width: 23rem;
        padding: 1rem;
    }

    form input,
    form select,
    form option {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 400px) {

    form {
        width: 21rem;
    }
}

/* TOAST NOTIFICATION */

body {
    position: relative;
}

.notifications {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
}

.toast {
    position: relative;
    padding: 10px;
    color: #fff;
    margin-bottom: 10px;
    width: 21rem;
    display: grid;
    grid-template-columns: 70px 1fr 70px;
    border-radius: 5px;
    --color: #0abf30;
    background-image:
        linear-gradient(to right, #0abf3055, #22242f 30%);
    animation: show 0.3s ease 1 forwards
}

.toast i {
    color: var(--color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: x-large;
}

.toast .title {
    font-size: x-large;
    font-weight: 600;
    font-size: 1.4rem;
    text-align: center;
}

.toast span,
.toast i:nth-child(3) {
    color: #fff;
    opacity: 0.6;
}

@keyframes show {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(10%);
    }
}

.toast::before {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--color);
    width: 100%;
    height: 3px;
    content: '';
    box-shadow: 0 0 10px var(--color);
    animation: timeOut 3s linear 1 forwards
}

@keyframes timeOut {
    to {
        width: 0;
    }
}

.toast.error {
    --color: #f24d4c;
    background-image:
        linear-gradient(to right, #f24d4c55, #22242F 30%);
}

.toast.warning {
    --color: #e9bd0c;
    background-image:
        linear-gradient(to right, #e9bd0c55, #22242F 30%);
}

.toast.info {
    --color: var(--clr-indigo-500);
    background-image:
        linear-gradient(to right, #3498db55, #22242F 30%);
}