/* DEFAULT Layout ================================ */
/* 
  * - All elements in our html 

  border-Box: Make it so width and height is always the entered amount
  when factoring in padding and margin
*/
* {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

html, body {
  background: rgb(210,210,210);
  margin: 0px;
  padding: 0px;
  height: 100%;
}

h1,h2,h3,h4,h5,h6 {
  margin: 0px;
  padding: 0px;
  line-height: 1em;
}

p {
  margin-bottom: 0px;
  line-height: 1.4em;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

header, article, footer {
  width: 1200px;
}

header {
  display: flex;
  padding: 24px 0px;
  gap: 12px;
}

article {
  background: rgb(255,255,255);
  flex-grow: 2;
}

footer {
  padding: 16px;
}

/* POPUP COMPONENT ================================ */
.popup {
  display: none;
  background: rgba(0,0,0,0.6);
  width: 100%;
  height: 100%;
}

.popup.pop {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup .video_wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.popup .video {
  width: 800px;
  aspect-ratio: 16 / 9;
}
.popup .video iframe {
  width: 100%;
  height: 100;
  padding: 0px;
  margin: 0px;
  display: block;
}

.popup .close_button {
  display: flex;
  gap: 4px;
  align-items: center;
  cursor: pointer;
  align-self: flex-end;
  padding: 12px;
  border-radius: 4px;
  background: rgb(60,60,60);
  color: rgb(255,255,255);
}
.popup .close_button:hover {
  background: rgb(0,0,0);
}

.popup .close_button .icon.close {
  background-image: url(/assets/close.svg);
  background-repeat: no-repeat;
  background-size: contain;
  fill: rgb(255,255,255);
  width: 24px;
  height: 24px;
}




/* PROJECTS INDEX ================================= */
body[location='projects_index'] header section {
  flex-grow: 1;
}

body[location='projects_index'] header nav {
  display: flex;
  flex-direction: column;
  width: 300px;
  gap: 12px;
}

body[location='projects_index'] header nav a {
  cursor: pointer;
  background: rgb(120,120,120);
  color: rgb(0,0,0);
  text-decoration: none;
  padding: 12px;
  border-radius: 4px;
}
body[location='projects_index'] header nav a:hover {
  background: rgb(100,100,100);
}

body[location='projects_index'] .thumbnail {
  width: 400px;
  aspect-ratio: 16 / 9;
  background: rgb(255,0,0);
  display: flex;
  justify-content: center;
  align-items: center;
}
body[location='projects_index'] .thumbnail .icon.play {
  background-image: url(/assets/play.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 128px;
  height: 128px;
}


body[location='projects_index'] article nav {
  display: flex;
  flex-wrap: wrap;
  padding: 12px;
}

body[location='projects_index'] article nav p {
  margin: 0px;
}

body[location='projects_index'] article nav a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 33.3333%;
  padding: 12px;
  text-decoration: none;
  color: rgb(0,0,0);
  cursor: pointer;
}
body[location='projects_index']  article nav a img {
  width: 100%;
  aspect-ratio: 16 / 9;
}
body[location='projects_index']  article nav a .button {
  background: rgb(120,120,120);
  padding: 12px;
  border-radius: 8px;
  align-self: center;
}
body[location='projects_index']  article nav a:hover .button {
  background: rgb(100,100,100);
}

/* PROJECTS SHOW ================================= */
body[location='projects_show'] header {
  flex-direction: column;
}

body[location='projects_show'] header .breadcrumbs a {
  color: rgb(0,0,200);
  font-weight: 600;
}

body[location='projects_show'] section {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

body[location='projects_show'] .carousel  {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

body[location='projects_show'] .carousel .thumbnail {
  aspect-ratio: 16 / 9;
  background: rgb(255,0,0);
  display: flex;
  justify-content: center;
  align-items: center;
}

body[location='projects_show'] .carousel .bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

body[location='projects_show'] .carousel .small_thumbnail {
  width: 128px;
  background: rgb(255,0,100);
}

body[location='projects_show'] header nav {
  display: flex;
  flex-direction: column;
  width: 300px;
  gap: 12px;
}

body[location='projects_show'] header nav a {
  cursor: pointer;
  background: rgb(120,120,120);
  color: rgb(0,0,0);
  text-decoration: none;
  padding: 12px;
  border-radius: 4px;
}
body[location='projects_show'] header nav a:hover {
  background: rgb(100,100,100);
}

body[location='projects_show'] article {
  padding: 24px;
}

body[location='projects_show'] .markdown a {
  color: rgb(0,40,200);
  font-weight: 600;
}

body[location='projects_show'] .markdown h1,h2,h3 {
  margin-top: 24px;
}

body[location='projects_show'] .markdown li {
  line-height: 1.4em;
}