Template:Essay quote/style.css

@keyframes fadeIn {
   0% {opacity: 0;transform: translateY(15px);}
   100% {opacity: 1;transform: translateY(0px); }
} 

.essay-quote{
	/* container for whole quote thing */
	margin:35px;
	margin-bottom:0;
	animation: fadeIn 1s ease forwards; 
}

.essay-quote-mark{
	/* just the quotation mark that appears behind the quote */
	user-select:none;
	font-size:8rem;
	position:relative;
	z-index:1;
	color:#7f7f7f;
	opacity:0.5;
	font-family: Serif;
	font-weight:bold;
	line-height:0; /* cancel line-height because it affects the quote due to sheer size of quotation marks*/
}

.essay-quote .essay-quote-text{
	position:relative;
	font-size:1.8rem;
	left:-15px;
	top:-50px;
	z-index:2;
	line-height:2.8rem;
	text-align:left!important;
}

h1,h2{
	overflow:hidden; /* if the quote overlaps a title, the border at the bottom will be cut off. More aesthetic */
}

/* selectable alignment with {{{align}}} parameter */
.essay-quote-left{
	float:left;
	clear:both;
	max-width:35%;
	margin-left:0;
	margin-right:50px;
}

.essay-quote-right{
	float:right;
	clear:both;
	max-width:35%;
	margin-right:0;
	margin-left:50px;
}

.essay-quote-center{
    text-align: center;
    margin:0 auto;
    max-width:60%;
    padding-top:50px;
}

/* MOBILE POSITIONING */

@media screen and (max-width:768px){
	.essay-quote-text{
		font-size:1.5rem;
	}
	.essay-quote-left, .essay-quote-right{
		text-align: center;
    	margin: 0 auto;
    	max-width:90%;
    	padding-top:50px; /*undoes the relative positioning which moves only the content, not the frame with it*/
    	float:none;
	}
	.essay-quote-center{
		max-width:90%;
		padding-top:50px;
	}
}