/*{"last_published":"2026-07-26 03:31:15 UTC"}*/

:root{
    --bg-blue: rgb(40, 38, 49);
    --bg-light-blue: rgb(66, 62, 83);
    --active-blue: rgb(107, 128, 172);
    --hover-blue: rgb(87, 99, 121);
}

#player-info{
    justify-content: left;
}

h1{
    font-family:house-of-cards;
}
h2{
    font-family:house-of-cards;
}
body {
    font-family:oso-serif-variable;
    text-align:center;
    background: black;
    color: white;
    font-size:200%;
}

.text-input{
    font-family: oso-serif-variable;
    font-size:80%;
    border-width: 0px;
    border-bottom-width: 2px;
    background-color: black;
    color:white;
    border-bottom-color:red;
    border-style: solid;
    max-width: 90%;
    width:auto
}

/*
Source - https://stackoverflow.com/a/18396306
Posted by Mr Lister
Retrieved 2026-07-28, License - CC BY-SA 3.0
*/

#radio-info{
    display:flex;
    
    flex-direction: column;
    margin-top:20px;
}

.radio-flex{
    justify-content: center;
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin:10px;
    margin-left:20px;
    margin-right: 20px;
}
.radiowrapper{
    min-width: 0;
    height:100px;
    align-content: center;
}

.radiowrapper input {
    visibility:hidden; width:0;
}

.radiowrapper label{
    cursor:pointer;
    font-family:oso-serif-variable;
    font-weight: 100;
    background-color: rgb(46, 46, 46);
    padding:10px;
    border-radius: 10px;
    transition: background-color 0.3s, font-size 0.5s, font-weight 0.3s;
}

.radiowrapper input:checked + label {
    
    border-width: 5px;
    border-color:maroon;
    background-color: maroon;
    font-weight: 800;
}


#trauma-stress{
    display: flex;
    flex-direction: row;
    column-gap: 10%;
    place-content: center;
}

#coin-flex{
    display:flex;
    align-items: center;
    justify-content: center;
    column-gap:5%;
    padding-top:5%;
    height:100%;
}

#coin-tracker{
    place-content: center;
    display: grid;
    grid-template-columns: auto auto;
    width:fit-content;
    height:fit-content;
    border-radius: 2px;
    gap:10%;
        
}

#flex-info
{
    display:flex;
    flex-direction: row;
    align-items: center;
    gap:50px;
    justify-self: center;
    align-self:center;
    justify-content: center;
}

.active{
    background-color: red;
}
.active[id^=coin]{
    background-color: gold;
}

.inactive{
    background-color: black;
}

.button{
    border-style:solid;
    border-color:red;
    border-radius:10px;
    border-width: 10px;
    transition: border-width 0.3s, background-color 0.3s, border-color 0.3s;
    cursor:pointer
}

[id^=coin]{
    border-color:gold;
}

.button:active{
    border-width: 15px;
    background-color: black;
    border-color:black;
}

.square{
    width:60px;
    height:60px;
}

.slant{
    margin:5px;
    height:120px;
    width:60px;
    transform: skewY(-20deg);
}

/* .half-slant{
    --p: 70px;
    height:10vw;
    width:5vw;
    clip-path: polygon(0 0,100% 0,100% calc(100% - var(--p)),0 100%);
} */
#clock-grid{
    align-items: center;
    justify-content: left;
    display: flex;
    width:70%;
    flex-wrap: wrap;
}
.clock-parent-div{
    height:fit-content;
    width:fit-content;
    position: relative;
    margin: 20px;
    background-color: var(--bg-blue);
    padding:20px;
    max-width: 100%;

}

.clock-heading{
    margin:10px;
    min-width: 220px;
    margin-bottom:40px;
    hyphens: auto;
    overflow-wrap: anywhere;
}


.clock-button-div{
    display: flex;
    align-items: end;
    justify-content: center;
    flex-direction: column;
    position:relative;
    height:100%;
    width:30%;
    margin-left:auto;
    gap:5px;
}

.clock-button{
    color:white;
    height:30%;
    width:100%;
    font-size:100%;
    text-align: center;
    vertical-align: center;
    background-color:var(--bg-light-blue);
    border-style: none;
    transition: 0.1s;
}


.clock-button:active{
    background-color: var(--active-blue);
    width:110%;
}
.clock-button:hover{
    background-color: var(--hover-blue);
}

.clock-button[id*=-rm]{
    transition: background-color 0.3s;
}
.clock-button:hover[id*=-rm]{
    background-color: maroon;
}

.clock-button:active[id*=-rm]{
    background-color: red;
}

#create-clock-flex{
    display: flex;
    height:100px;
    column-gap: 10px;
    flex-direction: row;
}
#create-custom-clock-flex{
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding:5px;
    border-radius: 10px;
    border-width: 5px;
    border-color: var(--bg-blue);
    background-color: var(--bg-blue);

}
#create-custom-clock-adjust-flex{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#create-clock-heading{
    margin-top: 20px;
    min-width: fit-content;
}

.create-clock{
    min-width: 100px;
    height:auto
}

.create-custom-clock{
    height:100%;
    min-width: 80px;
}

.text-area{
    width:60%;
    resize:vertical;
    min-height:200px;
    font-family:oso-serif-variable;
    font-size:70%;
    background-color: var(--bg-blue);
    border-width:5px;
    border-color: var(--bg-blue);
    border-radius: 10px;
    padding:10px;
    color:white;
}

/* #playerNotes{
    /* margin-top:50px; */
/* } 

/*
Source - https://stackoverflow.com/a/17251714
Posted by joelmdev, modified by community. See post 'Timeline' for change history
Retrieved 2026-07-30, License - CC BY-SA 3.0
*/

#playerText{
    display:flex;
    flex-direction: row;
    align-items: center;
}

.text-div{
    width:50%;
}

.pie {
  width: 150px;
  height: 150px;
  border-top-left-radius: 50%;
  border-bottom-left-radius:50%;
  transition: background-color 0.3s;
}

@media (max-width: 800px){
    #radio-info{
        flex-direction: column;
        
    }
    #create-clock-flex{
        flex-direction: column;
        height:fit-content;
        align-items:center;
    }
    .create-clock
    {
        margin-bottom:10px;
        width:140px;
        height:140px;
    }
    #custom-clock-size
    {
        height:100px;
    }
    #flex-info
    {   
        display:flex;
        flex-direction: column;
    }

    .radio-flex{
        justify-content: left;
    }
    .text-area{
        width:90%;
    }
    #playerText{
        flex-direction: column;
    }
}