:root{
  --bf:hsla(221, 100%, 79%, 0.74);
  --bodyc:rgba(230, 230, 230,0.8);
  --back:rgb(2, 22, 36);  
  }

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600&family=Open+Sans&family=Oswald&family=Russo+One&display=swap');

/*20201027 new stuff*/
@media (max-width:480px){
  body{
    font-size: 18px;
  }
  .leftBox,.rightBox,.bigBox{
    /* background:firebrick ; */
    width:100%;
    min-width: 320px;
  }
  h1{font-size: 1.32em;}
  h2{font-size: 1em;}
  h3{font-size: .78em;}
  h4{font-size: .6em;}
  h5{font-size: .5em;}
  h6{font-size: .4em;}
  .icon{width: 20px;}
}
@media(min-width: 481px) and (max-width: 720px){
  body{
    font-size: 24px;
  }
  .leftBox,.rightBox{
    /* background:green; */
    width:100% !important;
    min-width: 440px;
  }
  h1{font-size: 1.32em;}
  h2{font-size: 1em;}
  h3{font-size: .78em;}
  h4{font-size: .6em;}
  h5{font-size: .5em;}
  h6{font-size: .4em;}
  .icon{width: 30px;}
}
@media(min-width:721px) and (max-width:1440px){
  body{
    font-size: 36px;
  }
  .leftBox,.rightBox{
    /* background:navy; */
    width:50%;
  }
  h1{font-size: .66em;}
  h2{font-size: .5em;}
  h3{font-size: .39em;}
  h4{font-size: .3em;}
  h5{font-size: .25em;}
  h6{font-size: .2em;}
  .icon{width: 40px;}
}
@media(min-width:1441px){
  body{
    font-size: 48px;
  }
  .leftBox,.rightBox{
    /* background:black; */
    width:50%;
  }
  h1{font-size: .66em;}
  h2{font-size: .5em;}
  h3{font-size: .39em;}
  h4{font-size: .3em;}
  h5{font-size: .25em;}
  h6{font-size: .2em;}
  .icon{width: 60px;}
}

*{margin:0 !important; padding:0 !important; border:0px !important;
  text-decoration: none;
}

body{
  background: var(--back);
  color:var(--bodyc);
  font-family: "Comfortaa" !important;
  line-height: 200%;
  max-width: 100%;
}

.leftBoxTutorial{/*tutorials.html*/
  display: block;
  overflow: auto;
  text-align: left;
  padding: 20px !important;
}

.bigBox{
  /* background:white !important; */
  display: block;
  overflow: auto;
  text-align: center !important;
  padding: 20px !important;
}
.bigBox#topBox{
  background-image: linear-gradient(
        rgb(0, 0, 0),
        rgb(0, 21, 34) 25%,
        rgb(5, 38, 59)45%,
        rgb(12,92,146)60%,
        rgb(2, 22, 36)65%
        );
  display: flex;
  justify-content: center;
}

.leftBox{
  float: left;
  text-align: left;
}

.rightBox{
  float: right;
}

hr{
  border: 0;
  clear:both;
  width: 100%;               
  background-color: rgb(12,92,146);
  height: 4px;
}

div.card{
  background: hsla(0, 0%, 93%, 0.07);
  border-radius: 4px;
  padding: 34px !important;
  padding-top: 70px !important;
  padding-bottom: 50px !important;
  box-shadow: 0px 0px 8px 0px white;
}

a{color:var(--bf);}

hat1,hat2,hat3,hat4,hat5,hat6 {
  font-family: 'Russo One', sans-serif !important;
}

hat{
  font-size: 1.2em;
  line-height: 160%;
}
hat a, h6 a{
  /* text-decoration: none; */
  text-shadow: 1px 1px 16px hsl(220, 30%, 70%);
}
h1{text-shadow: 1px 1px 16px rgb(220, 220, 220);}

h1, h2, h3, h4, h5, h6{
  line-height:120%;
  padding: 20px;
}

hat1{font-size: 1.32em;}
hat2{font-size: 1em;}
hat3{font-size: .78em;}
hat4{font-size: .6em;}
hat5{font-size: .5em;}
hat6{font-size: .4em;}



/* 
.logo-tools{height:40px;}
 */

img#hd{
  width:200px;
  padding-top: 50px;
}

.left{text-align:left;}
.right{text-align:right;}
.center{text-align:center;}

/* td{border: white solid 2px !important;} */

.x3app_show{
  width: 100%;
}
.app_show{width: 30%;}
img#DA{width: 260px;}


.solid{
  white-space:nowrap;
  align-self: center;
}
.solid td {vertical-align: top;}

.fillWidth{width: 100%;}
.fillWidth td{vertical-align: top;}

/*patch for link text in tutorial*/
.leftBoxTutorial hat2 a{
  font-family: 'Comfortaa', sans-serif !important;
}

/*animated spoiler CSS*/
.spoilerbutton {
  font-family: 'Russo One', sans-serif !important;
  /* display:block; */
  margin:0px 0;
  background: var(--bf);
  color: var(--back);
  padding: 2px 4px !important;
  cursor:pointer;
  border-radius: 2px;
  
  
}
.spoiler {
  overflow:hidden;
  background: none;
  text-align: left;
}
.spoiler > div {
  --satime: 0.8s; /*spoiler animation time*/
  -webkit-transition: all var(--satime) ease-out;
  -moz-transition: margin var(--satime) ease-out;
  -o-transition: all var(--satime) ease-out;
  transition: margin var(--satime) ease-out;
}
.spoilerbutton + .spoiler {padding: 0px 8px !important;}
/*for each item because -100% fail with big text*/
.spoilerbutton[value="show description spoiler"] + .spoiler[id=spoilerCodeScroller] > div {margin-top:-100% !important;}

.spoilerbutton[value="show description spoiler"] + .spoiler[id=spoilerHumanDummy] > div {margin-top:-500% !important;}

.spoilerbutton[value="show description spoiler"] + .spoiler[id=spoilerGradientGenerator] > div {margin-top:-300% !important;}

.spoilerbutton[value="show description spoiler"] + .spoiler[id=spoilerRocketCreator] > div {margin-top:-300% !important;}

.spoilerbutton[value="show description spoiler"] + .spoiler[id=spoilerWheelCreator] > div {margin-top:-300% !important;}