/* 

Responsive
Design
Formula:

target ÷ context = result




The target is what you are trying to convert.
The context is the parent container it's in.
The result is your decimal, then move two to make a percentage.




For example, the right side is a width of 1350.
The parent div to the right side is the container, which is 1600.

If we want to make that right side fluid and responsive, we have to put it into the formula like this:

target (1350) ÷ context (1600) = 0.84375

take this 0.84375 and move the decimal twice to get your percentage = 84.375%


You should also convert margins from pixels to percentages.
As you can see in the example below, the margin has the same context (or parent container div) as the rightside. 

target (400) ÷ context (1600) = 0.25
which converts to 25%



You can test out how this layout works in pixels by commenting out the percentages in the right side in the css below... 
and try making it responsive again by commenting out the pixel values in the rightside below and turning on the percentages.


A key thing about responsive design to keep in mind:

Not every column has to be fluid. If you want to keep the left side in pixels you can do that.

It's up to you if your whole layout is fluid, or just parts of it.

*/

/* instead of just adding a width on your container, to make it responsive you will need to change this to a max-width instead */


body {		
	margin: 0px;		
	z-index: 0;		
	padding: 0px;		
	background-color: white;	
    font-family: "Inter", sans-serif;	
	font-size: 16px;	
}

#container {
	max-width: 1920px;	
    width: 100%;
	margin: 0px auto;
}

#nav_bar {
    float:left;
    width:100%;
    height:60px;
    background-color: white;
    position:fixed;
    padding-left: 0px;
    z-index: 2;
}

#nav_bar li {
    float:left;
    width: 10%;
/*    margin:0px auto;*/
    list-style-type: none;
    display: inline;  
    margin-left:-3px;
}

#josie{
    float:left;
    width:200px;
    font-size:12px;
    margin-top:7.25px;
    color: plum;
}

#logo{
    float:left;
    width: 90px;
    position:relative;
    margin-top: 0px;
    margin-right:100%;  
}

#logo:hover{
    opacity:0.5;  
}



/* START ABOUT DROPDOWN */


#about_drop {
    float:right;
    margin-right:1.5%;
    margin-top:.3%;
}

#overlay-menu {
  width: 100px;
  
}

.menuButton {
  color:black;
  font-size: 18px;
  background-color: transparent;
  border: none !important;
  text-align: center;
  text-decoration: none;
  display: inline-block; 
  outline: none;
}

.menuButton:hover {
  color:plum;
  outline: none;
}
.menuButton:active {
  position: relative;
  outline: none;
}

.overlay-close {
  float:right;
  margin-right:2.9%;
  margin-top:1.4%;
  background-color: transparent;
  color:black;
  font-size: 18px;
  border: none !important;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  outline: none;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  z-index: 20;
}

#headshot {
/*    width: 45.5%;*/
    width: 20%;
    float:left;
    position: relative;
    margin-top:21.5%;
    margin-left: 29%;
}

.overlay nav {
  text-align: left;
  position: relative;
  margin-left: 51.5%;
  margin-right:12%;
  top: 37%;
  height: 55%;
  font-size: 17px;
}

.about_text1{
  margin-bottom:5%;  
}

.about_text2{ 
  margin-bottom:5%; 
}

.about_text3{
    margin-bottom: 0%;
}

.greyText {
    color:darkgray;
}

.overlay-data {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .5s;
  transition: opacity 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-open {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

/* END ABOUT DROPDOWN */



a {
   text-decoration: none;   
}


a:link{
    text-decoration: none;
    color: black !important;
}

a:visited{
    text-decoration: none;
    color: black;
    }

img {
	width: 100%;
}



/* START IMAGE GRID */

.main {
  max-width: 1920px;
  width: 100%;
}

.row{
    padding:20% 1.5% 1.5% 1.5%
}


/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 47%;
  padding: 1.5%;
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}


.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.content {
  position: relative;
  width: 100%;
  position: relative;
  text-align: center;
  color: white;
}

.content:hover .image {
  opacity: 0.4;
}

.content:hover .middle {
  opacity: 1;
}

.text {
   color:black;
   width: 100%;
   font-size: 18px;
    font-weight:400;
   font-family: "Inter", sans-serif;
 
}

/* END IMAGE GRID */


/* END OF HOME PAGE */






/* PROJECT PAGE */


#leftside {
	float:left;
	width: 400px;
	position: fixed;
	margin-left: 40px;
/*	
	 if you want to have this left side a fixed position keep in mind that it will then require padding or margin on the left of the right side, as it will no longer take up the "physical space" on the page that a float left column would and would overlap, similar to how the position absolute worked with the animations that you built. 		
*/
		
}

h3 {
    float:left;
    width: 100%;
    font-size: 11px;
    margin: 174% 0% 1% 0%;
    margin-left:0px;
/*    margin: 600px 0px 0px 0px;*/
/*    font-family: sans-serif, "inter";*/
    color:plum;
    font-weight: 400;
    font-variant-caps: normal;
}

h5 {
    float:left;
    width: 100%;
    font-size: 11px;
    margin: 169% 0% 1% 0%;
/*    margin: 600px 0px 0px 0px;*/
/*    font-family: sans-serif, "inter";*/
    color:plum;
    font-weight: 400;
    font-variant-caps: normal;
}

h4 {
    float:left;
    width: 100%;
    margin-top:0px;
    margin-bottom:0px;
    font-size: 17px;
/*    font-family: sans-serif, "inter";*/
    color:black;
    font-weight:400;
}


#rightside {
	float: left;
    width: 70%;
	background-color: white;
	
	/* make sure when you add margin or padding it doesn't break your layout, or you subtract it from the total width of the div if need be */
    
    margin-left: 26%;
    margin-top: 8%;  
	
}

#cover{
    float:left;
    width: 100%;
    padding-bottom: 1%;
    padding-left: 15px;
    padding-right:15px;    
}

h1{
    float:left;
    width:100%;
    margin-bottom:10px;
    text-align: center;
    margin-top: 5%;;
    font-weight: 100;
    letter-spacing: .5px;
    font-size: 14px;
}

.info {
    float:left;
    width: 100%;
    font-size: 20px;
    font-weight:10;
    padding-top: 0px;
    padding-left: 15px;
    padding-right:15px;
    margin-bottom:6%;
/*    font-family: sans-serif, "inter";*/
    line-height: 30px;
/*    word-spacing: .2em;*/
}

.info2 {
    float:left;
    width: 100%;
    font-size: 20px;
    font-weight:10;
    padding-top: 0px;
    padding-left: 15px;
    padding-right:15px;
    margin-bottom:0%;
/*    font-family: sans-serif, "inter";*/
    line-height: 30px;
}

h6 {
    float:left;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight:10;
    padding-top: 0px;
    padding-left: 15px;
    padding-right:15px;
    margin-bottom:6%;
/*    font-family: sans-serif, "inter";*/
    line-height: 30px;
}

p.lighter {
    font-weight: 100;
}

.projects{
    float:left;
    width: 100%;
    object-fit: contain;
    padding-bottom: 2.5%;
    padding-left: 15px;
    padding-right:15px;
}

.fit{
/*
     float:left;
    width: 100%;
*/
    object-fit: cover;
/*
    padding-bottom: 4%;
    padding-left: 15px;
    padding-right:15px;
*/
    
}

#animation{
    width: 150px;
    height:73px;
    background: url(images/fansprite.png) left center;
    background-size: cover;
    animation: play 1.5s steps(18) infinite;
    display: inline-block;
    margin-left:45%;
    margin-bottom: 20%;
    margin-top: 17%;
    transform: scale(2)
}

@keyframes play{
    100% {background-position: -3750px;}
}

/*
#checker{
    width: 180px;
    height:80px;
    background: url(images/checkerboard.png) left center;
    background-size: cover;
    animation: play 1.5s steps(2) infinite;
    display: inline-block;
    margin-left:12%;
    margin-bottom: 20%;
    margin-top: 15%;
}

@keyframes checker {
    100% {background-position: -625px;}
}
*/


#arrows {
    float: left;
    width: 100%;
    margin-left:1.5%;
    margin-top:20px;
}

#arrows a:hover {
    opacity:0.5;
}

#left_arrow, #right_arrow {
    float: left;
    width: 5%;
    text-align: left;
}

#right_arrow {
    text-align: right;
    margin-left: 90%
}


#footer {
    float:right;
    width: 97%;
    margin-left: 0%;
    margin-top: 6%;
    margin-bottom: 2.5%;
    float:left;
/*    font-family: sans-serif, "inter";*/
    font-size: 18px;
}


#footer li{
    padding-left: 10%;
    list-style: none;
    display:inline;
    display: inline-block;
    float:right; 
}

#footer a:hover {
  border-bottom: 2px solid plum;
}

#footer a.active {
  border-bottom: 2px solid plum ;
}










/* 

Adding media queries:


this is how you add media queries to adjust or switch the layout to the next size down, each maximum width size is a "breakpoint" in your design. 

Keep in mind each media query has it's own set of curly brackets that needs to encompass ALL of the css rules that go with that particular screen size.
You can set up several screen sizes to adjust the layout several times as needed.
This particular design probably only needs two adjustments in the CSS to work properly since the design is quite simple with 2 columns, and has fluid images that expand and contract based on the browser size.

*/
 

@media screen and (max-width: 1000px) {
    
      #josie {
        display:none;
    }  
}


/* stacking columns for mobile */

@media screen and (max-width: 800px) {
	    
    
#container {
	max-width: 800px;	
    width: 100%;
	margin: 0px auto;	
}
    

#leftside {	
	/*instead of a side column that has a width of 400px, the left side will now be a full width column that will be above the rightside, which will stack below it instead of being beside it. Since you don't want it to remain a fixed position, you'll have to change it to a position relative to scroll past it to the work, as well as a float left */
	
	float: left;
	width: 60%;
    margin-left: 0%;
    margin-right: 3%;
    margin-bottom: 20px;
    position: relative!important;

	/*if the left side stayed with a fixed position the user would not be able to scroll to the section beneath it, it would cover up a large part of the page, so we switch this to a position relative so that we can scroll past it now */	
}
    
 #rightside {  
     margin-left: 0%;
     margin-top: 0%;
     width: 93.5%; 
    }
    
h3{
    margin-top: 100%;       
    }
    
.projects{
    float:left;
    width: 100%;
    padding-top: 0px;
    padding-left: 15px;
    padding-bottom:10px;
    }
    
.column {
    width: 100%;
    padding:10px 10px 10px 10px;
    }
    
.row{
    padding:100px 25px 20px 6px;
    }
    
.overlay nav {
    width:90%;
    margin-left: 5%;
     top: 20%;
    } 
    
.about_text1{
    width:90%;
    margin-top:0px;
    margin-bottom:40px;  
    }
.about_text2{
    width:90%;
    margin-top:0px;
    }
    
#footer {
    width: 97%;	
    margin-top:10%;    
    }
       
#footer li{
    padding: 5%;
    }
    
#footer a{
    font-size:14px;
    }
        
#about_drop{
    margin-right:-6px;
    }
    
.overlay-close{
    margin-right:0px;
    margin-top:18px;
    }
    
#logo {
    margin-left:-40px;
    }
    
#left_arrow {
    width: 12%;
    margin-left: 4%;
    margin-top:5%;
    }
    
#right_arrow {
    width: 12%;
    margin-left: 72%;
    margin-top:5%;
    }
    
h1{
    width:107%;
    float:left;
    margin-bottom:5px;
    text-align: center;
    margin-top: 8%;
    font-size: 16px;
    }
    
.info {
  	width: 100%;
    font-size:18px;
    line-height: 24px;
    margin-bottom:20px;
    }
    
    
p {
  margin-top: 2em ;
  margin-bottom: 2em ;
}
    
#headshot {

   display:none;
}

}





@media screen and (max-width: 400px) {
    #animation{
     width: 150px;
    height:73px;
    margin-left: 32%;
    display:inline-block;
    transform: scale(1);
    }
}