/* import google fonts */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

/*region Root configuration */
:root {
    
    /* colours */
    --primary:           #b74400;
    --primary-content:   #ffd2b7;
    --primary-light:     #ea5700;
    --primary-dark:      #843100;
    
    --secondary:         #0017b7;
    --secondary-content: #b7c0ff;
    --secondary-dark:    #001184;
    --secondary-light:   #001dea;
    
    --background:        #18181b;
    --foreground:        #232429;
    --border:            #3b3c45;
    
    --copy-lighter:      #fbfbfb;
    --copy-light:        #d6d7dc;
    --copy:              #9fa1ac;
    
    --success:           #00b700;
    --warning:           #b7b700;
    --error:             #b70000;
    --success-content:   #b7ffb7;
    --warning-content:   #000000;
    --error-content:     #ffb7b7;
    
    /* fonts */
    --default:           'Josefin Sans', Roboto, sans-serif;
    --serif:             'Crimson Pro', serif;
    --heavy:             'Bebas Neue', impact, sans-serif;
    
    /* border-radius */
    --radius-xs:         .15rem;
    --radius-s:          .25rem;
    --radius-m:          .5rem;
    --radius-l:          .75rem;
    --radius-xl:         1rem;
    
    /* ELEMENT SIZE */
    --full:              100vw;
    --x-large:           700px;
    --large:             600px;
    --medium:            550px;
    --small:             480px;
    
}

/* ===== Scrollbar CSS ===== */
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 6px;
}

*::-webkit-scrollbar-track {
    background: var(--foreground);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--primary-light);
    box-shadow:       0 -3px 5px black;
    border-radius:    100px;
    border:           1px solid var(--background);
}

/*endregion*/

body {
    background-color: var(--background);
    box-shadow:       inset 0 -12px 1rem -12px black, inset 0 12px 1rem -12px black;
    color:            var(--copy);
    font-family:      var(--default);
    height:           100vh;
    margin:           0;
    padding:          0;
    overflow-x:       hidden;
    width:            100vw -1rem;
}

button:not(.resume-button, .close-button) {
    background-color: transparent;
    border:           none;
    right:            0;
    position:         absolute;
    
    & img {
        height:     5vh;
        opacity:    .5;
        transition: all 300ms ease;
        
        &:hover {
            filter:     brightness(1.5);
            opacity:    1;
            transform:  scale(1.3) rotate(360deg);
            transition: all 300ms ease;
        }
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--heavy);
    letter-spacing: 2px;
    margin:         .25rem 0;
    transition:     all 300ms ease;
    
    &.disabled:hover {
        cursor: default;
    }
    
    &.pointer:hover {
        cursor:         pointer;
        letter-spacing: 1rem;
        transform:      scale(1.15);
        transition:     all 300ms ease;
    }
}

h1 {
    font-size: clamp(100px, 10vw, 200px);
    &.normal-time::after{
        content: attr(data-time);
    }
}

h2 {
    font-size: clamp(40px, 4vw, 80px);
    
    &.injury-time::after{
        content: attr(data-time);
    }
    
    &:not(disabled) {
        color: var(--error);
    }
}

.clock-container {
    align-items:     center;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    height:          -webkit-fill-available;
}

.injury-time {
    &::before {
        content:       '+';
        padding-right: 2px;
    }
}

.disabled {
    color: var(--foreground);
}

.dialog-overlay {
    align-items:     center;
    backdrop-filter: blur(.5rem) brightness(.75) opacity(.8);
    display:         flex;
    height:          100vh;
    justify-content: center;
    left:            0;
    position:        absolute;
    top:             0;
    width:           100vw;
}

.resume-dialog {
    background-color:      var(--background);
    border:                3px solid var(--border);
    border-radius:         var(--radius-m);
    display:               grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows:    repeat(11, 1fr);
    height:                25vh;
    padding:               .5rem;
    width:                 33vw;
}

.dialog-text {
    align-self:  center;
    font-size:   1.25rem;
    grid-area:   1 / 3 / 9 / 10;
    line-height: 1.5rem;
    text-align:  justify;
}

.dialog-buttons {
    grid-area:       9 / 4 / 11 / 9;
    display:         flex;
    flex-direction:  row;
    justify-content: center;
}

.resume-button, .close-button {
    border:         none;
    font-family:    var(--heavy);
    font-size:      1.25rem;
    text-transform: uppercase;
    transition:     all 300ms ease;
    width:          -webkit-fill-available;
    
    &:first-of-type {
        border-top-left-radius:    var(--radius-s);
        border-bottom-left-radius: var(--radius-s);
        background-color:          var(--success-content);
    }
    
    &:last-of-type {
        border-top-right-radius:    var(--radius-s);
        border-bottom-right-radius: var(--radius-s);
        margin-left:                2px;
        background-color:           var(--secondary-content);
    }
    
    &:hover {
        box-shadow:  0 0 5px var(--background);
        cursor:      pointer;
        text-shadow: 0 0 3px var(--background);
        transform:   scale(1.1);
        transition:  all 300ms ease;
    }
}