body {
  margin-left: 5%;
  margin-right:5%;
  margin-top:10px;
}

details[open] summary ~ * {
  animation: sweep .7s ease-in-out;
}
summary {
    font-size:1em;
    cursor: pointer;
    outline:none;
}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -10px}
  100%  {opacity: 1; margin-left: 0px}
}

.one_by_one{
    margin-top: 9px;
    margin-left:15%;
    margin-right:15%;
    border-radius:15px;
    padding:10px;
    font-weight: normal;
    font-size:2em;
    transition-property: visibility;
    transition-duration: .1s;
    transition-delay: .1s;
  }
}

.two_by_one{
/*  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));

  grid-gap: 10px;*/
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  grid-auto-rows: minmax(325px, auto);
  grid-gap: 10px;
}
.three_by_one{
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 10px;
}
.four_by_one{
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 10px;
}

.two_by_two{
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  grid-auto-rows: minmax(325px, auto);
  grid-gap: 10px;

}

.three_by_two{
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: minmax(290px, auto);
  grid-gap: 10px;

}

.five_by_five{
  display: grid;
/*   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 5px;
font-size:2em;

}
div>.gap{
  font-size:0;
}
.gap>svg{
  visibility:hidden
}


.two_by_one, .three_by_one,.four_by_one, .two_by_two, .three_by_two,  .five_by_five{
margin-top: 9px;
border-radius:15px;
padding:10px;
font-weight: normal;
font-size:2em;
transition-property: visibility;
transition-duration: .1s;
transition-delay: .1s;
}


.bordered{
  border:solid 1px black;
  border-radius: 10px;
}


.questions_instruction{
  margin-top: 3px;
  border-radius:15px;
  padding:10px;
  font-weight: bold;
  font-size:2em;
}


/* Grid layout for quiz sections   */
.quiz{
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-gap: 10px;
}
.quiz svg{
   height:25vh;

}
.quiz>div {
border:solid 2px;
  margin-top: 9px;
border-radius:15px;
padding:10px;
  font-weight: normal;
  font-size:2em;
  transition-property: visibility;
transition-duration: .1s;
transition-delay: .1s;
}

input[type="radio"] {
    -ms-transform: scale(2); /* IE 9 */
    -webkit-transform: scale(2); /* Chrome, Safari, Opera */
    transform: scale(2);
}

.quiz_marker{
width:100%;
color:white;
height:50px;
}
.incorrect{
  visibility:hidden;
  float:right;
  color:white;
}
.correct{
  visibility:hidden;
  float:right;
  color:white;
}
#myMark, #myClear{
  font-size:2em
}


/* Grid layout for skills sections */
.skills {
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));

  grid-gap: 10px;
}

.skills > div {
  height: 43px;
  margin-top: 9px;
border-radius:15px;
padding:10px;
  font-weight: bold;
  font-size:2em;
  transition-property: visibility;
transition-duration: .1s;
transition-delay: .1s;

}


  .skills_answer{
    visibility:hidden;
    background-color:powderblue;
    text-align:center;
  }

    .skills>div>span{
      float:left;
      padding-right: 50px;
      font-size:.5em;
      height: 43px;
      margin-top: 12px;
    /*  line-height: 150px; */
    }


/* Grid layout for diagram sections */
.diagram{
  font-size:1em;
}

.diagram_container>svg {
 height:90vh;
 margin:1em auto;
 display: block;
 stroke-width:.1px;
 fill:transparent;
border:solid 1px;
stroke:black;
font-size:14px
}

/* Grid layout for interactive sections */


.geo_inputter,.geo_clearer {

 height: 2em;
 width: 2em;
 background-color: black;
}

#jxgbox{
  margin-top:50px
}



  #switch { margin-left: 45%;
    margin-top:8px;


  }

  h1 {
  text-align: center;
  font-size:2em;

  }
  math {
    text-align:center;
  }





#switch { margin-left: 45%;
  margin-top:8px;


}

h1 {
text-align: center;
font-size:2em;

}
math {
  text-align:center;
}
.switcher {
  position: relative;
  display: inline-block;
  width: 130px;
  height: 34px;

}

.switcher input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  transition: .2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 60px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  background-color: powderblue;
}

input:focus + .slider {
  box-shadow: 0 0 1px black;   /*#2196F3 */
}

input:checked + .slider:before {
  -webkit-transform: translateX(60px);
  -ms-transform: translateX(60px);
  transform: translateX(60px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.whitesmoke {
  padding-left:15px;
  padding-right:15px;
  padding-top:2px;
  padding-bottom:2px;
  border-radius:10px;
  background-color: whitesmoke;
}
nav{
  float:left;
  font-size:1.5em;
}