body {
    color: silver;
    font-family: monospace;
}

/*Stopwatch title text  */
#header {
    text-align: center;
    font-size: 7vw;
    padding-top: 20px;
}

/* lap counter - top right  */
#lap {
    text-align: end;
    padding-right: 20px;
    font-size: 4vw;
    padding-top: 20px;
}

/* Timer  */
#timer {
    text-align: center;
    font-size: 10vw;
    padding-top: 15px;
}

/*Centralising the button columns  */
.row .col-2 {
    margin: 0 auto;  
    padding: 0;
    text-align: center;
}

/* row padding for the buttons  */
.row {
    padding: 30px 50px;
    margin-bottom: 50px;
}

/*button size */
.btn {
    height: 70px;
    width: 70px;  
    padding: 0;
    border-radius: 80%;
    display: none;
}

/*Lap info box - html page */
#lapInfo {
    max-height: 300px;
    border: 1px solid black;
    overflow-y: scroll;
    font-size: 20px;
}

/*lap details container div - js file - within the lapInfo box, each row in the lap info box */
.lap{
    height: 70px;
    border-bottom: 0.5px solid black;  
}

/*lap details container div in the lapInfo box - last entry - js file. So that the bottom border isn't duplicated. */
.lap:last-child{
    height: 70px;
    border-bottom: none;  
}

/*lapDetailsLaps - first div created in the js file, Lap 1:, Lap 2: ... in the lapInfo box*/
.lapDetailsLaps{
    float: left;
    padding-top: 15px;
    font-size: 1.3em;
}

/*lapDetailsTime - second div created in the js file, the times in the lapInfo box */
.lapDetailsTime {
    float: right;
    padding-top: 15px;
    font-size: 1.3em;
}

/*Footer top margin to give space after elements before footer. */
.footer {
    margin-top: 320px;
}

/*The paragraph within the footer, to give some spacing at the left side. */
.footer p {
    padding-left: 50px;
}

/*
.footer p a.link {
   color: white; 
}
*/

/*The link within the footer*/
.footer p a {
    color: silver;
    text-decoration: none;
}

/*The link within the footer*/

.footer p a:hover {
    color: black;
    text-decoration: none;
}