/**
* Seth Gunkel
* https://github.com/sgunkel/Clock-Online
*
* Uses the Flexbox positioning system with the Mobile First methodology.
*/

:root {
    font-size:  calc(1vw + 1em);
	box-sizing: border-box;
    
    --default-font:                  'helvetica neue';
    --default-gray:                  #97959C;
    --default-text-color:            #000000;
    --default-highlight-color:       #f86d07;
    --default-white-background:      #ffffff;
    --default-blue-background-color: #193549;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
    margin:           0;
    font-family:      var(--default-font), Helvetica, sans-serif;
    touch-action:     manipulation; /* Disables double tap to zoom on mobile */
    background-color: var(--default-blue-background-color);
}

button {
    color:            var(--default-text-color);
    border:           2px solid var(--default-text-color);
    padding:          1em;
    font-size:        0.8rem;
    background-color: var(--default-white-background);
}

/* needs more work */
select {
    color:            var(--default-text-color);
    border:           2px solid var(--default-text-color);
    padding:          0.8em;
    font-size:        0.8rem;
    font-family:      var(--default-font);
    border-radius:    0;
    background-color: var(--default-white-background);
}

footer {
    color:            var(--default-text-color);
    width:            100%;
    bottom:           0;
    padding:          0.5em;
    position:         fixed;
    font-size:        0.7rem;
    text-align:       left;
    background-color: var(--default-gray);
}

.wrapper {
    margin:  0;
    padding: 1em;
}

.panel {
    padding:        0 0.5em;
    display:        flex;
    flex-direction: column;
    /*background-color: aqua; /* for development (to check the spacing) */
}

.panel > * + * {
    margin-top: 0.4em;
}

.time {
    color:      var(--default-highlight-color);
    font-size:  3.5rem;
    text-align: center;
}

/* Creates an orange border around the time when it's running. */
.time-running {

    /* work on here some more - this adds pushes all the elements below
        slightly when added and removed */


    border:        2px solid var(--default-highlight-color);
    border-radius: 0.07em;
}

.vertical-flex {
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
}

.horizontal-flex {
    display:         flex;
    flex-direction:  column;
    justify-content: space-around;
}

.add-subtract-btn {
    padding:   1em;
    font-size: 1.7rem;
}

.undo-redo-reset-btn {
    padding:   0 0.5em;
    font-size: 1rem;
}
.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}