* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				background-color: #0a1339;
			}

			.cylinder {
				width: 100px;
				height: 300px;
				margin: 100px;
				position: relative;
			}

			.cylinder span {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 0;
				background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
			}

			.cylinder span::after {
				content: '';
				position: absolute;
				width: 100%;
				height: 30px;
				background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
				bottom: -30px;
				border-radius: 0 0 50% 50%;
			}

			.cylinder span::before {
				content: '';
				position: absolute;
				width: 100%;
				height: 30px;
				background-color: #1d2b54;
				top: -15px;
				border-radius: 50%;
			}

			.cylinder i {
				position: absolute;
				width: 80%;
				background-color: #1865d4;
				bottom: -12px;
				left: 10%;
				z-index: 1;
				transition: 0.3s;
				background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
			}

			.cylinder i::after {
				content: '';
				position: absolute;
				width: 100%;
				height: 18px;
				background-color: #1865d4;
				bottom: -18px;
				border-radius: 0 0 50% 50%;
				background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
			}

			.cylinder i::before {
				content: '';
				position: absolute;
				width: 100%;
				z-index: 2;
				height: 24px;
				background-color: #5697e8;
				top: -12px;
				border-radius: 50%;
			}