@charset "utf-8";
/* CSS Document */


/* --- html body --- */
html, body {
    height: 100%; /* Full height for both html and body */
    width:100%; /* Full width */
    margin: 0; /* Remove default margin */
    font-size: 100%; /* Set now, adjust for compatability */
}
 
/* --- Resume --- */
.resume {
  display: flex;
  min-height: 100vh;
}

/* --- sidebar --- */
.sidebar {
  flex: 1;
  padding: 20px;
  max-width: 18.5em; 
 /* max-width: 300px; for size reference */ 
}

#name {
  font-size:xx-large; /* So everyone knows my name */
  text-align:center; 
}

#pfp {
max-width: 90%;    
display: block;
margin:0 auto;
}

.certs h1,h2,h3,h4  {
  margin-top: 3%;
  margin-bottom: 1%;
}

.certs h4 {
  margin-bottom: 3%;
}

/* --- main content --- */
.main-content {
  flex: 2;
  padding: 20px;
  min-width: 0; 
}

.main-content h1 {
  margin-top: .5em;
  margin-bottom: .5em;
}

.previous_exp h3,h4,p {
margin-top: 0%;
margin-bottom: 0%;
}
.education h3,h4,p {
margin-top: 0%;
margin-bottom: 0%;
}

.showcase h3,h4,p {
margin-top: 0%;
margin-bottom: 0%;
}

/* --- Tablet/Phone Compatability --- */



@media only screen and (max-width: 800px) {
  body {
    height: 100%; /* Full height for both html and body */
    width:100%; /* Full width */
    margin: 0; /* Remove default margin */
    overflow-wrap: break-word; /* Scrolling horizontally sucks on a phone*/
  }
.sidebar {
  padding: 1.0em; 
  max-width: 15.5em; 
  font-size: 70%; /* Fit better on a smaller screen */
}
.main-content{
  font-size: small;
}
}

@media only screen and (max-width: 900px) {
  body {
    height: 100%; /* Full height for body */
    width:100%; /* Full width */
    margin: 0; /* Remove default margin */
    overflow-wrap: break-word; /* Scrolling horizontally sucks on a phone*/
  }
.sidebar {
  padding: 1.0em;
  max-width: 17.5em; 
  font-size: 70%; /* Fit better on a smaller screen */
}
.main-content{
  font-size: small; /* Fit better on a smaller screen */
}
}