@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

body {
  background: #7fe9d4;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #191654, #43c6ac);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #191654, #43c6ac);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  display: block;
  height: 100vh;
}

hr {
  background-color: #fff;
}

#link--active {
  box-shadow: none;
  background-color: #FFD166;
  box-shadow: 2.5px 2.5px 0 var(--active);
}

.container-fluid {
  padding: 0.3rem;
}

.thinner {
  margin-top: 0;
  margin-bottom: 0px;
  height: 90px;
}

.maintitle{
  margin-bottom: 1rem;
}
#title1{
  font-weight: 700;
  font-size: 1.3rem;
}
.container-fluid {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.navbar-collapse {
  top: -10px;
  position: relative;
}

#container {
  color: #d7dfe4;
  margin-top: 8rem;
}

.digit {
  font-size: 150px;
  /*font-weight: bold;*/
  font-family: "digital-7";
}

.txt {
  font-size: 40px;
  font-weight: bold;
}

#btn-container {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.btn {
  padding: 7px 25px;
  font-size: 15px;
  margin: 4px 10px;
  color: white;
  border: 0px;
  border-radius: 5px;
  cursor: pointer;
}


#time {
  width: 100%;
}

@media screen and (max-width: 990px) {
  #time .digit {
    font-size: 4.3rem;
  }

  #time .txt {
    font-size: 2.1rem;
  }
}

@media screen and (max-width: 991px) {

  #switch-theme input[type='checkbox'],
  #switch-theme label {
    position: relative;
  }

  #switch-theme label {
    margin-top: -1.6rem;
  }

  #switch-theme {
    max-width: max-content;
  }
  .maintitle{
    margin-bottom: 0rem;
  }
}

@media screen and (max-width: 890px) {
  #time .digit {
    font-size: 4rem;
  }

  #time .txt {
    font-size: 1.9rem;
  }

  #time {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 590px) {
  #time .digit {
    font-size: 3rem;
  }

  #time .txt {
    font-size: 1.5rem;
  }

  #btn-container {
    width: 100%;
    justify-content: space-around;
  }
}

@media screen and (max-width: 490px) {
  #time .digit {
    font-size: 2.6rem;
  }

  #time .txt {
    font-size: 1.2rem;
  }
}

#clearLap {
  background-color: #ee42a6;
}

#laps {
  margin-top: 100px;
  text-align: center;
  font-size: 25px;
}

#record-container {
  /* record container is hidden by default */
  display: none;

  margin-top: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

#record-table {

  width: 100%;
  border-collapse: collapse;
  margin: 50px auto;

}

/* tr:nth-of-type(odd) { 
	background: rgb(65, 65, 65); 
	} */


#record-table th,
td,
tr {
  text-align: center;
  border-radius: 3px;
  padding: 25px 30px;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
  color: #000;

}

tr {
  background-color: #ffffff;
  margin-bottom: 25px;
}

th {
  background-color: #95A5A6;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#record-table-body:nth-child(n + 7) {
  visibility: hidden;
}

#record-table::-webkit-scrollbar {
  width: 4px;
}

#record-table::-webkit-scrollbar-track {
  border-radius: 20px;
  box-shadow: none;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

#record-table::-webkit-scrollbar-thumb {
  border-radius: 20px;
  box-shadow: 0in;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

/*DIGITAL CLOCK FONT*/

@font-face {
  font-family: "digital-7";
  src: url("fonts/digital-7.ttf");
}

.checkbox {
  opacity: 0;
  position: relative;
  top: 0px;
  right: 27px;
  z-index: 10;
  height: 3rem;
  width: 4rem;
  cursor: pointer;
}

.label {
  width: 50px;
  height: 26px;
  background-color: #111;
  display: flex;
  border-radius: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  margin-top: -40px;
  position: relative;
  transform: scale(1);
}

.ball {
  width: 20px;
  height: 20px;
  background-color: white;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}

.checkbox:checked+.label .ball {
  transform: translateX(24px);
}

.fa-moon {
  color: pink;
}

.fa-sun {
  color: yellow;
}

.todayDate {
  display: block;
  text-align: center;
  font-weight: bold;
}

.hov {
  width: 40px;
  height: 40px;
}

.hov:hover {
  transition: 2s;
  width: 60px;
  height: 60px;
}

#start {
  color: hsl(127, 100%, 57%);
}

#start:hover {
  color: #000000;
  background: hsl(131, 100%, 69%);
  box-shadow: 0 0 10px hsl(151, 88%, 70%), 0 0 40px hsl(159, 93%, 77%), 0 0 80px hsl(157, 96%, 72%);
  transition-delay: 0.001s;
  font-size: large;
}

#reset {
  color: hwb(277 44% 20%);
}

#reset:hover {
  color: #000000;
  background: hwb(277 6% 7%);
  box-shadow: 0 0 10px #9f2c99, 0 0 40px #481844, 0 0 80px #c18cd0;
  transition-delay: 0.001s;
  font-size: large;
}

#lap {
  color: hwb(67 20% 3%);
}

#lap:hover {
  color: #000000;
  background: hwb(61 31% 0%);
  box-shadow: 0 0 10px hwb(68 57% 0%), 0 0 40px hwb(68 54% 0%), 0 0 80px hwb(70 63% 1%);
  transition-delay: 0.001s;
  font-size: large;
}

#clearlap {
  color: rgb(255, 71, 39);
}

#clearlap:hover {
  color: #000000;
  background: rgb(255, 89, 38);
  box-shadow: 0 0 10px rgb(255, 118, 63), 0 0 40px rgb(255, 106, 103), 0 0 80px rgb(255, 137, 104);
  transition-delay: 0.001s;
  font-size: large;
}

.nav-item {
  display: flex;
}

.nav-item>a {
  margin-right: 30px;
}

.nav-item>a:hover {
  box-shadow: rgba(0, 0, 0, 0.185) 0px 3px 8px;
}

.buttons {
  color: #fefefe;
  outline: none;
  height: 50px;
  text-align: center;
  width: 150px;
  border-radius: 55px;
  background: #8b19ae00;
  letter-spacing: 1px;
  text-shadow: 0;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease;
  margin: 10px;
  font-family: 'Roboto';
  overflow: hidden;
  border: 2px solid white;
}

.buttons:hover {
  color: #1b5c7e;
  background: #46f5f8;
  box-shadow: 0 0 10px #29d3d6, 0 0 40px #29d3d6, 0 0 80px #29d3d6;
  transition-delay: 0.001s;
}

.buttons:active {
  letter-spacing: 2px;
}

.buttons:focus {
  outline: none;
}

#disabling {
  pointer-events: none;
}


::-webkit-scrollbar {
  width: 10px;
  background-color: #ffffff90;
  /* background-color: transparent; */
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /* background-image: -webkit-gradient(linear,
      left bottom,
      left top,
      color-stop(0.44, rgb(122, 153, 217)),
      color-stop(0.72, rgb(73, 125, 189)),
      color-stop(0.86, rgb(28, 58, 148))); */
  background-color: rgba(46, 46, 46, 0.729);
}

footer {
  height: 290px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration-color: white;
  text-emphasis-style: bold;

}

.social-links {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 0px;
}

li {
  width: max(5vw, 2.5rem);
  height: max(5vw, 2.5rem);
  list-style: none;
  margin: 10px;
}

.link {
  width: 100%;
  height: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  font-size: 20px;
  transition: all 0.5s ease;
}

.textfooter {
  color: black;
  font-size: 20px;
  font-weight: bold;
  margin: 10px;
  text-align: center;
}

.container-fluid {
  margin-top: auto;
  padding-left: 0;
  padding-right: 0;
}

.my-class {
  background: white;
}

:root {
  --main: #FFD166;
  --active: #d82323;
  --secondary: #800080;
  --tertiary: #;
  --light: white;
  --dark: black;
}

.btn {
  background-color: white;
  padding: auto 12px;
  height: 2.3em;
  position: relative;
  box-shadow: 5px 5px 0 var(--main);
  z-index: 2;
  border-radius: 5px;
}


.btn:hover {
  cursor: pointer;
}

.btn:before {
  content: '';
  width: 0;
  height: 0;
  bottom: 0px;
  right: 0px;
  position: absolute;
  z-index: -1;
  background: var(--main);
  transition: width .3s, height .3s;
  border-top-left-radius: 5px;
}


.btn:hover:before {
  width: calc(100% - 3px);
  height: calc(100% - 3px);
}

#timer-control {
  color: hsl(127, 100%, 57%);
}

#timer-control:hover {
  color: #000000;
  background: hsl(131, 100%, 69%);
  box-shadow: 0 0 10px hsl(151, 88%, 70%), 0 0 40px hsl(159, 93%, 77%), 0 0 80px hsl(157, 96%, 72%);
  transition-delay: 0.001s;
  font-size: large;
}

#record-table-body tr {
  background-color: #10a4da; /* Light blue */
  color: #1dc2ce; /* Text color */
}