body {
font-family: Helvetica;
}

#container{
	display:flex;
}

#divider {
width: 100%;
  height: 200px;
  margin-bottom: 10px;
}

#portfoliopic
{
  height: 100%;
  object-fit: fill;
}

#picture {
height:100%;
max-width:300px;
border-radius: 50%;
float:left;

}

#text {
height:auto;
width:100%;
text-align:center;
vertical-align:middle;
margin: 60px 0px;
}

#main {
  width:50%;
  height:80%;
  color: black;
  background-color: white;
  margin: 135px auto;
  padding:60px 40px;/*top, right, bottom, left*/
  border-radius: 25px;
 }
 
 #navbar {
	height:auto;
	text-align:left;
 }
 
 #mainbackground {
	 background: linear-gradient(to bottom, #cc33ff, #0033cc);
 }
 #iframebackground {
	 background: white;
 }
 
.nav {
	background: linear-gradient(to bottom, #0033cc, #cc33ff);
    border-radius: 12px;
    color: white;
	font-size:20px;
	width:15%;
	border: 2px solid white;
}

.navportfolio {
	background: linear-gradient(to bottom, #0033cc, #cc33ff);
    border-radius: 12px;
    color: white;
	font-size:20px;
	width:46.2%;
	border: 2px solid white;
}

.portfolio {
	background: linear-gradient(to bottom, #0033cc, #cc33ff);
    border-radius: 12px;
    color: white;
	font-size:18px;
	width:20%;
	border: 2px solid white;
}

.code {
	background: linear-gradient(to bottom, #0033cc, #cc33ff);
    border-radius: 12px;
    color: white;
	font-size:15px;
	width:35%;
	border: 2px solid white;
	margin:2% 0 5% 0;
}
 
 .responsive {
  width: 100%;
  height: auto;
}

td {
	text-align:center;
}

h1 {
	font-size: 70px;
	margin-bottom:10px;
}

h2, h3 {
	margin:0 0 10px 0;
}
li {
	margin:0;
	list-style-type: none;
}

p{
	margin:0;
}

@media only screen and (max-width: 1300px) {
  h1 {
    font-size: 50px;
  }
  h2 {
	font-size: 25px;
}
  .nav, .navportfolio, .portfolio {
	width:100%;
}
#picture {
	max-width:100%;
}
  iframe {
	width:100%;
	height:100%;
}
}