@charset "utf-8";

/* -FONTS-
font-family: 'Archivo Black', sans-serif;
font-family: 'Fredoka One', cursive;
font-family: 'Fruktur', cursive;
font-family: 'Noto Sans', sans-serif;
font-family: 'Rubik Beastly', cursive;
font-family: 'Zen Kaku Gothic Antique', sans-serif;
*/

html,body {
  height: 100%;
}
/*
.color-grey{
color:#9D9E9C;
}
.color-violet {
color:#9F8DFC;}
*/
body {
	display: flex;
	flex-direction: column;
	background-color: #141414;
	color:#ffffff;
	min-height: 100%;
  	margin: 0;
  	padding: 0;
}

header {
	width:100%;
}

.content {
  flex: 1 0 auto;
  padding: 2% 8%;
}

section {
}

article {
}

.logo {
	vertical-align: middle;
}
.logo:hover {
	transform: scale(1.5);
}

.text-transform:hover {
	font-family: 'Rubik Beastly', cursive;
}

.text-transform-2:hover {
	font-family: 'Fruktur', cursive;
}

.intro {
	margin-top: 2%;
}
p{
	font-family: 'Zen Kaku Gothic Antique', sans-serif;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.7em;
}

h1{
	font-family: 'Archivo Black', sans-serif;
	font-size: 6.5em;
	font-weight: 900;
	line-height: 1.1em;
}

h2{
	font-family: 'Fredoka One', cursive;
	font-weight: 400;
	font-size: 2.2em;
	line-height: 1.2em;
}

h3{
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 1.8em;
	font-weight: 600;
	line-height: 1.2em;
}

h4{
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1.2em;
}
a {
	color:#9F8DFC;
}
a:hover {
	font-family: 'Rubik Beastly', cursive;
}

.titular {
	text-align:center;
	margin: auto;
}

footer {
	width:100%;
	font-family: 'Noto Sans KR', sans-serif;
	text-align:center;
	font-weight: 900;
}


.sticky-footer{
	flex-shrink: 0;
}

footer p {
	font-size:1em;
}

footer a {
	text-decoration:underline;
	font-weight: 900;
}

footer a:hover {
	color:#9F8DFC;
	font-weight: 900;
}




@media screen and (max-width: 991px) {
/* start of large tablet styles */

	
h1{
	font-size: 6.5em;
	font-weight: 900;
	line-height: 1.1em;
}
	
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */
	


header {
	width:100%;
	height:auto;
}

.container {
	width:90%;
}

h1{
	font-size:2.8em;
	line-height: 1.1em
}

h2{
	font-size: 2.5em;
}
	
h3{
	font-size: 2em;
	font-weight: 300;
	line-height: 1em;
}

h4{
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1em;
}


footer {
	width:100%;
	height:auto;
}


}

@media screen and (max-width: 479px) {
/* start of phone styles */


header {
	width:100%;
	height:auto;
}

.container {
	width:90%;
}

h1{
	font-size:2.4em;
	line-height: 1.1em;
}

h2{
	font-size: 1.8em;
}
	
	h3{
	font-size: 2em;
	font-weight: 300;
	line-height: 1em;
}

h4{
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1em;
}


footer {
	width:100%;
	height:auto;
}

}