@import url('https://fonts.googleapis.com/css?family=Poppins');

:root[data-theme="light"] {
    --text: rgb(18, 26, 28);
    --background: rgb(241, 247, 248);
    --primary: rgb(34, 99, 109);
    --secondary: rgb(125, 218, 232);
    --secondaryLight: rgb(38, 193, 217);
    --accent: rgb(16, 205, 234);
    --empty: rgba(16, 205, 234, 0.3);
}

:root[data-theme="dark"] {
    --text: rgb(227, 235, 237);
    --background: rgb(7, 13, 14);
    --primary: rgb(146, 211, 221);
    --secondary: rgb(23, 116, 130);
    --secondaryLight: rgb(212, 243, 247);
    --accent: rgb(21, 210, 239);
    --empty: rgba(21, 210, 239, 0.3);
}

* {
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    background-color: var(--background);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.beGone {
    display: none !important;
}

button {
    background-color: var(--primary);
    color: var(--background);
    border-radius: 10px;
    border: none;
    text-align: center;
}

button:active {
    transform: translateY(3px);
}

.fullScreen, .theme-toggle, .history, .save {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    z-index: 3;
    font-size: 30px;
}

.theme-toggle {
    top: 10px !important;
}

.history {
    top: 75% !important;
    transform: translateY(-75%) translateX(-50%) !important;
}

.save {
    color: black !important;
    top: 25% !important;
    transform: translateY(-25%) translateX(-50%) !important;
}

.save:active {
    transform: translateY(-25%) translateX(-50%) translateY(3px) !important;
}

.history:active {
    transform: translateY(-75%) translateX(-50%) translateY(3px) !important;
}

.fullScreen:active, .theme-toggle:active {
    transform: translateX(-50%) translateY(3px) !important;
}

.pl1, .pl2 {
    width: 50vw;
    height: 100vh;
    text-align: center;
}

.pl1 {
    float: left;
}

.divider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 100vh;
    background-color: var(--secondaryLight);
    z-index: 2;
    box-shadow: 0 0 10px var(--secondary), 0 0 20px var(--secondary), 0 0 30px var(--secondary), 0 0 40px var(--secondary), 0 0 50px var(--secondary);
}

.pl_name {
    font-size: 2.5rem;
    text-align: center;
    margin-top: 5vh;
}

.pl_ball {
    font-size: 1.5rem;
    text-align: center;
    margin: 0.8rem;
}

.pl_decideHalf, .pl_countUp, .pl_countDown, .pl_foul {
    font-size: 1.8rem;
    margin: 1vh 5px;
    padding: 5px;
    width: 10vw;
    height: 10vh;
}

.pl_decideHalf {
    width: 20vw;
}

.pl1_score, .pl2_score {
    font-size: 7rem;
    text-align: center;
    margin: 0;
}

.pl1_fouls, .pl2_fouls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 1vh 5px;
    padding: 5px;
    border-radius: 10px;
    width: 20vw;
    height: 10vh;
    margin: 0 auto;
}

.pl1_foul1, .pl1_foul2, .pl1_foul3,
.pl2_foul1, .pl2_foul2, .pl2_foul3 {
    background-color: var(--empty);
    width: 5vw;
    height: 5vh;
    border: 3px solid var(--accent);
    border-radius: 10px;
    margin: 0 0.3vw;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    font-size: 1.2rem;
}

.inverted {
    filter: invert(1);
}