*{box-sizing: border-box;font-family: monospace ,sans-serif, Arial;
}
html{scroll-behavior:smooth;}
:root {
  --primaryColor:#ff6d00; /*rgb(26,35,126) */
  --primaryColorDark: #c43c00;
  --primaryLightColor: #ff9e40;
  --primaryVeryLight:#ffffb0; /*-PENDING--*/
  --secondaryColor: #3d2622; /* 61,38,34
  --secondaryDarkColor: #1a0000; /*rgb(28,50,58)*/
  --secondaryColorLight: #694e4a;
  --bgdColorFooter:#3b0000;
  --bgdColorIntro:#ffffe4;
}
:target {
  border: ridge var(--secondaryColorLight);
}
/* ---- intro image ----*/
.title{
  font-size: 4em;
  font-family: LCD5x8H;
  color: var(--primaryLightColor);
  text-align: center;
  font-weight: 600;
  position: absolute;
  text-shadow: 2px 2px 5px var(--bgdColorIntro);
}
.ani1{
    left: 0px;
    top: 200px;
    text-align: right;
    width: 48%;
    animation: title1 3s;
}
.ani2{
    top:200px;
    right: 0px;
    text-align: left;
    width: 50%;
    animation: title2 3s;
}
@keyframes title1 {
  0%{opacity: 0;top:0; transform: scale(0);text-shadow: 0px 0px 0px var(--bgdColorIntro);}
  20%{opacity: 0.5;top:100px; transform: scale(1.5); text-shadow: 0px 0px 0px var(--bgdColorIntro);}
  40%{opacity: 0;top:2000px; transform: scale(0);text-shadow: 0px 0px 0px var(--bgdColorIntro);}
  60%{opacity: 0.5;top:50px; transform: scale(1.5);text-shadow: -20px -20px 5px var(--bgdColorIntro);}
  80%{opacity: 1;top:200px; transform: scale(0.8);text-shadow: 15px 15px 5px var(--bgdColorIntro);}
  100%{opacity: 1;top:200px; transform: scale(1);text-shadow: -2px -2px 5px var(--bgdColorIntro);}
}
@keyframes title2 {
  0%{opacity: 0;top:2000px; transform: scale(0);text-shadow: 0px 0px 0px var(--bgdColorIntro);}
  20%{opacity: 0.5;top:500px; transform: scale(1.5); text-shadow: 0px 0px 0px var(--bgdColorIntro);}
  40%{opacity: 0;top:-200px; transform: scale(0);text-shadow: 0px 0px 0px var(--bgdColorIntro);}
  60%{opacity: 0.5;top:800px; transform: scale(1.5);text-shadow: -20px -20px 5px var(--bgdColorIntro);}
  80%{opacity: 1;top:200px; transform: scale(0.8);text-shadow: 15px 15px 5px var(--bgdColorIntro);}
  100%{opacity: 1;top:200px; transform: scale(1);text-shadow: -2px -2px 5px var(--bgdColorIntro);}
}
figure{
  width: 1000px;
  height: 450px;
  margin: auto;
  margin-top: 50px;
  border-radius: 20px;
}
figcaption{font-size: 0.6em; float: right; padding-right: 10%; }
.introImage{
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  height: 100%;
  background-image: linear-gradient(to left top, rgba(28,50,58,0.6), rgba(26,35,126,0.4)), url('../images/circuit.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 20px;
  box-shadow: 1px 1px 10px black;
  overflow: hidden;
}
/* --- navigation tabs ---*/
nav{
  width: 80%;
  height: 60px;
  margin: auto;
  margin-top: 30px;
  font-size: 1.2em;
  text-align: center;
  font-weight: 600;
  position: sticky;
  top: 0;
}
nav a{
    float: left;
    color: var(--primaryColor);
    text-decoration: none;
    width: 25%;
    height: 100%;
    background-color: rgba(61,38,34,0.8);
    padding: 10px;
}
nav a:hover, .activeNavTab{
  background-color: var(--bgdColorFooter);
  color: var(--bgdColorIntro);
}

/*--- text container --*/
.txtContainer{
  width: 80%;
  height: auto;
  padding: 100px 20px 100px 20px;
  margin: auto;
  background-color: var(--bgdColorIntro);
}
dt{color: var(--primaryColor);}
/* --- TOPICS ---*/
.topics{
  width: 80%;
  height: auto;
  background-color: var(--primaryVeryLight);
  margin: auto;
  padding-top: 90px;
  padding-bottom: 90px;
}
.subtitle{padding: 20px 10px 20px 10px; color: var(--primaryColor);font-stretch:ultra-expanded; font-weight: 600;}
.subtitleProject{padding: 20px 10px 20px 10px; color: var(--primaryVeryLight);font-stretch:ultra-expanded; font-weight: 600;}
.collapsible{
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1em;
  background-color: var(--primaryVeryLight);
  color: var(--primaryColorDark);
}
.colorExercise{
  background-color: var(--primaryLight);
  color: var(--primaryColorDark);
}
.colorLab{
  background-color: var(--primaryColor);
  color: var(--primaryVeryLight);
}
.active, .collapsible:hover{
  background-color: var(--primaryColorDark);
  color: var(--bgdColorIntro);
}
.collapsible:after{
  content: '\002B';
  color: var(--secondaryDarkColor);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2212";
  color: var(--secondaryColorLight);
  padding: 5px;
  border-radius: 5px;
}
.content {
  padding: 5px 15px 30px 15px;
  display: none;
  overflow: hidden;
  background-color: var(--bgdColorIntro);
  height: auto;
}
.content iframe{
  padding: 20px;
  width: 40%;
  height: 300px;
  float: left;
}
.download{
  text-decoration: none;
  background-color: var(--secondaryColorLight);
  color: var(--primaryColor);
  border-radius: 5px;
  padding: 10px 20px;
  font-weight: 600;
  display: inline-block;
  margin-top: 2em;
  margin-bottom: 1em;
}
.download:hover{background-color: var(--secondaryColor); color: var(--primaryVeryLight);}
/* --  -- */
.exercises, .labExp, .wi, .credits{
  padding-top: 100px;
  padding-bottom: 100px;
  width: 80%;
  height: auto;
  margin: auto;
}
.exercises{
background-color: var(--primaryLightColor);}
/* --LAB EXPERIMENTS--*/
.labExp{  background-color: var(--primaryColor);}
.labIntro{ padding: 12px; text-align: justify;}
.khanLink{ padding: 12px; background-color: var(--secondaryDarkColor); color: var(--primaryVeryLight); text-decoration: none; border-radius: 12px;}
.khanLink:hover{
  background-color: var(--primaryColor); color: var(--secondaryColorLight);
}
.khanCred{
  font-size: 11px;
}
/* --- credits -------*/
.credits{
  background-color: var(--bgdColorFooter);
  padding: 100px 20px 100px 20px;
  color: white;
  height: auto;
  text-align: justify;
}
.copyrighted{
  width: 100%;
  height: 50px;
}
.credits img{
  width: 160px;
  height: 50px;
  float: left;
  margin-right: 30px;
}
.credits a{
  text-decoration: none;
  color: white;
}
.credits h6{
  text-align: center;
}
.imgActivity{
	width:95%;
}
.imgActivity img{
	width:100%;
	height:100%;
	margin:2%
}
/* ---- terms of use ----- */
.terms_of_use{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
}
.terms_of_use:target{
  opacity: 1;
  pointer-events: auto;
}
.terms_content{
  width: 80%;
  height: 80%;
  margin-top: 5%;
  margin-left: 10%;
  background-color:var(--primaryVeryLight);
  overflow-y: scroll;
  color: black;
  padding: 1.5em;
}
.terms_content h1{
  color: var(--primaryColorDark);
  float: left;
  width: 100%;
}
.terms_content a{
  float: right;
  padding: 0em 0.5em;
  display: block;
  color: var(--secondaryDarkColor);
}
.termClose{
  background-color: var(--primaryColorDark);
  border-radius: 20%;
  box-shadow: 0 0 10px 2px var(--primaryColorDark);
  font-weight: 600;
  color: var(--secondaryColorLight)
}
/*------------- MEDIA SCREEN ----------------------------------------
*/
@media only screen and (max-width: 1250px){
  .title{font-size: 3em;}
  figure{   width: 800px;   height: 400px; }
  figcaption{font-size: 0.5em;}
  .p1, .p2, .p3{  font-size: 1em;}
  .p1 i, .p2 i{  font-size: 0.6em;}
  .p3 i{font-size: 0.5em}
  .p3{font-size: 1.3em; right: 10%;}

  /* --- navigation tabs ---*/
  .navTab{
    height: 50px;
    margin-top: 20px;
    font-size: 0.9em;
  }
  .navTab a{ padding: 15px; }

  /*--- text container --*/
  .txtContainer{
    height: auto;
    padding: 60px 15px 60px 15px;
    font-size: 0.9em;
  }

  /* --- topics ---*/
  .topics, .exercises, .labExp, .wi{
    padding-top: 60px;
    padding-bottom: 60px;
    font-size: 0.9em;
  }
  .collapsible{
    padding: 18px;
    font-size: 1em;
  }
  /* --- collapsible content --*/
  .content {
    padding: 0 15px;
    font-size: 1em;
  }
/* --- credits -------*/
.credits{
  padding:60px 18px 60px 18px;
  font-size: 0.9em;
}
.copyrighted i{
  font-size: 0.8em;
}
}/* end of media
/*
------------- SMALL AND TABLET SCREEN ---------------
*/
@media only screen and (max-width: 850px) {
  figure{
    width: 90%;
    height: 150px;
  }
  .ani1{
      top: 50px;
      width: 70%;
  }
  .ani2{
      top:100px;
      width: 70%;
  }
  .title{       font-size: 1.7em;   }
  .p1, .p2, .p3{  font-size: 0.8em; width: 90%;}
  .p1, .p2{color: var(--primaryVeryLight)}
  .p1 i, .p2 i{  font-size: 0.6em;}
  .p3 i{font-size: 0.5em}
  .p3{font-size: 0.85em; right: 5%; left: 5%;}

  /* --- navigation tabs ---*/
  .navTab{
    width: 90%;
    height: 45px;
    margin-top: 15px;
    font-size: 0.63em;
  }

  /*--- text container --*/
  .txtContainer{
    width: 90%;
    height: auto;
    padding: 60px 10px 60px 10px;
    font-size: 0.7em;
  }
/* -- youtube video --- */
.content iframe{
  padding-top: 20px;
  padding-bottom: 20px;
  width: 80%;
  height: 300px;
}
  /* --- topics ---*/
  .topics, .exercises, .labExp, .wi{
    width: 90%;
    padding-top: 60px;
    padding-bottom: 40px;
    font-size: 0.7em;
  }
  .collapsible{
    padding: 12px;
    font-size: 1em;
  }
  /* --- collapsible content --*/
  .content {
    padding: 0 15px;
    font-size: 1em;
  }
  /* --- credits -------*/
  .credits{
    width: 90%;
    padding: 60px 12px 40px 12px;
    font-size: 0.7em;
  }
  .copyrighted i{
    font-size: 0.9em;
  }
  .copyrighted{
    height: 50px;
  }
  .copyrighted img{
    margin-top: 10px;
    width: 110px;
    height: 35px;
  }
}/* end of media
/*--- VIDEOS --*/
.activityVideo{
width: 100%;
}
.activityVideo video{
  max-width: 100%;
}