.background
{
    background-color: rgba(77, 10, 10, 0.671);
    background-image: url("/static/img/solo_leveling.png");
    overflow: hidden;

    margin: 0; /* remove default margin */
    padding: 0;
    height: 100vh; /* full height of the viewport */
    background-size: cover;       /* scales image to cover the screen */
    /*background-repeat: no-repeat;*/ /* prevents tiling */
    background-position: center;  /* keeps image centered */
}

.video-background {
    position: relative;
    width: 100%;
    height: 100vh; /* or any desired size */
    overflow-y: auto;
    overflow-x: hidden;
}

.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: -1;
    object-fit: cover; /* Makes it behave like background-size: cover */
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: auto; /* Optional: prevents scrollbars */
}

.Stats
{
    position: relative;
    backdrop-filter: blur(2px);

    text-align: center;
    color: rgb(29, 165, 219);
    font-weight: 200;
    font-size: 50px;
    text-shadow: 2px 2px 15px;
    border-radius: 3rem;

    background: linear-gradient(to left top,
    rgba(19, 22, 224, 0.493),
    rgba(0, 0, 0, 0.788)
    );
    
    z-index: 1;
}

.scroll_hider
{
    overflow: hidden;
}

.form_body
{
    position: relative;
    top: 0%;
    left: -10%;
    font-size: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    text-align: center;
    font-weight: 600;
    text-shadow: 1px 1px 30px;
    color:rgb(33, 210, 241);

    z-index: 1;
}

.form
{
    position: relative;
    top: -300%;
    font-size: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    text-align: center;
    font-weight: 500;
    

    z-index: 1;
}

.sbutton
{
    position: relative;
    z-index: 1;
    min-width: 150px;
    font-size: 20px;
    box-shadow: 1px 1px 40px rgb(189, 15, 180);
}

.button
{
    position: relative;
    top: -300%;
    left: 30%;
    z-index: 1;
    min-width: 150px;
    font-size: 20px;
    box-shadow: 1px 1px 40px rgb(189, 15, 180);
}

a {
    color: rgb(189, 15, 180);
    text-decoration: dotted;
    text-shadow: 4px 4px 30px;
    font-weight: 700;
    position: relative;
    top: 70px;
    left: -30px;
  }

.cin
{
    position: relative;
    top: 30%;
    left: -30%;
    border: 1px solid rgb(217, 33, 241);
    text-align: center;
    min-width: 250px;
    border-radius: 2rem;
    min-height: 100px;
    z-index: 1;
    box-shadow: 1px 1px 40px rgb(33, 210, 241);
    font-size: xx-large;
}

.Pin
{
    position: relative;
    /*top: 30%;*/
    /*left: -30%;*/
    border: 1px solid rgb(33, 210, 241);
    text-align: center;
    min-width: 250px;
    border-radius: 2rem;
    min-height: 30px;
    z-index: 1;
    box-shadow: 1px 1px 40px rgb(33, 210, 241);
    font-size: large;
}

.in
{
    position: relative;
    top: -300%;
    left: 30%;
    border: 1px solid rgb(33, 210, 241);
    text-align: center;
    min-width: 250px;
    border-radius: 2rem;
    min-height: 30px;
    z-index: 1;
    box-shadow: 1px 1px 40px rgb(33, 210, 241);
    font-size: large;
}

.heading
{
    position: relative;

    top: 0%;
    left: 2%;

    width: 95%;
    height: 400px;
    background: linear-gradient(to left bottom,
    rgba(19, 22, 224, 0.493),
    rgba(0, 0, 0, 0.788)
    );

    backdrop-filter: blur(2px);

    text-align: center;
    color: rgb(29, 165, 219);
    font-weight: 200;
    font-size: 50px;
    text-shadow: 2px 2px 15px;
    border-radius: 3rem;

    z-index: 1;
}

.heading1
{
    position: relative;

    top: 10.2%;
    left: 0%;

    width: 95%;
    height: 400px;
    background: linear-gradient(to left bottom,
    rgba(19, 22, 224, 0.664),
    rgba(0, 0, 0, 0.788)
    );

    backdrop-filter: blur(2px);

    text-align: center;
    color: rgb(189, 15, 180);
    font-weight: 200;
    font-size: 50px;
    text-shadow: 2px 2px 15px;
    border-radius: 3rem;

    z-index: 1;
}


.glass
{
    background: rgba(192, 192, 192, 0.356);
    width: 50%;
    height: 50%;

    position: relative;
    top: 70%;
    left: 2%;

    background: linear-gradient(to left top,
    rgba(206, 209, 209, 0.274),
    rgba(54, 53, 54, 0.349)
    );

    backdrop-filter: blur(6px);
    border-radius: 4rem;
    z-index: 1;

    display: flex;
    justify-content: end;
}

/* General Table Styles */
#taskTable {
    width: 100%;
    border-collapse: collapse; /* Make the borders collapse into each other */
    border-radius: 4rem;
}

#taskTable th, #taskTable td {
    padding: 12px; /* Adds space inside each cell */
    text-align: left; /* Aligns the text to the left */
    /*border: 1px solid #000000;*/ /* Light border for the table */
    border-radius: 4rem;
}

#taskTable th {
    /*background-color: #a409ec69;*/ /* Light grey background for headers */
    background: linear-gradient(to left bottom,
    rgba(24, 170, 207, 0.411),
    rgba(128, 23, 177, 0.507));
    border-radius: 4rem;
}

#taskTable th, #taskTable td {
    min-width: 150px; /* Ensure columns have a minimum width */
    border-radius: 4rem;
}

/* Specific Widths for Each Column */
#taskTable th:nth-child(1), #taskTable td:nth-child(1) {
    width: 15%; /* ID column width */
}

#taskTable th:nth-child(2), #taskTable td:nth-child(2) {
    width: 35%; /* Task column width */
}

#taskTable th:nth-child(3), #taskTable td:nth-child(3) {
    width: 20%; /* Importance column width */
}

#taskTable th:nth-child(4), #taskTable td:nth-child(4) {
    width: 30%; /* Status column width */
}

/* Make the table body scrollable */
#taskTable tbody {
    display: block;
    max-height: 200px;  /* Set the max height for the table body (approximately 5 rows) */
    overflow-y: auto;   /* Enable vertical scrolling */
    width: 100%;        /* Ensure the table body width matches the table */
}

/* Make sure the header stays fixed */
#taskTable thead {
    display: table;   /* Ensure the header behaves like a table element */
    width: 100%;      /* Ensure the header width matches the table width */
}

#taskTable th, #taskTable td {
    width: auto;  /* Allow table cells to stretch to fit content */
}

/* Ensure the header and body align properly */
#taskTable tbody tr {
    display: table;   /* Ensure rows inside tbody are displayed as table rows */
    width: 100%;      /* Make sure rows are 100% of the table's width */
    table-layout: fixed;  /* Ensure columns align correctly */
}

/* General Table Styles */
#setTask {
    width: 100%;
    border-collapse: collapse; /* Make the borders collapse into each other */
}

#setTask th, #setTask td {
    padding: 12px; /* Adds space inside each cell */
    text-align: left; /* Aligns the text to the left */
    /*border: 1px solid #000000;*/ /* Light border for the table */
    border-radius: 4rem;
}

#setTask th {
    /*background-color: #c812ec88;*/ /* Light grey background for headers */
    background: linear-gradient(to right bottom,
    rgba(18, 184, 206, 0.356),
    rgba(128, 23, 177, 0.507));
    border-radius: 4rem;
}

#setTask th, #setTask td {
    min-width: 150px; /* Ensure columns have a minimum width */
}

/* Specific Widths for Each Column */
#setTask th:nth-child(1), #setTask td:nth-child(1) {
    width: 60%; /* Task column width */
}

#setTask th:nth-child(2), #setTask td:nth-child(2) {
    width: 40%; /* Status column width */
}

/* Make the table body scrollable */
#setTask tbody {
    display: block;
    max-height: 200px;  /* Set the max height for the table body (approximately 5 rows) */
    overflow-x: hidden;   /* Enable vertical scrolling */
    width: 100%;        /* Ensure the table body width matches the table */
}

/* Make sure the header stays fixed */
#setTask thead {
    display: table;   /* Ensure the header behaves like a table element */
    width: 100%;      /* Ensure the header width matches the table width */
}

#setTask th, #setTask td {
    width: auto;  /* Allow table cells to stretch to fit content */
}

/* Ensure the header and body align properly */
#setTask tbody tr {
    display: table;   /* Ensure rows inside tbody are displayed as table rows */
    width: 100%;      /* Make sure rows are 100% of the table's width */
    table-layout: fixed;  /* Ensure columns align correctly */
}


.section_tasks_lists
{
    position: absolute;
    top: auto;
    left: auto;
}

.tin
{
    width: 80%;
    font-weight: 600;
}