.square {
	border: 1px solid black;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    position: fixed;
    top: 0;
    right: 0;
    z-index:9999999999999999999999;
}

		.square-1 {
			background-color: #5b697d;
            top: 0;
		}

		.square-2 {
			background-color: #81855c;
            top: 30px;
		}

		.square-3 {
			background-color: #a0a0a0;
            top: 60px;
		}

		.square-4 {
			background-color: #c78b14;
            top: 90px;
		}


		.square-5 {
			background-color: #fff;
            top: 120px;
		}


		.square-6 {
			background-color: #fff;
            top: 200px;
		}
		.square-7 {
			background-color: #fff;
            top: 230px;
		}
		.square-8 {
			background-color: #fff;
            top: 260px;
		}
		.square-9 {
			background-color: #fff;
            top: 290px;
		}
		.square-10 {
			background-color: #fff;
            top: 320px;
		}
		.square-11 {
			background-color: #fff;
            top: 350px;
		}
		.square-12 {
			background-color: #fff;
            top: 380px;
		}
		.square-13 {
			background-color: #fff;
            top: 410px;
		}

		.square-14 {
			background-color: #fff;
            top: 440px;
		}
		.square-15 {
			background-color: #fff;
            top: 470px;
		}
		.square-16 {
			background-color: #fff;
            top: 500px;
		}
		.square-17 {
			background-color: #fff;
            top: 530px;
		}
		.square-18 {
			background-color: #fff;
            top: 560px;
		}