@charset "utf-8";

@font-face{
	font-family: 'buttongothic';
	src:url("../fonts/bradley-gratis.ttf")
}

@font-face{
	font-family: 'maingothic';
	src:url("../fonts/PERRYGOT.TTF")
}

@font-face{
	font-family: 'secondaryparagraph';
	src:url("../fonts/MyriadPro-Light.otf")
}

html, body{
        margin: 0px;
        padding: 0px;
        text-align: center;
		background-color: #363433;
		color: white;
		/*border: dotted green 6px;*/
}

/*HEADER*/
nav, ul{
	display: flex;
	justify-content: flex-end;
}

nav{
	/*border: 2px dotted red;*/
	margin-top: 30px;
	padding: 0% 5%;
}

/*ul{
	display:inline;	
}*/

li{
	/*display:inline; */
	background: #000005;
	border-radius: 35px;
	/*width of buttons*/
	padding: 15px 50px;
	margin: 15px;
	font-family: 'buttongothic', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: 38px;
	list-style-type: none;
}

li:hover {
  background-color: #380F30; /* Purple button */
  color: white;
}

a{
	color: white;
	text-decoration: none;
}
/*END OF HEADER*/


/*BODY*/
.mtggs-added-container /* MTGG's Note ~ This styles the new contyainer that wraps around your content and cat image */ {
    display: flex; /* MTGG's Note ~ The magic of Flexbox ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ )! We're going to use it to align all the items in this container horizontally. To do that we need to throw a display of flex in the container to kick things off.*/
    justify-content: space-around; /* MTGG's Note ~ This property equally spaces the objects within the width of the container. */
    align-items: center; /* MTGG's Note ~ This property vertically aligns the items in the container. */
}

#ugly-cat-img{
	border: solid white 4px;
	border-radius: 60%;
	width: 500px;
  	height: 500px; /* MTGG's Note ~ I made these equal so he's not all weirdly stretched out. */
	/* position: relative;
	left: 29vw;
	top: -70vh; */ /* MTGG's Note ~ I removed these since flexbox made these no longer necessary here. */
	padding-bottom: 0px;
} 

#main-headline-container{
	/*border: pink 2px dotted;*/
	width: 50%;
	/* margin-left: 5vw; */ /* MTGG's Note ~ I removed these since flexbox made this no longer necessary. */
}

h1{
	font-family: 'maingothic', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: 10vh;
	/*border: 2px solid green;*/
}

h2{
	font-family: 'maingothic', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	/*border: 4px dashed yellow;*/
	text-align: left;
	margin-left: 13.5vw;
	width: 80%;
	font-size: 3vh;
}

p{
	font-family: 'secondaryparagraph', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	/*border: 2px dashed powderblue;*/
	text-align: left;
	margin-left: 13.3vw;
	width: 70%;
}
/*END OF BODY*/


/*FOOTER*/
#tmcc-logo{
	height: 20vh;
}

/*footer{
	border: dashed 4px purple;
}*/


/*END OF FOOTER*/

/* BEGIN MEDIA QUERIES */

/* MTGG's Note ~ You had the right idea with your media queries but they're backwards. If you're staring from a computer layout down, it's always better to use max-widths. Here's a couple of sample media queries for study. */

/*
@media only screen and (max-width: 1200px){
    
    
   body{
        background-color: red;
    } 
    
    .mtggs-added-container {
        flex-direction: column;
    }
    
    #ugly-cat-img{
        margin: 40px 0px;
    }
    
}

@media only screen and (max-width: 900px){
    
    nav, ul{
        justify-content: center;
    }
    
    li {
        margin: 5px;
        font-size: 30px;
    }

    body{
            background-color: yellow;
        } 
	

}*/

/* END MEDIA QUERIES */

@media only screen and (max-width: 768px){
	nav, ul{
	justify-content: center;
}
	
	nav{
	border: 2px dotted red;
	padding-left: 2px;
}

	
	li{
	border-radius: 35px;
	width of buttons
	padding: 15px 80px;
	font-size: 35px;
	padding: 20px 100px;
	margin: 10px;
	margin-left: 18px;
}

a{
	border: 2px solid white;
	padding-left: 10%;
}
	
#main-headline-container {
	width: 100%;
    margin-left: 2vw;
	margin-top: 50%;
}
	
h2 {
    margin-left: 0vw;
    width: 100%;
}
	
p {
    margin-left: 3vw;
    width: 90%;
	font-size: 30px;
}
	
#ugly-cat-img {
    position: relative;
    left: 0vw;
    top: -145vh;
    padding-bottom: 0px;
}
	
}


@media only screen and (max-width: 430px){
	html, body {
		/*for some reason have to increase width of container, 100% does not actually take up 100% width...*/
    	width: 120%;
	}	
	
	#ugly-cat-img {
    	position: relative;
    	top: -137vh;
		width: 700px;
    	height: 830px;
	}
	
	#main-headline-container {
    margin-top: 60%;
	}
	
	h1{
	font-size: 8vh;
	text-align: right;
	margin-right: 12vw;
	}
	
	h2 {
    margin-left: 17vw;
    width: 80%;
	text-align: right;
}
	
}