/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/


/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/



/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}


/* Navigation grid */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 6px solid #1b3644;
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}

.divider {
  padding: 0 1rem;
}

.title-area{
  border-top: 6px solid #1b3644;
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}

body {
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background-color: #fff;
  color: #1b3644;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

a:link {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}

/* Page structure */
.wrapper {
  min-height: max-content;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  max-width: calc(1000px - (20px * 2));
  margin-right: auto;
  margin-left: auto;
}



/* Text styles*/

.title{
  margin-top:30px;
  text-align: left; 
  font-size: 20px;
  font-weight: 300;
  letter-spacing: .75px;
  padding-bottom: 30px;
  
}

/* Notebook grid */
.project_grid {
    display: grid;
    grid-template-columns: 1fr;
    border-left: 1px solid #1b3644;
    border-top: 1px solid #1b3644;
    text-align: left;
    word-wrap: break-word;
}

.project_grid div{
  border-bottom: 1px solid #1b3644;
  border-right: 1px solid #1b3644;
  padding: 1rem;
  padding-bottom: .75rem;}

.project_label {
  font-family: monospace;
  font-size: 14px;
  line-height: 18px;
  font-weight: bold;
  min-width: 175px;
  max-width:175px;
}

.nav {
  font-family: monospace;
  font-size: 14px;
  line-height: 18px;
  font-weight: bold;
  min-width: 175px;

}

.headline {
  font-family: monospace;
  font-size: 14px;
  line-height: 18px;
  font-weight: bold;
  min-width: 175px;

}

td {
  vertical-align: top;
}

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

#scrollBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: blue;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#scrollBtn:hover {
  background-color: grey;
}

/* Small screens: stack each table's label/value cells instead of side-by-side,
   and shrink outer padding so long words/paragraphs have room to wrap */
@media (max-width: 600px) {
  .wrapper {
    padding-left: 12px;
    padding-right: 12px;
  }

  .project_grid table,
  .project_grid tbody,
  .project_grid tr,
  .project_grid td {
    display: block;
    width: 100%;
  }

  .project_label,
  .nav,
  .headline {
    min-width: 0;
    max-width: none;
    margin-bottom: 0.35rem;
  }

  #scrollBtn {
    bottom: 12px;
    right: 12px;
    padding: 10px 12px;
    font-size: 15px;
  }
}