.content {
    width: 100%;
    box-sizing: border-box;
    height: 2700px;
    border-radius: 22px;
}
.notation {
    width: 100%;
    box-sizing: border-box;
    height: 400px;
    border-radius: 22px;
    margin-top: 8px;
}
.notation-item {
    padding: 0 20px;
    width: 33.3333333%;
    box-sizing: border-box;
    float: left;
}
.tools {
	height: 25px;
}
.tools-item select {
    border-radius: 10px;
}
.header-text {
    font-size: 24px;
    text-align: center;
    padding: 20px
}
.background-color {
    width: 100%;
    float: left;
    text-align: right;
    padding: 0 20px;
    box-sizing: border-box;
}
/*.background-color-item {
    width: 56%;
    float: left;
}
.background-color-item-2 {
    width: 40%;
    float: left;
}
.background-color-item-3 {
    width: 4%;
    float: left;
}*/
.cube-container {
	width: 20%;
	float: left;
}
@media (max-width: 1400px) {
    .notation {
        height: 512px;
    }
    .notation-item {
        height: 182px;
    }
}
@media (max-width: 850px) {
    .notation {
        height: 710px;
    }
    .notation-item {
        width: 50%;
    }
}
@media (max-width: 1000px) {
	.cube-container {
		width: 33.3333333%;
	}
    .content {
        height: 4220px;
    }
}
@media (max-width: 600px) {
    .notation {
        height: 1146px;
    }
    .notation-item {
        width: 100%;
    }
    .tools-item {
        display: block;
    }
    .alg-text {
        height: 65px !important;
    }
    .content {
        height: 4646px;
    }
}
@media (max-width: 520px) {
    .notation {
        height: 1354px;
    }
    .notation-item-last2 {
        height: 288px;
    }
}
@media (max-width: 375px) {
	.cube-container {
		width: 50%;
	}
    .tools-item label {
        display: block;
    }
    .content {
        height: 7046px;
    }
    .notation {
        height: 1378px;
    }
}
.cube-frame {
	width: 111px;
	margin: 0 auto;
}
.small-part-h {
	width: 30px;
	height: 5px;
	border: 1px solid black;
	float: left;
	border-radius: 5px;
}
.small-part-v {
	width: 5px;
	height: 30px;
	border: 1px solid black;
	float: left;
	border-radius: 5px;
}
.big-part {
	width: 30px;
	height: 30px;
	border: 1px solid black;
	float: left;
	border-radius: 5px;
}
.big-part-center {
	border-radius: 5px;
}
.row {
	height: 32px;	
}
.row-s {
	margin-left: 7px;
	height: 7px;
}
.alg-name {
	padding: 10px;
	font-size: 18px;
	text-align: center;
	white-space: nowrap;
}
.alg-text {
	padding: 10px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
    height: 45px;
}

.yellow {
	background-color: yellow;
}

.gray {
	background-color: gray;
}

.copyright {
    text-align: center;
}