html {
	height: 100vh;
	width: 100vw;
	background: linear-gradient(45deg, gold 2%, purple);
	overflow: hidden;
	margin: 0px;
	animation: gradient 35s linear infinite;
	background-size: 180% 180%;
}

body {
	display: flex;
	color: white;
	margin: 0px;
}


.artical {
	width: min(calc(100vw - 4em), 55em);
	margin: auto;
	margin-top: 2em;
	height: 25em;
	overflow: hidden;
	transition-duration: 1.5s;
}

.artical:hover {
	width: calc(100% - 8em);
	height: calc(100vh - 6em);
	overflow: scroll;
}

.artical h1 {
	margin: auto auto 0px auto;
}

.artical hr {
	background: white;
	border-color: white;
	border-radius: 3em;
	height: 0.3em;
}

.artical:hover .preview {
	display: none;
}

.content {
	display: none;
}

.artical:hover .content {
	display: block;
}

.glass {
	background: rgba(128, 128, 128, 0.35);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	border-radius: 3em;
	padding: 1em 2em;
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}