* {
    font-family: 'Roboto', 'futura-pt', sans-serif;
    font-weight: 100;
	margin: 0;
	padding: 0;
    box-sizing: border-box;
}

#container{
    position: fixed;
    z-index:-100000;
}

#circle-small {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
  animation-timing-function: cubic-bezier(.6, 0, .4, 1);
  animation-delay: 0s;
  position: absolute;
  top: 0vh;
  left: 10vw;
    background: #f05e50;
    width: 300px;
    height: 300px;
    border-radius: 50%;
}

#circle-medium {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
  animation-timing-function: cubic-bezier(.6, 0, .4, 1);
  animation-delay: 0.3s;
  position: absolute;
  top: 60vh;
  left: -10vw;
    background: #b57bb5;
    width: 400px;
    height: 400px;
    border-radius: 50%;
}

#circle-large {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
  animation-timing-function: cubic-bezier(.6, 0, .4, 1);
  animation-delay: 0.6s;
  position: absolute;
  top: -40vh;
  left: 60vw;
    background: #cdde64;
    width: 700px;
    height: 700px;
    border-radius: 50%;
}

@-webkit-keyframes circle-small-scale {
    0% {
        -webkit-transform: scale(1.0);
    }
    100% {
        -webkit-transform: scale(1.1);
    }
}

@keyframes circle-small-scale {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.1);
    }
}

#mclogo, #logohover {
    position: fixed;
    right: 0px;
    bottom: 0px;
    width:50px;
    z-index: 99;
    margin: 20px;
}

.navbar a, .navbar button {
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
    font-weight:300;
}

.navbar a:hover, .navbar button:hover {
    cursor: pointer;
}

.nav-toggle {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
    z-index: 10000000000;
}

span.icon-bar {
	position: absolute;
	right: 30px;
    top: 12px;
	display: block;
	width: 26px;
	height: 2px;
	background-color: #383938;
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.icon-bar:nth-child(1) {
  top: 17px;
}

.icon-bar:nth-child(2) {
  top: 24px;
}

.icon-bar:nth-child(3) {
  top: 31px;
}

/* ICON BARS ANIMATION */

.nav-toggle.active .icon-bar:nth-child(1) {
	top: 24px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
    background-color:#cdde64;
}

.nav-toggle.active .icon-bar:nth-child(2) {
	width: 0;
}

.nav-toggle.active .icon-bar:nth-child(3) {
	top: 24px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
    z-index: 50000000;
        background-color:#cdde64;

}

/* SMALL SCREEN NAV */
@media screen and (max-width:767px){
	.nav-overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color:#f05e50;
        opacity: 0;
        visibility: hidden;
        -webkit-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
}

    .nav-overlay.active {
        opacity: 0;
        visibility: hidden;
    }
    
    .navbar {
        text-align: center; 
        position:fixed;
        display:flex;
        flex-direction: column;
		width: 100vw;
        overflow:hidden;
        height: 0;
        z-index: 10000000000;
		padding-top: 50px;
        text-align: center;
	}
    
	.navbar.active {
		height: 100vh;
        width: 100vw;
        padding-bottom: 50px;
        background-color:#383938;
        justify-content: center;
	}

    .subnav-content {
        display:flex;
        flex-direction: column;
    }
    
    .subnav button {
        font-size: 1em;
    }
    
    .nav-overlay {
        z-index:100000000;
        height: 100vh;
    }

    .navbar a{
        font-size:1.4em;
        color:white;
        text-decoration: none;
        padding: 15px;
        background-color: inherit;
        z-index:10000001;
    }
    
    .navbar a:hover {
        color: #f05e50;
    }
    
	.nav-overlay a {
        -webkit-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
	}
    
	.nav-toggle {
		display: block;
        width:100%;
	}
    
    .subnavbtn {
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
    }
    
    .subnav-content a {
        color:#cdde64;
    }
} 
/*END OF SMALL SCREEN NAV*/

body {
	background-color: #fff;
    color:#383938;
}

header {
    height:100vh;
    display: flex;
    flex-direction: column;
    justify-content:center;
}

.homepage {
    display:flex;
    flex-direction: column;
    background-color:#383938;
    color:#cdde64;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    padding:4em;
    margin-top:2em;
}

.homepage img {
    max-width:500px;
    
}

.homepage button, .email {
    border-radius: none;
    border:none;
    display:block;
    padding:1em;
    margin:1em auto;
    background-color:#cdde64;
    color:#383938;
    font-weight: 500;
    font-size:15pt;  
}

.homepage button:hover, .email:hover {
    cursor:pointer;
    color:#fff;
    background-color: #f05e50;
}

.homepage a, a {
    text-decoration: none;
}

h1 {
    font-size: 2em;
}

h1, h2 {
    text-align: center;
    font-weight: 100;
}

h2 {
    font-weight: 500;
}

#title {
    padding: 50px;
    margin-top: 30px;
}

.about {
    width:100%;
    max-width:1000px;
    margin:0 auto;
    margin-bottom:100px;
    padding:20px 15px; 
    background-color:#fff;
    color:#383938;
}

.project {
    background-color:rgba(56,57,56,0.8);
    color:#fff;
    padding:2em;
    margin: 0 auto;
}

.description {
    display:flex;
    flex-direction: column;
/*    width:60vw;*/
    text-align: center;
/*    align-items: center;*/
    justify-content: center;
    margin: 0 auto;
}

.description h2 {
    font-size: 3em;
    padding:1em;
}

.description p {
    font-size:1.3em;
    font-weight: 300;
}

.description button {
    padding:.5em;
    width:100%;
    margin:1em auto;
    color:#383938;
    font-size:1.4em;
    font-weight: 500;
    background-color:#fff;
    border:none;
}

.description button:hover {
    cursor:pointer;
    background-color:#f05e50;
    color:#fff;
}

.project img {
    max-width:1000px;
}

#aboutme img {
    object-fit: cover;
    max-height:50vh;
    width:auto;
}

#aboutme p {
    font-size: 1.3em;
}

form input[type="submit"] {
    border: none;
    background-color:#fff; 
    color:#383938; 
    font-weight: 400; 
    padding:1em 4em;
    margin:0;
}

form input[type="submit"]:hover {
    background-color:#f05e50;
    color:#fff;
    cursor:pointer;
}

@media screen and (max-width:767px){
/*
    .homepage {
        padding: 30px;
        background-color:rgba(255,255,255,0.6);
    }
*/
}

#title img {
    width:300px;
    -webkit-animation: circle-small-scale 6s ease-in-out infinite alternate;
    animation: circle-small-scale 4s ease-in-out infinite alternate;
  animation-timing-function: cubic-bezier(.6, 0, .4, 1);
  animation-delay: 0.3s;
}

img {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: block;
}

footer {
    text-align: center;
    padding:10px;
    background-color:rgba(255,255,255,0.8);
}

#icons {
    margin: 40px auto;
    width:90%;
    max-width:400px;
    display: flex;
    justify-content: space-around;
}
#hover {
    display: none;
    cursor:pointer;
}
#icons a:hover #hover, .navbar a:hover #hover, #mclogo a:hover #hover {
    display:block;
}
#icons a:hover #display, .navbar a:hover #display, #mclogo a:hover #display {
    display: none;
}
#icons img {
    width:40px;
}


#aboutme {
    padding:1em;
}

#aboutme img {
    width:100%;
    margin-top:2em;
 
}

form {
    background-color:#383938;
    color:#fff;
    display: flex;
    flex-direction: column;
    padding:2em;
    margin-left:auto;
    margin-top:2em;
    font-size:1.3em;
    justify-content: center;
    align-items: center;
}

label {
    margin-bottom:.5em;
    margin-right:auto;
}

textarea, input
{
    margin-bottom:1em;
    max-width:500px;
    min-width:100%;
    min-height:3em;
    padding:1em;
}



/*END OF MOBILE / GLOBAL DESIGN*/



/*DESKTOP*/
@media screen and (min-width:768px){
    
    .navigation {
        position: fixed;
        width: 100%;
        display: flex;
        z-index: 100;
    }

    .navbar {
        display: flex;
        margin: 20px 25px 0 auto;
    }  
    .navbar a {
            font-size:1.2em;
            color:#f05e50; 
            padding: 16px;
            text-decoration: none;
        }
    .navbar a:hover {
        color: #383938;

    }

/* Subnav button */
    .subnavbtn {
/*        margin:0;*/
        width:183px;
        font-size: 1em;
        border: none;
        outline: none;
        padding: 14px 16px;
        background-color: #f05e50;
    }

    .subnavbtn:hover {
        background-color:#383938;
    }

    .subnavbtn a {
        color:#fff;
    }

    .subnavbtn a:hover {
    color:#fff;
}

    .subnav-content {
        margin: 0;
        display: none;
        position: absolute;
        width:auto;
        text-align: center;
        z-index: 1;
        background-color: #383938;
    }

    .subnav-content a {
        color:#fff;
        text-decoration: none;
    }

    .subnav-content a:hover {
        background-color: #f05e50;
        color:#fff;
    }
    
/* When you move the mouse over the subnav container, open the subnav content */
    .subnav:hover .subnav-content {
        display: flex;
        flex-direction: column;
        margin-top: 2px;
    }
    .nav-overlay.active {
		visibility: visible;
		opacity: 1;
	}
    #mclogo, #logohover {
        width: 60px;
        margin: 20px;
    }
 
    
    
    .project {
            display:flex;
        margin-top:2em;

    }
    
    .project img {
        margin-right:0;
    width:60vw;
    }
    
    
    .homepage {
        margin-top:10em;
        flex-direction: row;
        justify-content: center;
        height:80vh;
        

    }
    
    .homepage img {
        margin:0px 0px 0px 4em;

    }
    
    .homepage h1 {
        font-size: 4em;
    }
    
    #aboutme section {
        display: block;
        margin: 0 auto;
        padding: 2em;
    }
    
    #aboutme {
        padding:2em;
        display: flex;
        align-items: center;
    }
    
    #aboutme img {
        max-width:300px;
    }
    
    #aboutme p {
        width:60vw;
        max-width:500px;
        margin: 0 auto;
        text-align: center;
    }
    
    
    #contact {
        display:flex;
        width:90vw;
        max-width:1200px;
        margin: 0 auto;
        align-items: center;
    }

    form {
        width:600px;
        margin-left:5em;

    }
    
    
    }
    
    

/*END DESKTOP*/