/*FONTS START*/
@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProBla.woff2') format('woff2'),
         url('fonts/WOFF/GothaProBla.woff') format('woff'),
         url('fonts/OTF/GothaProBla.otf') format('opentype');
    font-weight: 900; /* Black */
    font-style: normal;
}

@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProBol.woff2') format('woff2'),
         url('fonts/WOFF/GothaProBol.woff') format('woff'),
         url('fonts/OTF/GothaProBol.otf') format('opentype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProLig.woff2') format('woff2'),
         url('fonts/WOFF/GothaProLig.woff') format('woff'),
         url('fonts/OTF/GothaProLig.otf') format('opentype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProLigIta.woff2') format('woff2'),
         url('fonts/WOFF/GothaProLigIta.woff') format('woff'),
         url('fonts/OTF/GothaProLigIta.otf') format('opentype');
    font-weight: 300; /* Light Italic */
    font-style: italic;
}

@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProMed.woff2') format('woff2'),
         url('fonts/WOFF/GothaProMed.woff') format('woff'),
         url('fonts/OTF/GothaProMed.otf') format('opentype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProReg.woff2') format('woff2'),
         url('fonts/WOFF/GothaProReg.woff') format('woff'),
         url('fonts/OTF/GothaProReg.otf') format('opentype');
    font-weight: 400; /* Regular */
    font-style: normal;
}




@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-VariableFont_wght_200_Light.woff2') format('woff2'),
         url('fonts/Montserrat-VariableFont_wght_200_Light.woff') format('woff'),
         url('fonts/Montserrat-VariableFont_wght_200_0.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-VariableFont_wght_400_4.woff2') format('woff2'),
         url('fonts/Montserrat-VariableFont_wght_400_4.woff') format('woff'),
         url('fonts/Montserrat-VariableFont_wght_400_4.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/*FONTS END*/



body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #FFFFFF;
    transition: background-color 0.3s;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #191919;
        color: white;
    }

#display {
     background-color: #212121 !important;
     color: white !important;
}

.time-button {
     background-color: #212121 !important;
     color: white !important;
}
}

#stopwatch {
    text-align: center;
    font-family: 'GothamPro', sans-serif;
    font-weight: 800;
}

#display {
    font-size: 2.5em;
    margin-bottom: 20px;
    font-family: 'GothamPro', sans-serif;
    font-weight: 700;
    color: #1966d2;
    background-color: #e6f0ff;
    border-radius: 20px;
    padding: 50px;
}

.control-button, .time-button {
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
    color: #1966d2;
    background-color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    display: none; /* Initially hidden */
    transition: transform 0.1s ease;
}

.control-button:hover, .time-button:hover {
    transform: scale(1.05); /* Scale up the element on hover */
}

#startStop {
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
    color: #168037; /* Start text color */
    background-color: #CDEAD4; /* Start background color */
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: 'GothamPro', sans-serif;
    font-weight: 500;
    display: none; /* Initially hidden */
}

.time-button {
    display: inline-block; /* Visible on page load */
}

.refresh-button {
    font-size: 1.5em;
    background-color: transparent;
    color: gray;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin: 5px;
}

.refresh-button:hover {
    color: darkgray;
}