:root{
	--blueActive:  rgba(140,225,255,1);
	--blueNotActive: rgba(90,225,255,0.025);
	--blueBoxShadow: 0px -2px 25px rgba(90,255,255,0.4);
}

body{
	margin: 0;
	padding: 0;
	font-family: 'Roboto Mono', monospace;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(44,44,55);
}

.numbers{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.colon{
	font-size: 85pt;
	color: var(--blueActive);
}

.number{
	width: 250px;
	display: flex;
	justify-content: space-around;
}

.digit{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100px;
}

.line{
	display: block;
	background-color: var(--blueNotActive);
}


.line-horizontal{
	width: 100px;
	height: 10px;
}

.line-vertical{
	width: 10px;
	height: 100px;
}


/*Lighting up the correct lines to make the numbers.*/

/*0*/
.num0 .line-top, 
.num0 .line-right-top, 
.num0 .line-left-top, 
.num0 .line-right-bottom, 
.num0 .line-left-bottom, 
.num0 .line-bottom,

/*1*/
.num1 .line-right-top, 
.num1 .line-right-bottom,

/*2*/
.num2 .line-top, 
.num2 .line-right-top, 
.num2 .line-middle, 
.num2 .line-left-bottom, 
.num2 .line-bottom,

/*3*/
.num3 .line-top, 
.num3 .line-right-top, 
.num3 .line-middle, 
.num3 .line-right-bottom, 
.num3 .line-bottom,

/*4*/
.num4 .line-right-top,
.num4 .line-middle,
.num4 .line-left-top,
.num4 .line-right-bottom,

/*5*/ 
.num5 .line-top, 
.num5 .line-left-top, 
.num5 .line-middle, 
.num5 .line-right-bottom, 
.num5 .line-bottom,

/*6*/
.num6 .line-top,
.num6 .line-left-top,
.num6 .line-middle,
.num6 .line-left-bottom,
.num6 .line-right-bottom,
.num6 .line-bottom,

/*7*/
.num7 .line-top, 
.num7 .line-right-top, 
.num7 .line-right-bottom,

/*8*/
.num8 .line,

/*9*/
.num9 .line-top, 
.num9 .line-left-top, 
.num9 .line-middle,
.num9 .line-right-top,
.num9 .line-right-bottom,
.num9 .line-bottom
{
	background-color: var(--blueActive);
	box-shadow: var(--blueBoxShadow);
}


/*Make 0, 1, 4, and 7 use corners when lighting up too*/
.num0 .line-right-top::after, .num0 .line-left-top::after,
.num1 .line-right-bottom::after, .num1 .line-right-top::after,
.num4 .line-right-bottom::after, .num4 .line-right-top::after,.num4 .line-left-top::after,
.num7 .line-right-bottom::after, .num7 .line-right-top::after{
	content: '';
	border-top: 10px solid var(--blueActive);
	border-bottom: 10px solid var(--blueActive);
	margin-top: -10px;
	height: 100%;
	display: block;
}

.inactive .line{
	background-color: var(--blueNotActive);
	box-shadow: none;
}
.inactive .line::after{
	border-color: transparent;
}
.colon-second.inactive{
	color: var(--blueNotActive);
}





.footer-wrapper{
	display: flex;
	justify-content: space-between;
	color: white;
	text-align: center;
}
.footer{
	width: 250px;
	margin-top: 10px;
	display: flex;
	justify-content: space-around;
}
.footer_number1{
	
}
.footer_number2{
	
}
.footer_number3{
	
}



/*Pretty toggle*/
input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
  display: none;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 50px;
  height: 25px;
  background: var(--blueNotActive);
  display: block;
  border: 2px solid white;
  border-radius: 100px;
  position: relative;
}

label:after {
  content: '';
  position: absolute;
  top: 4px;
  left: 3px;
  width: 13px;
  height: 13px;
  background: white;
  border: 2px solid rgb(44,44,55);
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label {
  background: var(--blueActive);
}

input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}




/*AM PM*/
.ampm-wrapper{
	height: 300px;
}
.ampm{
	color: var(--blueActive);
	font-size: 50pt;
}