/*

[Style Stylesheet]

*/


/* ************** [ Basic HTML ] ************** */

html {
  font-size: 16px;
}

body {
  background-color: rgb(44, 44, 44);
  color: rgb(118, 118, 118);
}

img {
  max-width: 100%;
  height: auto;
}

header {
 /* margin-bottom: 3.5vh; */
}
 
nav {
  color: rgb(84, 84, 84);
}



/* ************** [ Grid ] ************** */

* {
  box-sizing: border-box;
}


#wrapper {
  max-width: 67.5rem; /* 1080px / 16px = 67.5em */
  display: grid;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.25rem; /* 20px / 16px = 1.25em */
  margin-left: auto;
  margin-right: auto;
}

.grid > * {
  max-width: 67.5rem; /* 1080px / 16px = 67.5em */
}

#unit-head {
  width: 100%;
  justify-self: stretch;
  padding: 0 0.9375em;
  border: 0px solid blue;
}

/* Side Navigation */
#unit-nav {
  /* width: 100%; */
  /* justify-self: stretch; */
  padding: 0 0.9375;
  border: 0px solid blue;
}

/* Writing */
#unit-content {
  width: 100%;
  justify-self: stretch;
  padding-top: 0;
  border: 0px solid blue;
}

/* Portfolio */
#unit-content-image {
  width: 100%;
  justify-self: stretch;
  border: 0px solid blue;
}

/* Large [Home} Navigation */
#unit-content-nav {
  width: 100%;
  justify-self: stretch;
  margin-top: 2.875rem; /* 46px / 16px = 2.875 */
  border: 0px solid blue;
}

#unit-foot {
  width: 100%;
  justify-self: stretch;
}



/* ************** [ Logos ] ************** */

#logo-container {
  width: 100%;
  height: 7.8125rem;
}

#logo {
  width: auto;
  height: 7.8125rem;
  float: left;
}



/* ************** [ Navigation ] ************** */

/* Mobile top menu icon: create x3 for icon */
.icon-menu {
  width: 2.1875rem; /* 35px/16px = 2.1875 */
  height: 0.1875rem; /* 3px/16px = 0.1875 */
  background-color: rgb(84, 84, 84);
  margin: 0.375rem; /* 6px/16px = 0.375em */
}

/* Mobile icon Conatiner */
.icon-container {
  width: 2.1875em; /* 35px/16px = 2.1875em */
  height: 2.1875em; /* 35px/16px = 2.1875em */
  float: right;
  padding-top: 15px; /* 0.9375em */
  padding-right: 53px; /* 3.5em */
}

/* Side Navigation */
#nav-container {
  width: auto;
  justify-self: stretch;
  padding-top: 46px;
}



/* ------  Mobile Curtain Menu Navigation ------ */

 /* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS in html) */    
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 20vw; /* 20% from the top */
  width: 100%; /* 100% width */
  text-align: left;
  margin-top: 0.9375em;
  padding-left: 0.9375em;
}

/* The navigation links inside the overlay */
.overlay a {
  text-decoration: none;
  color: rgb(84, 84, 84);
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: rgb(187, 187, 187);
}

/* Position the close button (top right corner) */
.overlay {
  position: absolute;
}

/* Close icon Container */
.icon-close-container {
  display: inline-block;
  box-sizing: border-box;
  font-size: 5rem; /* 80px / 16px = 5em */
  float: right;
  margin-top: -1.36rem;
  margin-right: 1.75rem;
} 



/* ************** [ Images ] ************** */

.slide,
.slide-square {
  max-width: 100%; /* 755px/16px= 47.1875em */
  padding-bottom: 8vh;
  border: 0px solid magenta;
}

.slide:first-child,
.slide-square:first-child {
  padding-top: 4vh;
}

.slide:last-child,
.slide-square:last-child {
  padding-bottom: 6vmin;
}

/* Slideshow container */
.slideshow-container {
  max-width: 100%; /* 755px/16px= 47.1875em */
}




/* ************** [ Tables ] ************** */

.table-container {
  margin-top: -3.2vmin; /* 12px */
  padding: 0 0.9375rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  border-top: 1px solid rgb(118, 118, 118);
  text-align: left;
  margin-bottom: 1.5rem;
}

table:first-child {
  margin-top: 1.125rem;
}

td, th {
  padding: 0.125rem 0;
}



/* ************** [ Footer ] ************** */

footer {
  width: 100%;
  color: rgb(76, 76, 76);
  margin-top: 4vh;
}

.footer {
  border-top: 1px solid rgb(76, 76, 76);
  padding-top: 0.375em; /* (sb) 6px/16px= 0.375em */
}




/*  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
When the width of the screen is more than 736 pixels, change to TABLET layout

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  */
@media (min-width: 46rem) { /* 736px / 16px = 46 */
    #wrapper {
    padding: 0 0.9375em; /* 15px/16px = 0.9375 em */
  }
  
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  #unit-head {
    grid-column: span 1;
    padding-left: 0;
  }

  /* Writing */
  #unit-content {
    grid-column: span 3;
    padding-left: 0;
  }
  
  /* Portfolio */
  #unit-content-image {
    grid-column: span 3;
    padding-left: 0;
  }

  /* Large [Home} Navigation */
  #unit-content-nav {
    grid-column: 2/ span 3;
    margin-top: 10.8125rem; /* 127px + 46px / 16px = 10.8125 */
    padding-left: 0;
  }
  
  aside {
    position: fixed;
  }

  footer {
    grid-column: span 4;
  }
  
  
  /* Mobile icon Conatiner */
  .icon-container {
    display: none;
  }
  
  .slide {
    padding-bottom: 8vmin;
  }
  
  .slide:first-child {
    padding-top: 6vw; /* 127px + 46px / 16px = 10.8125 */
  }
  
  .slide:last-child {
    padding-bottom: 3vmin;
  }

  .table-container {
    margin-top: -1.56vmin; /* 12px */
    padding: 0;
  }
}

/*  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
When the width of the screen is more than 1024 pixels, change to DESKTOP layout 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  */
@media (min-width: 64rem) { /* 1024px / 16px = 64 */
    #wrapper {
    padding: 0 0.9375em; /* 15px/16px = 0.9375 em */
  }
  
  .grid {
    grid-template-columns: 4fr 14fr;
  }
  
  .grid {
    grid-template-columns: repeat(18, 1fr);
  }
  
  #unit-head {
    grid-column: span 4;
    padding-left: 0;
  }

  /* Writing */
  #unit-content {
    grid-column: span 11;
    padding-left: 0;
  }
  
  /* Portfolio */
  #unit-content-image {
    grid-column: span 12;
    padding-left: 0;
  }

  /* Large [Home} Navigation */
  #unit-content-nav {
    grid-column: 5/ span 12;
    padding-left: 0;
  }
  
  aside {
    position: fixed;
    font-size: calc(14.4px + (18 - 14.4) * (100vw - 600px) / (900px - 600px));
  }

  header, footer {
    grid-column: span 18;
  }
  
  /* Mobile icon Conatiner */
  .icon-container {
    display: none;
  }
  
  .slide,
  .slide-square {
    padding-bottom: 8vmin;
  }
  
  .slide-square {
    max-width: 80%;
  }
  
  .slide-square:first-child {
    padding-top: 4vmin;
  }
  
  .slide:first-child {
    padding-top: 0; /* 127px + 46px / 16px = 10.8125 rem */
  }

  .slide:last-child,
  .slide-square:last-child {
    padding-bottom: 3vmin;
  }
  
  .slide-no-description {
    padding-top: 10.8125rem; /* 127px + 46px / 16px = 10.8125 rem */
    padding-bottom: 8vmin;
  }

  .table-container {
    margin-top: -0.75rem; /* 12px/16px= 0.75 */
  }
  
}