/*

		Colors

		teal #41D9CA
		dark blue #1E1940
		bright purple #8736D9
		wine purple #660273
		light pink #F2B3E1
		light putple D7A3F0

		*/


		* {
			margin: 0pt;
			padding: 0px;
		}
		h1, h2, li, ul {
			font-family: "Alfa Slab One", serif;
			font-weight: 400;
			font-style: normal;
		}
		nav {
            height: 60px;
            width: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background-color: #1E1940;
        }
        #miami, #summerJam, #babecave {
			margin-top: 10px;
			margin-bottom: 10px;
		    }
        .work p, .about p {
        	margin-left: 40px;
        	margin-right: 40px;
        	color: #41D9CA;
        	font-family: "Manrope", sans-serif;
  			font-optical-sizing: auto;
  			font-weight: <weight>;
  			font-style: normal;
        }

		#logo {
			display: none;
			float: none;
		}

		ul {
			height:123px;
			width: 100%;
			float: none;
		}

		a {
			color: #41D9CA;
			text-decoration: none;
		}

		li:hover {
			background-color: #F2B3E1;
			color: #8736D9;
		}

		li {
			list-style-type: none;
		    float: none;
		    line-height: 60px; 
		    background-color: #1E1940;
		}
		li p {
			text-align: center;
			padding-top: 5px;
			padding-bottom: 5px;
		}

		#home {
			margin-top: 200px;
			width: 100%;
		}

		#work {
			width: 100%;
			background-color: #1E1940;
		}
		.work h2 {
			color: #41D9CA;
		}

		.about {
			width: 100%;
			background-color: #F2B3E1;
		}
		.about h1 {
			color: #1E1940;
			font-size: 5em;
		}
		.about p {
			color: #660273;
		}

		.contact {
			width: 100%;
			background-color: #41D9CA;
		}
		.contact h1 {
			font-size: 3em;
			color: #8736D9;
		}


/* desktop screen */
	@media only screen and (min-width: 768px){
		nav {
			height: 60px;
		     width: 100%;
		     background-color: #1E1940;
		    }
		#logo {
			display: block;
			float: left;
			padding-top: 5px;
			padding-bottom: 5px;
			}
		ul {
			height: 30px;
			width: 400px;
			float: left;
		}

		a {
			color: #41D9CA;
			text-decoration: none;
		}

		li:hover {
			background-color: #660273;
			color: #e7befa;
		}

		li {
			height: 60px;
			width: 120px;
			list-style-type: none;
		    float: left;
		    background-color: #1E1940;
		    line-height: 60px; 
		    font-family: "Alfa Slab One", serif;
			font-weight: 400;
			font-style: normal;
		}
		li p {
			text-align: center;
			padding-top: 5px;
			padding-bottom: 5px;
		}

		#home {
			margin-top: 0px;
			width: 100%;
		}
		.left  {
			float:left;
		    height: 100%;
		    width: 40%;
		}
		 .right  {
		 	float:left;
			height: 100%;
		   	width: 40%;
		}

		#work {
			width: 100%;
			background-color: #1E1940;
		}
		#work p {
			padding-bottom:20px;
		}
		.work h2 {
			color: #41D9CA;
			font-size: 4em;
		}

		#miami, #summerJam, #babecave {
			margin-top: 10px;
			margin-bottom: 10px;
		    }

		.contact {
			width: 100%;
			background-color: #41D9CA;
		}
		.contact h1 {
			font-size: 3em;
			color: #8736D9;
		}

		.about {
			width: 100%;
			background-color: #F2B3E1;
		}
		.about h1 {
			color: #1E1940;
			font-size: 5em;
		}
		.about p {
			color: #660273;
			font-size: 20pt;
		}