/* roots amd properties*/

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotation {
    0% {
        --gradient-angle: 0deg;
    }

    100% {
        --gradient-angle: 360deg;
    }
}

:root {
    --gold: #FFD700;
    --blue: #07F2EE;
    --yellow: #EFF207;
    --green: #66E125;
    --peach: #FFDAB9;
}

/* tags */

body {
    margin: 0;
    font-family: sans-serif;
}

header {
    height: 5vh;
}

main {
    background: linear-gradient(#1c300e, #006400);
    z-index: 1;
}

table {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1 1 0;
    width: 40vw;
    color: #daa520;
    background: black;
    border-radius: 10rem;
    position: relative;
    z-index: 3;
}

table::before,
table::after {
    content: "";
    position: absolute;
    inset: -.4rem;
    z-index: 2;
    background-image: conic-gradient(from var(--gradient-angle),
            var(--green),
            var(--gold));
    border-radius: inherit;
    animation: rotation 10s linear infinite;
}

table::after {
    filter: blur(2.5rem);
}

table tbody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;
    background: black;
    width: inherit;
    border-radius: inherit;
    flex: 1 1 0;
}

table tbody tr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 0;
    padding: .5rem 0 .5rem 0;
    font-size: 1.5rem;
    width: 25vw;
}

table tbody tr:hover {
    background: #daa520;
    color: #000000;
    flex-basis: 4rem;
    font-size: 3rem;
    border-style: hidden;
    border-radius: 10rem;
    box-shadow: 1rem 1rem 10rem 1rem #daa520;
}

/* classes */

.tableTitlePosition {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tableTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    color: #daa520;
    font-size: 5rem;
    text-shadow: black .3rem .3rem;
    height: 15vh;
    width: 50vw;
    border-bottom: #daa520 double 1rem;
    border-radius: 0 0 10rem 10rem;
}

.tableModal {
    display: flex;
    flex-direction: column;
    height: 80vh;
    flex: 1 1 0;
    justify-content: space-between;
    align-items: center;
}

.tablePosition {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 0;
    height: 40vh;
}

.buttonPosition {
    display: flex;
    height: 40vh;
    justify-content: center;
    align-items: center;
}

.modalBttn {
    background-color: #daa520;
    border: solid black .1rem;
    width: 25vw;
    flex: 1 1 0;
    box-shadow: .4rem .8rem .5rem black;
}

.modalBttn:hover {
    background: var(--peach);
}

.modal {
    background-blend-mode: darken;
}

.modal-header {
    background: #daa520;
    color: #000000;
}

.modal-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #000000;
    color: #daa520;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    background: #daa520;
}

.btn-secondary {
    background: #000000;
    color: #daa520;
}

/* ids */
#saveBttn {
    background: #000000;
    color: #daa520;
}

/* media quereys */