<-- * {
  margin: 0;
  padding: 0;
  padding-left: .2em;
  box-sizing: border-box;
}

@font-face {
    font-family: Grot;
    src: url(sporting_grotesque-regular.ttf)
}

/* Mobile Styles */
@media only screen and (max-width: 450px) {
	h1, h2, h3, h4 {
	font-family: Grot; 
	color: white; background-color: transparent;}

	h1, h2, h3 {padding-top: 1em;}

h1 {font-size: 2.5em; line-height: 1.2em; padding-left: .2em;}
h2 {font-size: 1.4em; line-height: 1.3em; padding-left: .4em;}
h4 {font-size: .85em; padding-left: .8em;}
h3 {font-size: 1em; line-height: 1.2em; padding-left: .4em; letter-spacing: .15em;}

body, p {background-color: transparent;	color: blue;
	font-family: Grot;
	font-size: 1em; padding-top: 1em; line-height: 1.5em; padding-right: .5em; padding-bottom: 1em;
}
    
    body {
        background-color: blue;
        
    }
    
      div {background: white;
    color: blue;
    width: 80vw; 
    padding: 15px; 
    margin-left: 10px;
    margin-right: 5px;
    font-family: Grot;
    border: 3px dotted blue;
}
    
     page {
        border: 0px; 
         margin: 0px;
        
    }


/*
  span { 
	color: white;
}
*/

}


/* Tablet Styles */
@media only screen and (min-width: 451px) and (max-width: 1024px) {
	
	h1, h2, h3, h4 {
	font-family: Grot; 
	color: white; background-color: transparent;}

	h2, h3 {padding-top: 1em;}

h1 {font-size: 4em; line-height: 1.2em; padding-top: .8em; padding-bottom: .15em; padding-left: .5em;}
h2 {font-size: 2.2em; line-height: 1.2em; padding-left: 1em; padding-bottom: 1em;}
h3 {padding-left: 2em;}
h4 {font-size: .85em; padding-left: 2.5em; padding-right: 2.5em;}

body, p {background-color: transparent;	color: blue;
	font-family: Grot;
	font-size: 1em; padding-top: 1em; line-height: 1.5em; padding-right: .5em; padding-bottom: 1em;
}

p {padding-left: 1.5em; padding-top: .5em;}

 body {
    background-color: blue; 
  }

        div {background: white;
    color: blue;
    width: 80vw; 
    padding: 10px; 
    margin-left: 32px;
    margin-right: 20px;
    font-family: Grot;
    border: 3px dotted blue;
}
    
    
/*
  span { 
	color: white;
}
*/

}


/* Desktop Styles */
@media only screen and (min-width: 1025px) {
h1 {
	font-family: Grot;  letter-spacing: .01em;
	font-size: 6em; color: white; background-color: transparent; padding-left: 1.8em; padding-right: 1em; padding-top: .25em; padding-bottom: .3em; line-height: 1.1em;  
}
    
    
h2 { font-family: Grot;
font-size: 1.3em; color: white; background-color: transparent; padding-left: 8.5em; padding-right: 14em; padding-top: 2em; padding-bottom: 3em; line-height: 1.4em;
}

h3 {.4
	font-family: Grot;
	font-size: .9em; color: white; background-color: transparent; padding-left: 12.5em; padding-right: 2em; padding-top: 2em; padding-bottom: 1em; letter-spacing: 2px;
}


h4 {
	font-family: Grot; font-weight: bolder; 
	font-size: .7em; color: white; background-color: transparent; padding-left: 15.7em; padding-right: 2em; padding-top: 2em; padding-bottom: 4em;
}

body {
	background-color: blue;	
	font-family: Grot;
	font-size: 1.2em; line-height: 1.4em;
}
    
    div {background: white;
    color: blue;
    width: 50vw; 
    padding: 100px; 
    margin-left: 200px;
    margin-right: 220px;
    font-family: Grot;
    border: 3px dotted blue;
}

/*
p {
	font-family: 'Nanum Gothic', sans-serif; padding-left: 19em; padding-right: 30em; padding-bottom: 1em; font-size: .9em; color: white; line-height: 1.7em;
}
*/

/*
span { 
	color: white;
}
*/

}


box {
    
}

img {
    position: absolute;
    margin-left: -10px;
    margin-top: -400px;
    z-index: -1;
    opacity: 0.5;
}