:root {
  --color-primary: #2E7D32;          
  --color-secondary: #FFD600;        
  --color-background-light: #F5F5F5; 
  --color-background-dark: #212121;  
  --color-white: #FFFFFF;            
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 16px; 
    font-size: clamp(16px, 1.5vw, 64px); 
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.spinner {
    border: 6px solid var(--color-white);
    border-top: 6px solid var(--color-secondary);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.logo-text {
    font-family: sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-secondary);
    letter-spacing: 0.15rem;
}
body{
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > * { 
    padding-left: 1rem;
    padding-right: 1rem;
}
body button, 
body input{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-top: clamp(8px, calc(48px - 5vw), 12px);
    padding-bottom: clamp(8px, calc(48px - 5vw), 12px);
    font-size: 1rem;
    border-radius: 1rem;
    border: none;
}
body button{
    background-color: var(--color-primary);
    color: white;
}
body input{
    background-color: var(--color-background-light);
    color: var(--color-background-dark);
}
body > .page-bottom{
    margin-top: auto; 
    padding-left: 0rem;
    padding-right: 0rem;
}
body > .page-bottom > .banner-nat-ada{
    padding-left: 1rem;
    padding-right: 1rem;
}
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 24px;
    padding-bottom: 8px;
    background-color: var(--color-background-light);
}
footer > .policy{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4px;
}
footer > .help-mail{
    font-size: 0.75rem;
    color: black;
}
.reset-psw-page-btn{
    text-decoration: underline;
}
button:hover, .reset-psw-page-btn:hover{
  transform: scale(1.03);
}
button:active, .reset-psw-page-btn:hover {
  transform: scale(1.05);
}
.navbar>.buttons>button{
    background-color: var(--color-secondary);
    color: var(--color-background-dark);
}
.navbar > .buttons > .current-group{
    max-width: 7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navbar{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-background-dark);
}
.hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--color-background-light);
}
.hero>h1, .tutorial>h2{
    color: var(--color-primary);
}
.hero>p, .tutorial>p{
    color: var(--color-background-dark);
}
.hero > *{
    text-align: center;
}
.tutorial{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 16px;
    background-color: var(--color-white);
}
body > .tutorial > p{
    text-align: center;
    width: 14rem;
}
.login, 
.register,
.reset-psw,
.verify-email-view{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
}
.verify-email-view{
    text-align: center;
}
.login>p, .register>p{
    color: var(--color-primary);
}
.error-msg{
    color: red;
}
.inactive{
    display: none !important;
}
label.toggle-password{
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}
h1.page-title {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
}
.reset-psw{
    text-align: center;
}
.logged-user-home .nickname{
    font-size: 0.75rem;
}
.logged-user-home, .group-info, .choice-new-group, .choice-new-member{
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center
}
.logged-user-home>.all-groups, .group-info>.all-members{
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    width: 100%;
    max-width: 20rem;
}
.logged-user-home>.all-groups>.group, .group-info>.all-members>.member{
    width: 100%;
    overflow-x: hidden;
    border: 1px solid black;
    border-radius: 0px;
    padding-top: 12px; 
    padding-bottom: 12px; 
    padding-top: clamp(12px, calc(48px - 5vw), 24px);
    padding-bottom: clamp(12px, calc(48px - 5vw), 24px);
}
.choice-new-group>.ok-or-no, .choice-new-member>.ok-or-no{
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}
.all-groups>button, .all-members>button{
    background-color: var(--color-background-dark);
    color: var(--color-white);
}
.logged-user-home > p, .group-info > p{
    color: var(--color-background-dark);
}
body > .member-players {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 16px;
    text-align: center;
}
body > .member-players > .all-players {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
body > .member-players > .all-players > .player{
    display: flex;
    flex-direction: column;
    gap:4px;
    width: 100%;
    max-width: 15rem;
    padding: 0.5rem;
    border: 1px solid var(--color-background-dark);
    border-radius: 1rem;
    background-color: var(--color-background-light);
}
body > .member-players > .all-players > .player > .name,
body > .all-sugg > .suggestion > .me > .player > .name,
body > .all-sugg > .suggestion > .other > .player > .name {
    text-align: left;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    color: var(--color-primary);
}
body > .member-players > .all-players > .player > .player-row,
body > .all-sugg > .suggestion > .me > .player > .player-row,
body > .all-sugg > .suggestion > .other > .player > .player-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
}
body > .member-players > .all-players > .player > .player-row > .role{
    color: var(--color-background-dark);
}
body > .member-players > .all-players > .player > .player-row > .value{
    font-weight: bold; 
    color: var(--color-background-dark);
}
body > .add-player {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
body > .add-player > *, body > .change-rating > *, body > .add-nickname > *{
    text-align: center;
}
select{
    font-size: 1rem;
    border-radius: 0.75rem;
}
body > .change-rating, body > .add-nickname{
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin-top: 32px;
}
body > .change-rating > .player-name{
    color: var(--color-primary);
}
body > .all-sugg{
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap:24px;
}
body > .all-sugg > .me-and-other{
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    text-align: center;
}
body > .all-sugg > .me-and-other > .me,
body > .all-sugg > .me-and-other > .other
{
    width: 50%;
    max-width: 10rem;
    overflow: hidden; 
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
}
body > .all-sugg > .suggestion {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
}
body > .all-sugg > .suggestion > .me,
body > .all-sugg > .suggestion > .other {
    width: 50%;
    max-width: 10rem;
    padding: 0.5rem;
    border: 1px solid var(--color-background-dark);
    border-radius: 1rem;
    background-color: var(--color-background-light);
}
form > .delete-btn{
    background-color: #d32f2f;
    font-size: 0.5rem;
}