homework-js/js15/css/style.css

.light-container1, .light-container2 {
	background:rgb(51, 51, 51);
	width: 150px;
	height: 440px;
	border-radius: 10px;
	font-size: 70px;
	text-align:center;
	padding: 1px 0;
	border: 6px solid #000;
	margin: 30px 30px;
}

.light-container3, .light-container4 {
    background:rgb(51, 51, 51);
	width: 150px;
	height: 380px;
	border-radius: 10px;
	font-size: 70px;
	text-align:center;
	padding: 5px 0;
	border: 6px solid #000;
	margin: 30px 30px;
}

.circle, .round, .series {
	background:grey;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin-left: 15px;
	margin-top: 20px;
	line-height: 120px;
	-webkit-transition: background-color 0.5s ease-out;
	-o-transition: background-color 0.5s ease-out;
	transition: background-color 0.5s ease-out;
}
/*Добавляем фоновый цвет*/
.circleBGColor1, .roundBGColor1 {
	background-color: #f00;
}
.circleBGColor2 {
	background-color: #ff0;
}
.circleBGColor3, .roundBGColor3 {
	background-color: #0f0;
}
/*Добавляем текстовый цвет*/
.circleColor1 {
	color: #f00;
}
.circleColor2 {
	color: #0f0;
}

.roundColor1 {
    color: rgb(245, 209, 209);
}

.roundColor2 {
    color: rgb(91, 128, 96);
}

.btn, #btn {
    display: inline-block;
    padding: 16px 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 15px;
    box-shadow: 0 6px #999;
}

.btn, #btn:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

button[disabled]{
    background: #D4D4D4;     
}

#btn[disabled]{
    background: #D4D4D4;     
}