@charset "UTF-8";

html, body {
	margin: 0px; 
	padding: 0px; 
	text-align: center; 
} 

body {
    background-color: white; 
	
}


header {
  
	height: 50px;
	/* background-color: coral;*/
}

nav {
    /*background-color: blue;*/
        
}


nav ul {
    list-style-type: none;
    list-style-image: none;
    position: relative;
    
}

nav ul li ul{
    display: none;
    position: absolute; 
    right: 159px; 
    top: 20px; 
    z-index: 100000; 
    width: 150px; 
    padding: 0px; 
}

nav ul li:hover ul{
    display: block;
    
}

nav ul li ul a {
    display: block;
    background-color: white; 
    font-family: '212_baby_girl-webfont';
    border-color: black;
	color: coral;
    font-size: 28px;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
}

nav ul li ul li:last-child {
	border-bottom: 1px solid black;
}

nav ul li ul a:hover{ 
    background-color:#D3CC00;  
    color: black; 

}

main {
    
	background-color:white;
   
	
}

article {
    /*background-color: deeppink;*/
    width: 500px;
    position: absolute;
    top: 150px;
    left: 520px;
    font-family: '212_baby_girl-webfont';
    font-size: 1.1rem;
}

article p {
    text-align: justify;
}

footer{
    position: absolute;
    bottom: 0px;
    height: 65px;
    width: 100%;

}


.nav-main {
	width: 40px;
	height: 40px;
	margin: 10;  
}

.nav-hamburger {
    position: absolute;
    right: 100px;
    top: 20px;
}
    
.spider-pink{
    position:absolute;
    right: 200px;
    top: -90px;
        
}

.text-johnna-chism{
    position:absolute;
    left: 390px;
    top: 50px;
    transform: rotate(-10deg);    
    
}
        
.scribble-long{
    position: absolute;
    left: 275px;
    top: 100px;
    transform-scale: 80%
    
} 

.button-project3{
    position: absolute;
    left: 800px;
    top: 520px;
}

.button-project3:hover {
    transform: rotate(-15deg);

}

.button-project4{
    position: absolute;
    left: 1260px;
    top: 410px;
}

.button-project4:hover {
    transform: rotate(20deg);

}
        
.sand-line{
    position:absolute;
    left: 0px;
    right: 0px;
    bottom: 170px;
    
}

.spider-blue{
    position:absolute;
    left: 70px;
    top: 520px;
    
}

.shadow-blue-spider{
    position: absolute;
    left: 100px;
    top: 700px;  
}

.shadow-proj3{
    position: absolute;
    left: 800px;
    top: 720px;  
    
}

.shadow-proj4{
    position: absolute;
   left: 1250px;
    top: 685px;
}


.footer-text-left{
    position: absolute;
    left: 60px;
    bottom: 10px;
    
}

.footer-tmcc-logo{
    position:absolute;
   left: 850px;
    bottom: 5px;
  
}

.footer-email{
    position:absolute;
    left: 1300px;
    bottom: 5px;
  
}    

@font-face {
    font-family: '212_baby_girl-webfont';
    src: url('../images/212_baby_girl-webfont.woff2') format('woff2'),
         url('../images/212_baby_girl-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}