html {
	width: 100%;
	height: 100%;	
	overflow: auto;
}

body {
	width: 100%;
	height: 100%;
}

.main {
	width: 100%;
	height: 100%;
}


@media screen 
  and (max-width: 767px) {

.main-nav {
    display: block;
    font-family: 'Outfit', sans-serif;
    background-color: #FFFFFF;
    width: 90%;
    margin: auto;
    padding-left: 0;
    position: fixed;

    left: 0;
    right: 0;
z-index: 4;
  top: 0px; /* Hide the navbar 50 px outside of the top view */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}


.main-nav li:first-child {
/*  margin-right: auto;*/

  font-size: 1.2em;
  font-weight: 500;
  font-size: 1.5em;
  letter-spacing: .09em;
  width: 100%;
  margin-top: 5%;
  margin-bottom: 3%;
}

.main-nav li {
    list-style: none;
    margin-bottom: 5%;
}

.main-nav li:not(:first-child) {
    display: inline-block;
/*    margin-right: 5%;*/
    font-size: 100%;
    vertical-align: top; 
    width: 20%;
}


.main-nav li:nth-child(3)  {
word-wrap: break-word;
/*margin-left:7%;*/

}

.main-nav li:last-child {
    margin-left: 6%;
}



#name {
	font-size: 2em;
	display: block;
	margin: auto;
	text-align: center;
}

.portfolio {
padding-top: 20%;
width: 60%;
margin: auto;
display: block;
font-family: 'Roboto', sans-serif;
}

img {
	max-width: 50%;
	margin: auto;
display: block;
}

footer {
	padding-bottom: 5%;
	margin-top: 10%;
	font-family: 'Playfair Display', serif;
}

.uxcolumn {
	width: 90%;
	display: block;
	justify-content: space-evenly; 
	text-overflow: hidden;
	margin-top: 10%;
	margin-left, margin-right: auto;
	padding: 0
}

.projectname {
	display: block;
	text-align: left;
	width: 75%;
	margin: auto;
	padding-bottom: 5%;
}



}

@media screen 
  and (min-width: 768px) {

.main-nav {
  display: -webkit-flex;
  display: flex;
font-family: 'Outfit', sans-serif;
/*  font-family: 'Playfair Display', serif;*/
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
padding-top: 0;
margin-top: 0;
z-index: 4;

}

.main-nav li:first-child {
  margin-right: auto;
  font-size: 1.2em;
  font-weight: 500;
  font-size: 1.5em;
  letter-spacing: .09em;
}

.main-nav li {
    list-style: none;
}

.main-nav a {
  margin: 10px;
  color: #000000;
  display: block;
  padding: 15px;
  text-decoration: none;
}

.main-nav li:not(:first-child) a:hover {
        text-decoration-line: underline;
    text-decoration-style: wavy;
}



#name {
	font-size: 2em;
}

.portfolio {
padding-top: 10%;
width: 50%;
margin: auto;
display: block;
font-family: 'Roboto', sans-serif;
}

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

footer {
	padding-bottom: 5%;
	margin-top: 10%;
	font-family: 'Playfair Display', serif;
}

.uxcolumn {
	width: 40%;
	display: inline-block;
	justify-content: space-evenly; 
	text-overflow: hidden;
	margin: 3%;
	padding: 0
}

.projectname {
	margin-bottom: 10%;
}

.persona {
	width: 80%;
	margin: auto;
}

}