Template:Curso rapido/styles.css

/*
*Basa ariba:https://design.wikimedia.org/style-guide/index.html
* [[Category:Template subpagina CSS]]
*/
.border-shadow-container{
	box-shadow:0 1px 1px rgba(0,0,0, 0.15);
	border: 1px solid #eaecf0;
	border-radius:2px;
	margin-bottom:1em;
	padding:1em;
}
.border-shadow img{
	box-shadow:0 1px 1px rgba(0,0,0, 0.15);
	border: 1px solid #eaecf0;
}

.full-width{
	display:flex;
	justify-content:center;
}

.third-width{
	width:30%;
}
.half-width{
	width:45%;
}
.info-section{
	width:90%;
	display:flex;
	flex-direction:column;
	align-items:center;
	margin:1em 0 1em 0;
}
.info p{
	margin:0;
}

h2{
	font-family:sans-serif;
	border:none;
}
.rules-section{
	display:flex;
	flex-direction:column;
	margin:1em 0 1em 0;
	color:#333;
}
.rule-top{
	display:flex;
	flex-direction:row;
	justify-content:center;
	flex-wrap:wrap;
}
.rule-bottom{

	display:flex;
	flex-direction:row;
	justify-content:center;
	flex-wrap:wrap;
}
.rule{
	display:flex;
	flex-direction:column;
	align-items:center;
	width:40%;
	margin-bottom:1em;
}
.rule img{
	padding:0.5em;
}
/**Visual edit section**/
.visual-edit-section{
	display:flex;
	flex-direction:column;
	align-items:center;
}
.visual-edit{
	width:90%;
}
#responsive img{
	width:100%;
	max-width:600px;
	height:auto;
}

/**Design section**/
.design-section{
	display:flex;
	flex-direction:column;
	align-items:center;
	width:100%;
}
.design-row-1{
	display:flex;
	justify-content:center;
	width:90%;
	gap:1em;
}
.design-row-2{
	display:flex;
	justify-content:center;
	gap:1em;
}
.design-row-3{
	width:90%;
}
@media (max-width: 360px){
	#min-width{
		width:1em;
	}
}
@media (max-width: 720px){
	.rule{
		width:100%;
	}
}
@media (max-width:900px){
	.design-row-1{
		flex-direction:column;
		align-items:center;
		gap:0;
	}
	.design-row-2{
		flex-direction:column;
		align-items:center;
		gap:0;
	}
	.third-width{
		width:95%;
	}
	.half-width{
		width:95%;
	}	
}
@media (min-width: 720px){
	#margin-right{
		margin-right:1em;
	}
	#margin-left{
		margin-left:1em;
	}
}
@media (max-width: 720px){
	.visual-edit{
		width:100%;
	}
	.info-section{
		width:100%;
	}
	.design-row-1{
		width:100%;
	}
	.design-row-3{
		width:100%;
	}
}