/******************************************************************************
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: white;
  --color-text-main: #000000;
  --color-primary: #FFFF00;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: 'Courier New', monospace;
  --font-family-header: 'Courier New', monospace;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: 'Courier New', monospace;
  /*   src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027") */
  /*     format("opentype"); */
}

@font-face {
  font-family: 'Courier New', monospace;
  /*   font-weight: bold; */
  /*   src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437") */
  /*     format("opentype"); */
}

 
a:link {
  text-decoration: none;
 
} 


/* Our remix on glitch button */
.btn--remix {
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}

.btn--remix img {
  margin-right: 0.5rem;
}

.btn--remix:hover {
  background-color: #D0FFF1;
}

/* 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: 4px solid #fff;
}

.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
  color: blue;
  text-decoration: none;
  border-style: none;
}

.footer a:hover {
  background: var(--color-primary);
}

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

.divider {
  padding: 0 1rem;
}

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

body {
  font-family: 'Courier New', monospace;
  background-color: var(--color-bg);
  /* counter-reset: h2counter h3counter; */
  counter-reset: h2counter;
}

/* Page structure */
.wrapper {
  /* background-color: red; */
  width: 100%;
  /* min-height: var(--wrapper-height); */
  /* display: grid; */
  /* place-items: center; */
  /* padding: 1em; */
  /*   margin: 0 1rem; */

}

.content {
  /* background-color: blue; */
  width: 100%;
  padding: 2.5rem;
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: center; */
  /*   margin: 0.5rem 10rem; */
  /*   background: #F5F5F5; */

}

/* Very light scaling for our illustration */
.title {
  text-align: center;
  color: black;
  font-style: normal;
  font-weight: bold;
  font-size: 100px;
  line-height: 105%;
  margin: 0;
}

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

/* Instructions */

/* Change margin to padding to prevent overflow */
.instructions {
  padding: 1.5rem; /* This keeps the gap but puts it INSIDE the 90% width */
  /* margin: 1rem auto 0; */
  text-align: justify;
  text-justify: inter-word;
}

/* Button - Add it from the README instructions */
button,
input {
  font-family: inherit;
  font-size: 100%;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: 500ms;
}

h1 {
  counter-reset: h2counter;
}

/* Subheading */

/* 1. Reset the child level on the parent */
h2 {
counter-reset: h3counter !important; /* Added !important to force the reset */
}

/* 2. Handle the visual number and incrementing separately */
h2:before {
  content: counter(h2counter) ".\00a0\00a0";
  counter-increment: h2counter;
}

/* 3. The nocount should still reset the child but not increment itself */
h2.nocount:before {
  content: none;
  counter-increment: none;
}

/* 4. Repeat for h3 */
h3 {
  
  counter-reset: h4counter;
}

h3:before {
  content: counter(h2counter) "." counter(h3counter) ".\00a0\00a0";
  counter-increment: h3counter;
}

p,
ol {
  margin-left: 2em;
}

/* Interactive image */
.illustration:active {
  transform: translateY(5px);
}

/* Button dip
- Toggling this class on and off will move it down and up again
- The button transition property above determines the speed of the translate (500ms)
*/
.dipped {
  transform: translateY(5px);
}

/* Links that open files in the editor */
.fileopener {
  cursor: pointer;
  font-weight: bold;
  border-bottom: 3px solid var(--color-primary);
  color: var(--color-secondary);
}

.fileopener:hover {
  border-bottom: 3px solid var(--color-secondary);
}

.videos {
  display: block;
  margin: auto;
}

.definition {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
  border-radius: 1rem 0 0 1rem;
  padding: 1rem;
}

.tip {
  background-color: #BF40BF;
  border-left: 6px solid #581845;
  font-family: var(--font-family);
  color: white;
  border-radius: 1rem 0 0 1rem;
  padding: 1rem;
  width: 80%;
}

.tip a {
  
  color: var(--color-primary);

}


.additionalInfo {
  
  border-left: 6px solid gray;
  padding: 0 18px;
  
  overflow: hidden;
  background-color: #f1f1f1;
  border-radius: 1rem 0 0 1rem;
  padding: 1rem;
}





/* COLLAPSIBLE question  */
/* Style the button that is used to open and close the collapsible content */


.collapsible-question {
  background-color: green;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 80%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible-question-blue {
  background-color: blue;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 80%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible-question-yellow {
  background-color: yellow;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 80%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active-collapsible-question,
.collapsible-question:hover {
  /*   background-color: green; */
  /*   color: white; */
  padding: 2rem;

}



/* COLLAPSIBLE CONTENT  */
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #FF8C00;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
  background-color: #FF8C00;
  padding: 2rem;

}

.collapsible:after,
.collapsible-question:after {
  content: '\02795';
  /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796";
  /* Unicode character for "minus" sign (-) */
}

/* Giant quotes */

.code-custom-style {
  font-family: Consolas, "courier new";
  color: red;
  background-color: white;
  padding: 2px;
  font-size: 105%;
}



pre {
  width: 90%;
  background: #f1f1f1;
  white-space: pre-wrap;
  /* Since CSS 2.1 */
  word-wrap: break-word;
  /* For older browsers */
  overflow-x: auto;
  /* Adds a scrollbar ONLY to the code box if needed */
  max-width: 100%;
  /* Ensures it doesn't push past the parent */
}

#break {
  background: black;
  color: white;
  text-align: center;
  padding: 3em;
}

/* hr {
  border-bottom: 1px dashed black;
  
} */

.color-correction-photos {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;


}

img {
  width: 80%;
  padding: 1em;
}

.centered-image {
  display: flex;
}

.centered-image img {
  margin: auto;
  width: 100%;

}

.codeandimagesidebyside {
  display: flex;
  flex-direction: row;
}

.codeandimagesidebyside pre {
  width: 50%;
}


.codeandimagesidebyside img {
  width: 70%;
  height: 70%;
}

figure {
  display: inline-block;
}

.sidebysideimageswithcaptions {
  display: flex;

}

.sidebysideimageswithcaptions img {
  width: 100%;
}

.myIframe {
  width: 100%;
  height: 100%;
  text-align: center;
}

.myIframe iframe {
  width: 800px;
  height: 400px
}

textarea {
  /*   width:100%; */
}

abbr {
  cursor: pointer;
  color: purple;
  text-decoration: none
}

abbr:hover {
  cursor: pointer;
  color: orange;
}

.codeExample {
  font-size: 0.65em
}

.listOfLabs {
  font-size: 1em;
}

/* Style the outer container */
details.info-box {
  background-color: #f1f1f1;
  border-radius: 8px;
  margin: 1rem 0;
  overflow: hidden;
}

/* Style the "Button" part */
details.info-box summary {
  background-color: #FF8C00; /* Your Stranger Things Orange */
  color: white;
  padding: 18px;
  cursor: pointer;
  font-size: 15px;
  list-style: none; /* Removes the default arrow in some browsers */
}

/* Add a custom plus/minus indicator using the same logic as before */
details.info-box summary::after {
  content: '\02795'; /* Plus sign */
  float: right;
}

details[open] summary::after {
  content: '\2796'; /* Minus sign */
}

/* Style the image inside */
details .additionalInfo img {
  width: 40%;
  display: block;
  margin: 1rem auto;
}