/* Basic Stuff
-------------------------------------------------- */
html {font-family: 'Montserrat', sans-serif; color: #666; font-size: 15px;}
* {text-decoration: none; box-sizing: border-box; margin:0; padding:0; font-weight: normal;}
body {}
h1, h2 , h3, h4, h5, h6 {clear: both; margin-left:1rem;}
h1 {font-family: 'Orbitron', sans-serif; font-size:3.2rem;}
h1 a {padding-left: .8rem; padding-right: .8rem;}
h2 {font-family: 'Orbitron', sans-serif; font-size:1.5rem; font-weight:100; margin-bottom:.5rem;}
h3 {font-size:1.2rem; }
h4 {font-size:.8rem; }

/* Basic Typography
-------------------------------------------------- */
p, ul, ol {margin: .5em 1em; text-align: justify;}
p {}
ul {list-style: none; margin-top: 0;}
	@media (min-width: 550px) {ul {list-style: none; margin-top: .7em;}}
ul ul {list-style: none; margin: 0 0 1em 0; } /* ----- list group including title ----- */
ul ul li {margin: .1em 0 0 1em;} /* ----- list items individually not including heading ----- */
	

/* Basic Images
-------------------------------------------------- */
img {max-width: 100%;}
figure {padding: 1rem;}
figcaption {font-size: .9em; margin-bottom: 2em;}
@media only screen and (min-width: 768px) {
    figcaption {font-size: .9em; margin-bottom: 3em;}
}

/* Basic Links
-------------------------------------------------- */
a {color: #000000;}
a:visited {color: #000000;}
a:hover {color: #f0f090; background: #101010;}
a:active {color: #101010; background: #f0f090;}

/* Hidden Elements
-------------------------------------------------- */
#home h2, #about h2, #contact h2, footer h2 {font-size: 0;}
.ghost {font-size: 0;}

/* Fancy Stuff (for Youtube videos)
-------------------------------------------------- */

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top: 0%;
  left: 0%;
  padding: 2%;
  width: 100%;
  height: 100%;
}
	@media only screen and (min-width: 768px) {
	.iframe-container{
	  position: relative;
	  width: 100%;
	  padding-bottom: 56.25%;
	  height: 0;}
	.iframe-container iframe{
	  position: absolute;
	  top:0%;
	  left: 0%;
	  padding: 2%;
	  width: 100%;
	  height: 100%;}
	}  
	
/* Sections
-------------------------------------------------- */
header, nav, section, footer {width: 100%; padding: 1rem; overflow: auto;}
header {padding: 0 5%;}
section {min-height: 500px;}

/* Navigation
-------------------------------------------------- */
@media only screen and (min-width: 768px) {
  nav ul {display: flex; flex-grow: 1; justify-content: flex-start; float: right;}
}
nav {font-family: 'Orbitron', sans-serif; font-size:.8rem; text-transform: uppercase;}
nav h2 {font-size: 0px;}
nav ul {margin: 0; list-style: none;}
nav ul li {padding: .5rem 1rem;}
nav a li {}
nav a:visited li {color: #000000;}
nav a:hover li {color: #f0f090; background: #101010;}
nav a:active li {color: #101010; background: #f0f090;}
nav .current li, nav .current:visited li {color: #101010; background: #f0f090;}
nav .current:hover li {background: #f0f090;}
nav .current:active li {background: #ffff00;}


/* Grid System (question can % not add up to 100% - col-8 was 66.66%)
-------------------------------------------------- */
.container {}
.row {} /* as of 20211229 .container and .row function identically */

    [class*="col-"],
    .container,
    .row {
        width: 100%;
        float: left;
      }

	  hr {
	    color: #cccccc;
	    margin-top: 0.5em;
	    margin-bottom: 1em;
	    border-width: 1px;
	  }

  @media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 61%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
      .light, .space, .sound, .touch, .experience {display: flex; flex-direction: row;}

  }

/* Front Page
-------------------------------------------------- */
.experience {}
    .experience :nth-child(1) { order: 2; }
    .experience :nth-child(2) { order: 1; }
    .experience :nth-child(3) { order: 3; }
.space {}
    .space :nth-child(1) { order: 3; }
    .space :nth-child(2) { order: 2; }
    .space :nth-child(3) { order: 1; }
.light {}
    .light :nth-child(1) { order: 2; } 
    .light :nth-child(2) { order: 1; }
    .light :nth-child(3) { order: 3; }
.color {}
    .color :nth-child(1) { order: 1; }
    .color :nth-child(2) { order: 2; }
    .color :nth-child(3) { order: 3; }
.sound {}
    .sound :nth-child(1) { order: 2; } 
    .sound :nth-child(2) { order: 1; }
    .sound :nth-child(3) { order: 3; }
.teaching {}
    .teaching :nth-child(1) { order: 1; }
    .teaching :nth-child(2) { order: 2; }
    .teaching :nth-child(3) { order: 3; }


.intro {margin-bottom: 3rem;}
.intro p {font-size: 1.5rem; text-align: center;}
.social {margin: .5rem 1rem;}
.leftfooter {font-family: 'Orbitron'; font-size: .8rem; text-align: left; font-weight: bold;}
.rightfooter {font-family: 'Orbitron'; font-size: .8rem; text-align: right;}


/* Testing Stuff (comment out to turn off)
html {background: #000000;}
body {background: #606060;}
p, ul, ol {background: #e0f0e0;}
figure {background: #d0d0f0; }
header {background: #d0d0d0;}
nav {background: #c0c0c0;}
nav a li {background: #ffddee  ;}
nav ul li {border: 1px solid;}
section {background: #ffffff;}
footer {background: #d0d0d0;}
[class*="col-"],
.container,
.row {border: 1px dashed #00f0f0; background: #f0f0f0;}
.light {background: #ffdddd;}
.space {background: #ddffdd;}
.sound {background: #ffffdd;}
.touch {background: #ffddff;}
.experience {background: #ddddff;}
-------------------------------------------------- */