:root{
    --page-background:#101010;
    --header-background:#303030be;
    --section-background:#1e1e1e;
    --card-background:rgb(56, 56, 56);
    --text-color:white;
    --link-color:#66d2d6;
    --header-color:#66d2d6;
    --border-color:white;
    --shadow:0px 0px 3px 0px rgba(0,0,0,0.5);
    --border-radius:5px;
    --section-spacing:20px;
    --section-padding:40px 20px;
    --section-width:1300px;
    --confirm-color:rgb(51, 255, 0);
    --confirm-color-hover:rgb(0, 255, 4);
    --deny-color:rgb(255, 0, 0);
    --cta-color:#fbc740;
    --cta-color-hover:rgb(246, 246, 45);
    --section-border:3px solid rgba(226, 226, 226, 0.2);
    --section-shadow:0px 0px 4px 2px rgba(120, 120, 120, 0.4);
}


/* Modern CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}

html, body {
    height: 100vh;
    color: #ffffff;
}

body {
    background-color: var(--page-background);
}


.page-wrapper{
    width:min(100%, 600px);
    margin:0 auto;
    background-color: var(--section-background);
    border-radius: var(--border-radius);
    display:flex;
    flex-direction: column;
    height:100%;
}

.header{
    display:grid;
    grid-template-columns: max-content 1fr;
    padding:10px;
    background-color: var(--header-background);
    gap:20px;
    margin-bottom:20px;
}

a{
    color: var(--link-color);
    text-decoration: none;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:10px 20px;
}

.tab-buttons{
    display:flex;
}

.tab-buttons button{
    flex-grow:1;
    padding:7px;
    border:none;
    background-color: grey;
    font-size:1.2rem;
    font-weight:bold;
}

.tab-buttons button.active{
    background-color: var(--cta-color);
}

.tab-page{
    background-color: var(--card-background);
    display:none;
    padding:10px;
}

.tab-page.active{
    display:flex;
}

.tab-page  div{
    width:100%;
}

#root{
    display:flex;
    flex-direction: column;
    gap:20px;
    padding:5px;
}

button{
    width:100%;
    background-color: var(--cta-color);
    padding:10px;
}

.countdown{
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:3rem;
    font-weight:bold;
    padding:20px;
}

.tap-area h3{
    font-size:1.2rem;
}


.tap-area{
    min-height:400px;
    user-select: none;
    border:3px dashed var(--cta-color);
    color:var(--cta-color);
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    cursor:pointer;
    position: relative;
    font-size:3rem;
    font-weight:bold;
}

.tap-area span{
    position: absolute;
    top:10px;
    left:10px;
    font-size:1.4rem;
    font-weight:bold;
}

.history.active{
    display:flex;
    flex-direction: column;
}

table {
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1rem;
    width:100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--section-shadow);
}

table thead tr {
    background-color: var(--header-background);
    color: var(--header-color);
    text-align: left;
    font-weight: bold;
}

table th, table td {
    padding: 12px 15px;
    border: var(--section-border);
}

table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

table tbody tr:nth-of-type(even) {
    background-color: var(--section-background);
}

table tbody tr:last-of-type {
    border-bottom: 2px solid var(--header-background);
}

.retry-button{
    animation:retry 3s forwards;
}

@keyframes retry{
    0%{
        background-color:grey;
        pointer-events: none;
    }
    99%{ pointer-events:none; background-color:grey; }
    100%{
        pointer-events: all;
        background-color:var(--cta-color);
        cursor:pointer;
    }
}