portfolio.css

:root{

font-size: 16px;

}
html,body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
header{
 display: block;  
 height: 10vmax;
  background-color:#FFAC33;
}
header p{
    margin:0;
    text-align: left;
    font-size: 2rem;
    font-family: 'Jua', sans-serif;
    padding-top:2vh;
}
.container{
   width:100%;
   background-color:#7FDBFF;
   display:flex;
   flex-direction: column;
}

.row{
   margin-left: 10vh;
   margin-right:10vh;
   padding-top:4vh;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

}
.imageDiv1{
   margin-top: 10vh; 
}

.imageDiv1 .myImage{
   display:block;
   width:  10vw;
   margin-right: 20px;  
   border:5px solid #FFAC33;
   border-radius: 15px;
}
 .contentDiv1{
     width:75vw;    
     box-sizing: border-box;
}
.headfont{ 
     font-family: 'Jua', sans-serif;
     font-size:1.5rem;
}
.parafont{
  font-family: 'Rokkitt', serif;
  font-size: 1.2rem;
  line-height: 1.3;
}
.contentDiv1 p{
  
  width:100%;
  max-height:100%;
}
.contentDiv1 .second:first-letter{
     padding-left: 23%;
} 

.imageDiv2 .myImage2{
 border:5px solid #FFAC33;
  border-radius: 15px;
   width: 20vw;
   height:30vh;
  
} 
.contentDiv2{
    
     width:70vw;    
    
}

.procontent{
   margin-left: 10vh;
   margin-right:10vh;
   margin-top:4vh;
   width:75vw;    
   
  
}
  
.icons{
  margin:1vh;
}
.icons .icon{
width:35px;
margin-left:15px;
}

.foot{
    height:10vh;
    background-color: #26231e;
     width:100%;
}
@media only screen and (max-width: 1068px){
  .row{
    flex-direction: column;
  }
   .imageDiv1{
    align-self:flex-end;

   }
   
  .imageDiv2{
    order:-1;
    align-self:flex-end;

  }
  .imageDiv2 .myImage2{
    width:30vmax;

  }
  .contentDiv2{
    
     width:100%;    
  }
}
 @media only screen and  (max-width:767px) {
  .imageDiv1 .myImage{
    width:15vw;
   }
.headfont{
  font-size: 1rem;
 }
 .parafont{
  font-size: 1rem;
 }

 }

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

   header{
    height: 20vmax;
   }
   
}