/**
* /css/layouts-holvec.css
* horizontal left, vertical center
**/
/*----------
  SKELETON
----------*/
header {
  margin-top: 25vh;
  width: 30%;
  max-width: 300px;
  float: left;
}
main {
  float: right;
  width: 50%;
  margin-top: 1em;
  margin-right: 1em;
  padding-right: 1em;
  height: 100%;
}

/*-----------------
  ELEMENTS/HEADER
-----------------*/
/* PROFILE */
#profile {
  float: right;
  margin-bottom: -2em;
  border-radius: 50%;
  border: solid 2px #666;
}
/* CONTACT */
#contact {
  clear: right;
}
#contact a {
  margin-left: 0.25em;
}
#contact a {
  margin-right: 0.25em;
}
/* TITLES */
header h1 {
  clear: both;
  margin: 0;
  font-weight: 500;
  font-variant: small-caps;
}
#subtitle {
  border-left: solid 3px #666;
  margin-left: 0.25em;
  padding-left: 0.5em;

  font-weight: 400;
  font-size: 12pt;
}
/* NAV */
nav {
  max-width: 350px;
  font-size: 13pt;
}
nav a {
  margin-left: 0.5em;
}
nav a:not(:last-child) {
  margin-right: 0.5em;
}

/*---------------
  ELEMENTS/MAIN
---------------*/
#about .content {
  margin-top: 5vh;
}
#namecard-toggle:checked ~ #namecard + main {
  width: 90%;
  height: calc(100% - 2em);
  transition: 0.5s;
}

/*---------------
  MEDIA-QUERIES  sizes = larger -> smaller*
---------------*/
@media screen and (max-width: 1900px), (max-height: 700px) not (max-width: 1900px) {
  footer { /* stop footer cut-off */
    clear: both;
    position: relative;
    bottom: 0;
  }
}
@media screen and (max-width: 1740px) {
  main { /* keep main from squishing */
    width: 60%;
    margin-right: 0;
  }
}
@media screen and (max-width: 939px) {
  header { /* adjust headers horizontal align  */
    margin-top: 22vh;
  }
  #profile { /* stop profiles overlapping headers */
    float: unset;
    margin-bottom: 0;
  }
}
@media screen and (max-height: 500px) {
  header { /* keep header horizontal align */
    margin-top: 0;
  }
}
@media screen and (max-height: 500px) and (max-width: 730px), screen and (max-width: 750px) {
  /* change header to a top menu */
  header {
    margin-top: 0;
    float: unset;
    width: 100%;
    max-width: unset;
    margin-bottom: 1em;
  }
  #profile {
    height: 75px;
    width: 75px;
    float: left;
    margin-right: 1em;
  }
  #contact {
    float: right;
  }
  header h1 {
    clear: unset;
    display: inline-block;
  }
  #subtitle {
    margin-top: 5px;
    display: inline-block;
  }
  nav {
    text-align: right;
    max-width: unset;
  }
  
  main {
    text-align: left;
    width: 100%;
    height: calc(75% - 1em) ;
    margin-bottom: 1em;
    float: unset;
  }
  #about .content {
    margin-top: 0;
  }
  
  #print {
    display: unset;
    margin-left: unset;
    margin-bottom: 1em;
  }
  
  /* move footer back to bottom-right */
  footer {
    position: absolute;
  }
}

@media screen and (max-width: 500px) {
  #profile { /* hide profile image to make space */
    display: none;
  }
}

@media screen and (max-width: 480px), (max-width: 250px) {
  #contact {
    float: unset;
    display: block;
    text-align: center;
  }
  header h1 {
    display: block;
    text-align: center;
  }
  #subtitle { /* hide subtitle to make space */
    display: none;
  }
  nav {
    text-align: center;
  }

  main {
    overflow-y: scroll;
  }
}