/******************************************************************************
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
*/

/* Our default values set as CSS variables */
:root {
  --color-bg: #FFF;
  --color-text-main: #000000;
  --color-primary: #FFFF00;
  --wrapper-height: 87vh;
/*   --image-max-width: 300px; */
/*   --image-margin: 3rem; */
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

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

/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

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

body {
  font-family: HK Grotesk;
  background-color: var(--color-bg);
  display: flex;
/*   margin: 0; */
/*   flex-wrap: wrap; */
}

.double {
  display: flex;
  justify-content: space-around;
}

/* .double {
  
} */

/* Very light scaling for our illustration */
#logo {
  max-width: 100px;
/*   max-height: var(--image-max-width); */
/*   margin-top: var(--image-margin); */
}

.column, table {
/*   width: 80vw; */
  margin-left: 2.6vw;
}

/* table {} */

.line{
  width: 100%;
/*   height: 47px; */
  border-bottom: 1px solid black;
  opacity: 0.3;
}

h1, h2 {
  font-family: 'Linux Libertine','Georgia','Times', serif;
  font-weight: normal;
  text-transform: capitalize;
  margin-bottom: 0.2em;
}

h1 {
   font-size: 1.8em;
}

h2 {
  font-size: 1.5em;
}

.sub {
  font-size: 90%;
  margin-top: 0.5em;
/*   font-family: sans-serif; */
}

.content {
  font-size: 1em;
  margin-top: 0;
  max-width: 84vw;
/*   font-family: sans-serif; */
}

th {
  text-align: left;
}

.mark {
  text-align: center;
  background: #FAD6FC;
}


td video, #pictureofme {
  max-width: 200px;
}

#pictureofme {
  display: none;
  margin: 26px 45px;
}

ol, table {
/*     list-style-type: upper-roman; */
  border: 1px solid #A2A9B0;
  background: #F8F9FA;
  width: 300px;
}

ol {
  padding-left: 26px;
}

ol span {
  font-size: 86%;
}

li {
  text-decoration: none;
/*   color: #0645ad; */
  background: none;
  font-size: 90%;
}

li a {
  color: #0645ad;
  text-decoration: none;
}

li a:hover {
  color: #0645ad;
  text-decoration-line: underline;
}

.image_container {
  max-height: 300px;
  background: none;
}

.image_container {
  width: auto;
  margin-left: 0;
  margin-right: 16px;
/*   margin-bottom: 10px; */
}

.image_container img, video {
  max-height: 260px;
}

.chapter_container {
  display: inline-block;
  margin-bottom: 0.4vh;
}

.chapter_container .line {
  margin-bottom: 0.8em;
}

#about {
  background: #FDFFAA;
  border: 1px solid #A2A9B0;
  padding: 10px 10px 16px 10px;
  font-style: italic;
  font-size: 96%;
}

a, button {
  cursor: pointer;
}

#turnon {
  margin-left: 16px;
}

#main {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.buttonRedisign {
  background: #C4C4C4;
  border: 1px solid #000000;
  font-family: Ubuntu;
  font-style: normal;
  font-weight: bold;
}


.newH1 {
  font-family: Ubuntu;
font-style: italic;
font-weight: bold;
font-size: 44px;
line-height: 51px;
text-transform: capitalize;

color: #000000;
}

.blur {
  filter: blur(0px);
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from { 
   filter: blur(80px);
  }
  to {
    filter: blur(0px);
  }
}

/* 

#about {
  filter: blur(0px);
} */
#status {
  background: #FFECFF;
}

.nonclickable {
  cursor: default;
}

.nonclickable {
  background: #DADADA;
}

.aboutAfter {
  font-family: Ubuntu;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  line-height: 21px;
}

.buttonAfter {
  font-family: Ubuntu;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 18px;
/* identical to box height */

text-transform: capitalize;

}

#madeby, #madeby2  {
  display: none;
  font-family: Ubuntu;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  margin-bottom: 16px;
}

#madeby2 {
  margin: 40px 20px 20px 20px;
}

@media only screen and (max-width: 600px) {
  .column {
    flex-direction: column;
  }
  
  .doubleclass {
    width: 90%;
  }
}