* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

:root {
    --bg-color: #242424;
    --bg-button-color: rgb(197, 222, 255);
    --button-text-color: rgb(46, 50, 51);
    --primary-text-color: rgb(234, 232, 232);
    --delete-color: rgb(216, 52, 65);
    /* padding variables */
    --nav-padding: 16px 28px;
    --section-padding: 24px 32px;
    --padding-s: 6px;
    --padding-m: 8px;
    --padding-l: 12px;
    --padding-xl: 16px;
    --padding-xxl: 24px;
    /* border-radius variables */
    --border-radius-s: 4px;
    --border-radius-m: 8px;
    --border-radius-l: 12px;
    --border-radius-xl: 16px;
    --border-radius-xxl: 24px;

    --bg-task-color: #3f475242;
}

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--primary-text-color);

}

nav {
    padding: var(--nav-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: 0.1px solid rgba(242, 242, 242, 0.072);
    font-size: x-large;
}

nav h2 {
    color: rgb(212, 212, 174);
    font-style: oblique;
}

button {
    background-color: var(--bg-button-color);
    border: none;
    outline: none;
    padding: var(--padding-l) var(--padding-xxl);
    cursor: pointer;
    color: var(--button-text-color);
    border-radius: var(--border-radius-m);
    font-size: large;
    font-weight: 600;
}

button:hover {
    transform: scale(1.01);
    box-shadow: 0px 0px 20px 1px rgba(150, 222, 249, 0.232);


}

section {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    gap: var(--padding-xxl);
    padding: var(--section-padding);
    margin: 1%;


}

.task-column {
    flex-grow: 1;
    border-radius: var(--border-radius-m);
    overflow: hidden;
    border: 0.1px solid rgba(242, 242, 242, 0.072);
    display: flex;
    flex-direction: column;
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.116);

}

.task-column .heading {
    background-color: rgb(60, 60, 60);
    display: flex;
    justify-content: space-between;
    color: rgb(162, 168, 172);
    padding: var(--border-radius-l);
}

main {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.task {
    background-color: var(--bg-task-color);
    border-radius: var(--border-radius-m);
    padding: var(--padding-l) var(--padding-xl);
    position: relative;
    min-height: 120px;
    cursor: grab;
    transition: all 0.1s ease-out;
}

.task:hover {
    box-shadow: 5px 5px 10px 2px rgba(10, 10, 10, 0.116);
    transform: scale(1.01);
}

.task-list {
    flex-grow: 1;
    padding: var(--padding-l) var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--padding-l);
}

.task-description {
    opacity: 50%;
    font-weight: 100;
    font-size: small;
}

.delete-button {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: var(--delete-color);
    border: none;
    padding: var(--padding-m);
    border-radius: 50px;
    cursor: pointer;

}

.delete-button:hover {
    box-shadow: 5px 5px 10px 2px rgba(10, 10, 10, 0.116);
    transform: scale(1.2);
    box-shadow: 0px 0px 2px 1px rgb(121, 42, 42);

}

.hover-over {
    transform: scale(1.02);
    transition: all 0.3s ease-out;
}

.modal {
    height: 100%;
    display: none;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* backdrop-filter: blur(10px) brightness(95%); */
    position: fixed;
    top: 0;
    width: 100%;


}

input {
    padding: var(--padding-xl) var(--padding-xl);
    border-radius: var(--border-radius-m);
    border: none;
    background-color: var(--bg-task-color);
    font-size: large;
    margin-right: var(--padding-xxl);
    margin-left: var(--padding-xxl);
}

.modal form {
    background-color: rgba(42, 48, 56, 0.226);
    display: flex;
    flex-direction: column;
    padding: var(--section-padding);
    border: 1px solid rgb(86, 86, 86);
    border-radius: var(--border-radius-m);
    gap: 30px;
    backdrop-filter: blur(10px) brightness(95%);
    transition: all 0.1s ease-out;
    box-shadow: 5px 5px 30px 20px rgba(0, 0, 0, 0.219);
    font-size: large;
    align-items: center;

}

.modal form:hover {
    transform: scale(1.01);

}