:root {
    --font-size--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
    --font-size--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
    --font-size-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
    --font-size-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
    --font-size-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
    --font-size-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
    --font-size-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
    --font-size-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);

    --lighter-green: #d5e6a6;
    --light-green: #e6f8b7;
    --dark-green: #bacd84;
    --darker-green: #7f8d59;

    --light-blue: #afd6e3;
    --dark-blue: #359bef;

}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--light-green);
    font-family: roboto;
    touch-action: manipulation;
}

.title {
    text-align: center;
    font-size: var(--font-size-4);
}

.author {
    text-align: center;
}

#sleepDataTable,
#sleepDataTable td,
#sleepDataTable th {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px 10px;
    font-size: var(--font-size-0);
    text-align: center;
}

#sleepDataTable {
    margin: auto;
}


.user-input {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.user-input>div {
    background-color: var(--light-blue);
    border: black 1px solid;
    border-radius: 10px;
    /* margin-top: 10px; */
    padding: 10px;
    /* margin: 10px auto; */

    /* width: min(100%, 500px); */

    flex-grow: 1;
    flex-basis: 300px;

    text-align: center;
}

.user-input>div>div:first-of-type {
    font-size: var(--font-size-1);
    margin-bottom: 10px;
}

#inputSleepDate {
    /* all: unset; */
    /* background-color: lightcoral; */
    -webkit-min-logical-width: 90%;
    /* display: block; */
    width: 90%;
    height: 30px;
    margin: auto;

    text-align: center;

    background-color: var(--light-green);
    border: var(--darker-green) 2px solid;
    color: black;
    outline: none;
    transition: 0.5s;
}

#inputSleepDuration {
    height: 30px;
    text-align: center;
    background-color: var(--light-green);
    border: var(--darker-green) 2px solid;
    transition: 0.5s;
    outline: none;
}


input {
    font-size: var(--font-size-0);
}

#inputSleepDuration:focus,
#inputSleepDate:focus {
    /* border-color: var(--darker-green); */
    border-color: var(--dark-green);
    /* border-width: 3px; */
    /* outline-color: var(--darker-green); */
    /* border-color: var(--darker-green); */
    /* background-color: lightblue; */
}


.sleep-quality-buttons {
    display: flex;
}

.sleep-quality-buttons>button {
    all: unset;
    display: block;
    height: 30px;
    background-color: var(--light-green);
    text-align: center;
    font-size: var(--font-size-0);
    border: 1px solid var(--darker-green);
    cursor: pointer;
    flex-grow: 1;
    flex-basis: 200px;

    transition: 0.4s;
}

.sleep-quality-buttons>button:hover {
    background-color: var(--lighter-green);
}

.sleep-quality-buttons>button.selected-quality {
    background-color: var(--dark-green);
    /* border-color: var(--dark-green); */
    /* border-left-color: var(--dark-green); */
    /* border-right-color: var(--dark-green); */
    /* color: white; */
}


.delete-box>button {
    width: 100%;
    font-size: var(--font-size--2);
    padding: 5px 0;
}


.ripple {
    background-position: center;
    transition: 0.8s;
}

.ripple:hover {
    background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}

.ripple:active:not(:disabled) {
    background-color: var(--light-blue);
    background-size: 100%;
    transition: 0s;
}

.submit-button {

    margin-top: 10px;
}

.button-style-1 {
    border: none;
    border-radius: 2px;
    padding: 12px 18px;
    font-size: var(--font-size-0);
    text-transform: uppercase;
    cursor: pointer;
    color: white;
    background-color: var(--dark-blue);
    box-shadow: 0 0 4px #999;
    outline: none;
    width: 100%;
}

.week-button-container {
    display: flex;
    gap: 10px;
}

.week-button-container>button {
    background-color: var(--darker-green);
    margin-top: 10px;
}

.week-button-container>button.ripple:hover {
    background: #9dad71 radial-gradient(circle, transparent 1%, #9dad71 1%) center/15000%;
}

.week-button-container>button.ripple:active:not(:disabled) {
    background-color: #bacf82;
    background-size: 100%;
    transition: 0s;
}

.chart-title {
    text-align: center;
    font-size: var(--font-size-2);
}

.chart-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.chart-container {
    width: min(100%, 450px);
    /* width: 40%; */
}

.gemini-response {
    text-align: justify;
    font-size: var(--font-size-0);
    background-color: var(--light-blue);
    border-radius: 10px;
    border: 1px solid black;
    margin-top: 10px;
    padding: 10px;
}

#askGeminiButton:disabled,
.ripple:disabled {
    background-color: var(--light-blue);
    cursor: not-allowed;
}

.week-button-container>button.ripple:disabled {
    background-color: var(--dark-green);
}

@font-face {
    font-family: roboto;
    src: url("../fonts/roboto.woff") format("woff");
}

.loader {
    width: 20px;
    height: 20px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}