@charset "UTF-8";



body {
background-color: cornsilk;
margin: 50px;

}

@media only screen and (max-width: 480px) {
body {
background-color: snow;
margin: 5px;
font-size: 25px;
    }
}
    
    
h1 {
color: #7b7db0;
font-size: 80px;
text-align: center;
font-kerning: auto;
font-family: 'Lobster', cursive;
font-weight: 100;
}

@media only screen and (max-width: 480px) {
h1 {
color: #7b7db0;
font-size: 50px;
text-align: center;
font-kerning: auto;
font-family: 'Lobster', cursive;
font-weight: 100;
}
}

    
h2 {
color: #EDFEED;
font-size: 30px;
font-kerning: auto;
font-family: Sommet;
text-align: center;
}

@media only screen and (max-width: 480px){
h2 {
color: #EDFEED;
font-size: 20px;
font-kerning: auto;
font-family: Sommet;
text-align: center;
}
}

 a.h2.link {
color:#EDFEED;
text-decoration: none;
}

 a.h2.hover {
background-color: #406b6a;
color:lightpink;
}

 a:link {
color:#EDFEED;
text-decoration: none;
}



a.email:link {
color:#007bb5;
text-decoration: none;
}

a.climate:link{
color: peachpuff;
text-decoration:none;
font-style:bolder;
}

a.climate:hover{
color:peachpuff;
background-color: #406b6a;
}

a.climate:visited{
color:aliceblue;
background-color: #406b6a;
}
a.email:hover{
color:white;
text-decoration: none;
}


a:hover {
background-color: #406b6a;
color:lightpink;
}

 a:active {
background-color: #406b6a;
color:lightpink;
}

h3 {
color: lightblue;
font-size: 22px;
font-kerning: auto;
font-family: Sommet;
display: inline;
line-height: 40px;
}

h4 {
color: #EDFEED;
font-size: 22px;
font-kerning: auto;
font-family: Sommet;
display: inline;
line-height: 70px;
}

@media only screen and (max-width: 480px){
h4 {
color: #EDFEED;
font-size: 22px;
font-kerning: auto;
font-family: Sommet;
display: inline;
line-height: 35px;
}
}

@media only screen and (max-width: 480px){
h3 {
color: skyblue;
font-size: 16px;
font-kerning: auto;
font-family: Sommet;
display: inline;
line-height: 20px;
}

}


.contentbox {
text-align: left;
width: 1100px;
height: auto;
background-color: #7b7db0;
padding-top: 2em;
padding-left: 1.75em;
padding-right:1.75em;
margin-top: 5px;
font-size: 20px;
line-height: 30px;
font-family: Gadugi;
display:block;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color: white;

}

@media only screen and (max-width: 480px){
.contentbox {
text-align: left;
width: auto;
height: auto;
background-color: #7b7db0;
padding-top: 1.75em;
padding-left:1.75em;
padding-right:1.75em;
margin-top: 5px;
display:block;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color: white;
font-size: 20px;
line-height: 30px;
font-family: Gadugi;
}
}
.contact{
width:fit-content;
padding: 1em;
height:auto;
background-color:peachpuff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-left:auto;
margin-right:auto;
}

#projects {
height: 450px;
background-color: #7bb0ae;
}
@media only screen and (max-width: 480px)  {
#projects {
height: 250px;
flex-wrap:wrap;
justify-content: center;
display: flex;
background-color: #4990a5;
}
}
#index {
height: 500px;
background-color: #7b7db0;
padding-left: 2em;
}

#indexresume {
height: 500px;
background-color: #7b7db0;
padding-left: 2em;
}

@media only screen and (max-width: 480px){
#indexresume {
height: 250px;
width:230px;
background-color: #7b7db0;
padding-left: 2em;
}
}

#achievements {
height:auto;
}

@media only screen and (max-width: 480px){
#indexcontact {
height: 500px;
background-color: #7b7db0;
padding-left: 2em;
}
}

@media only screen and (max-width: 480px){
#achievements {
height:440px;
margin:0;
}
}

@media only screen and (max-width: 480px){
#index {
height: 700px;
width:250px;
background-color: #7b7db0;
padding-left: 2em;
}
}

.form {
height: 1050px;
background-color: #7b7db0;
width: 1020px;
padding:1.75em;
margin-left:auto;
margin-right:auto;
display:block;
border-radius: 10px;
}
@media only screen and (max-width: 480px){
.form {
height: 950px;
background-color: #7b7db0;
width: 230px;
padding:1.75em;
border-radius: 10px;
text-align:left;
align-items: flex-start;
}
}


#professionalwork {
height: 800px;
}


@media only screen and (max-width: 480px){
    
#professionalwork {
height: 660px;
}
    
}
#professionalwork-img {
width: 195px;
height: 250px; 
object-position: center;
float:left;
object-fit:cover;
align-items: center;
margin:25px;
text-align: center;
}

@media only screen and (max-width: 480px) {
#professionalwork-img {
width: 90px;
height: 105px; 
object-position: center;
float:left;
object-fit:cover;
align-items: center;
margin:3px;
text-align: center;
}
}



#HTML{
width: 300px;
height: 165px; 
object-position: center;
float:left;
align-items: center;
margin:25px;
text-align: center;
    

}

@media only screen and (max-width: 480px) {
#HTML{
width: 125px;
height: 100px; 
object-position:left;
float:left;
margin:2px;
align-items: center;
text-align: center;

}
}

#contentbox1 {
width:500px;
height:350px;
float:left;
display: inline-block;
text-align: center;
align-items: center;
margin:10px;
}

@media only screen and (max-width: 480px){
#contentbox1 {
width:300px;
height:250px;
float:left;
display: inline-block;
text-align: center;
align-items: center;
margin:10px;
}
}
    
#contentbox2 {
width:200px;
height:300px;
float:left;
display: inline-block;
align-items: center;
margin:10px;
}

   

p {
color: white;
font-size: 20px;
line-height: 30px;

}


.flexbox {
display:flex;
flex-wrap:nowrap;
justify-content: right;
font-size: 40px;
}





ul {
  list-style-type: none;
  margin-left: 20px;
  padding: 0;
margin-right: 30px;
  overflow: hidden;
  background-color: #7bb0ae;
border-top-left-radius:10px;
border-top-right-radius:10px;
display: block;
font-family: Sommet;
font-size: 20px;
font-weight:300;
}

    
    
li {
  float: left;
font-family: Sommet;
font-weight:500;
font-size: 25px;
}

li a {
  display: block;
  color: #EDFEED;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
color: #EDFEED;
font-family: Sommet;
font-size: 25px;
}

li a:hover:not(.active) {
background-color: #7b7db0;
}

li a.active {
  background-color: #525485;
  color: #EDFEED;

}

@media only screen and (max-width: 480px) {
 li {
font-family: Sommet;
font-weight:300;
font-size: 20px;
text-align: center;
color: #85647e;
padding: 0;
float:none;
text-decoration: none;
    }
    
    ul {
  list-style-type: none;
margin-left:auto;
margin-right: auto;
width: auto;
text-align: center;
  background-color: #4990a5;
  margin: 10px;
  padding: 0;
display:grid;
    
}
}

.fa-linkedin {
  background-color: #007bb5;
  color: white;
text-align: center;
width: 30px;
height: 21px;;
display: inline;
padding-top:3px;
border-radius:5px;
}

.fa:hover {
opacity: 0.7;
}

.contentbox-img {
margin-left: auto;
margin-right: auto;
width: 300px;
height: 150px;
display: block;
object-fit: contain;
    
}



#contentbox-projects2 {
width: 250px;
height: 200px; 
object-position: center;
float:left;
align-items: center;
margin:25px;
text-align: center;
}

@media only screen and (max-width: 480px){
#contentbox-projects2 {
width: 110px;
height: 85px; 
object-position: left;
float:left;
align-items: left;
margin:5px;
text-align: center;
}
}
    
    
    
.contentbox-projects1 {
width: 225px;
height: 300px; 
object-position: center;
float:left;
align-items: center;
margin:25px;
text-align: center;
}

@media only screen and (max-width: 480px){
    .contentbox-projects1 {
width:70px;
height:100px;
float:left;
align-items: center;
margin:3px;
text-align: center;
}
}

 #PDTA {
width: 170px;
height: 230px;
object-position: center;
float:left;
align-items: center;
margin:25px;
text-align: center;


}

@media only screen and (max-width: 480px){
    
 #PDTA {
width: 75px;
height: 95px;
object-position: center;
float:left;
align-items: center;
margin:5px;
text-align: center;


}
}


div.desc {
padding: 5px;
margin-top: 0;
display:flex;
font-size: 16px;
text-align: left;
}

@media only screen and (max-width: 480px){
div.desc {
padding: 0px;
margin-top: 0px;
font-size: 8px;
line-height: 11px;
text-align: left;
}
}

}
 
.resume {
height: 425px;
width: 950px;
display:block;
margin-left:auto;
margin-right:auto;
object-fit: cover;
}

@media only screen and (max-width: 480px){
.resume {
height: 190px;
width: 235px;
display:block;
float:left;
object-fit: fill;
}
}

.row {
display:flex;

}

.column {
float:left;
width:60%;
padding: 7px;
}

@media only screen and (max-width: 480px){
.column {
float:left;
padding: 6px;
flex-flow: wrap;
display: flex;
margin:5px;
}
}

 .column-projects {
float:left;
width:25%;
padding-right: 0em;
padding-left: 0em;
}


.about-img{
width:200px;
height:330px;
margin:15px;
margin-bottom: 0;
object-fit: cover;
padding-top: 0.75em;
padding-bottom: 0.5em;
}

@media only screen and (max-width: 480px){
.about-img{
width:250px;
height:330px;
margin:15px;
margin-bottom: 0;
object-fit: cover;
padding-top: 0.75em;
padding-bottom: 0.5em;

}
    
}


#profile-img {
width: 500px;
height: 400px;
border-radus: 50%;
object-fit: cover;
display:block;
margin-left: auto;
margin-right: auto;
}
@media only screen and (max-width: 480px) {
    #profile-img{
width: 250px;
height: 200px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
object-fit: cover;
display:block;
margin-left: auto;
margin-right: auto;

}
}
form {
background-color: peachpuff;
width: 70%;
height:auto;
margin-left: auto;
margin-right:auto;
display:block;
padding-top: 1em;
padding-bottom: 1em;
border-radius:10px;
font-family: Gadugi;
font-size: 16px;
    
}

@media only screen and (max-width: 480px){
form {
background-color: peachpuff;
width: 115%;
height:auto;
padding-top: 1em;
padding-bottom: 1em;
border-radius:10px;
font-family: Gadugi;
font-size: 11px; 
float:left;

}
}
textarea {
display: block;
margin-left: auto;
margin-right: auto;
font-family: Gadugi;
width:75%;
height:45%;

}

#labelname{
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
    
}


input {
text-align: center;
color: black;
display:block;
margin-left: auto;
margin-right:auto;
}



input[type=text] {
margin-left: auto;
margin-right: auto;
display: block;
width:40%;
border-width: 1x;
border-color:rebeccapurple;
}

input[type=email] {
margin-left: auto;
margin-right: auto;
display: block;
width:50%;
border-width: 1x;
border-color:rebeccapurple;

}

input[type=submit] {
margin-left: auto;
margin-right: auto;
display: block;
color: white;
background-color: rebeccapurple;
font-size: 16px;

}
select {
width:40%;
display: block;
margin-left: auto;
margin-right: auto;
border-width: 1px;
outline-color: rebeccapurple;
margin-top: 13px;

}

input[type=checkbox] {
float:left;
display:inline-block;
width: 5%;
margin-left:190px;
}

input[type=radio]{
float:left;
display:inline-block;
width: 5%;
margin-left:220px;
}

@media only screen and (max-width: 480px){
input[type=radio]{
float:none;
width: 5%;
margin-left:30px;
}

}
@media only screen and (max-width: 480px){
input[type=checkbox] {
float:none;
width: 5%;
margin-left:10px;
padding:1em;
}
}

video {
height: 500px;
width: 600px;
margin-left:160px;
margin-right:30px;
}

@media only screen and (max-width: 480px) {
video {
height: 250px;
width: 300px;
float:left;
margin-left:10px;
}
}