* {
  box-sizing: border-box;
}

body {
	background-color: black;
	color: black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: auto;
	background-image: url('http://keithplocek.com/img/SunsetDroneBackground.jpg');
	background-repeat: no-repeat;
	background-position: center center; 
	background-size: cover;
	background-attachment: fixed;
}

.alt {
  margin: auto;
  background-image: url('http://keithplocek.com/img/homer.jpg');
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: cover;
  background-attachment: fixed;
}

img {
  width: 100%;
  display: block;
}


a {
	text-decoration: none;
	color: #333;
}

a:hover {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

p {
	font-size: 18px;
}

h1 {
	text-align: center; 
  font-size: 400%;
}

h2 {
	text-align: center;
  font-size: 180%;
}

.intro h2 {
  font-size: 150%;
}

/*h2 a {
  color: #666;
}*/

h3 {
  text-align: center;
  color: #333;
  font-size: 20px;
}

.home {
  position: absolute;
  top: 0px;
}

.veil {
  background-color: rgba(0,0,0,0.8);
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -2;
  animation: lighten 5s ease;
}

@keyframes lighten {
  0% {
    background-color: rgba(0,0,0,1);
  }

  50% {
    background-color: rgba(0,0,0,1);
  }

  100% {
    background-color: rgba(0,0,0,0.8);
  }

}

.intro {
  margin: auto;
  margin-top: 10vh;
  margin-bottom: 10vh;
  padding: 10px;
  max-width: 1000px;
  display: flex;
  flex-direction: column-reverse;
  z-index: 1;
  position: relative;
}

.intro h1, .intro h2 {
  text-align: left;
}

.intro h2 {
  margin-left: 3px;
}

.name h1 {
  font-size: 500%;
  margin: 0px;
}

.intro a {
  color: white;
}

#circle {
  width: 33vw;
  height: 33vw;
  top: 10vh;
  left: 50vw;
  border-radius: 50%;
  position: fixed;
  background-image: url('http://keithplocek.com/img/SunsetDroneBackground.jpg');
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: 100%;
  background-size: cover;
  background-attachment: fixed;  
  z-index: -2;
  animation: moon 2s ease;
}

#circle img {
  border-radius: 50%;
  opacity:  0;
  animation: disappear 4s ease; 
}

@keyframes moon {
  0% {
    top: 150vh;
  }

  80% {
    top: 10vh;
  }

  100% {
    top: 10vh;
    background-image: url('http://keithplocek.com/img/SunsetDroneBackground.jpg');
  }

}

@keyframes disappear {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

}

.text {
	max-width: 1000px;
	background-color: ghostwhite;
	margin:  5vh auto;
	padding: 50px 0px 80px 0px;
}

.text h2 {
	text-align: center;
}

.text p {
	text-align: left;
	padding: 5px 8px;
}


.stories {
  color: #333;
}

.stories a {
/*	text-decoration: underline;*/
	color: black;
}

.stories a:hover {
/*	text-decoration: underline;*/
/*	color: #666;*/
}

.stories iframe {
  width: 100%;
  min-height: 400px;
}

.code a {
  text-decoration: underline; 
}

.inside {
	max-width: 600px;
	margin: auto;
}

.tallline p {
  line-height: 1.5;
  text-align: justify;
}

.tallline .stories a {
	text-decoration: underline;
}

.photocredit {
  text-align: right;
  font-size: 0.6em;
  margin-top: 0px;
  padding-right: 10px;
}

#codingflex {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1%;
}

#cleo {
  opacity: 0.9;
}

#celeb, #james, #cleo, #bear {
  position: relative;
  background-color: black;
}

#celeb:hover, #james:hover, #cleo:hover, #bear:hover {
  opacity: 0.8;
}

.cleobox {
  position: absolute;
  left: 10%;
  bottom: 5%;
  width: 80%;
  animation: wiggle 1s ease-in-out infinite;
}


#bear .cleobox {
  bottom: 8%;
  animation: wiggle 1.2s ease-in-out infinite;
}

@keyframes wiggle { 
   0% {
      transform:rotate(8deg);
   }
   50% {
      transform:rotate(-8deg);
   }
   100% {
      transform:rotate(8deg);
   }  
}

.randomwrapper {
  position: relative;
  background-color: black;
}

.randomwrapper img {
  opacity: 0.2;
}

.randflex {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
}

.randombox {
  font-size: 1.5em;
  padding: 20px;
  text-align: left;
  width: 80%;
  background-color: white;
  margin: auto;
  align-self: center;
}

.randombox a {
  text-decoration: underline;
  color: black;
}


.randombutton {
  margin: 20px auto 0px auto;
  padding: 8px;
  max-width: 400px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 20px;
  border: 2px solid transparent;
  cursor: pointer;
  animation: shadow-pulse 1s infinite;
}

.randombutton:hover {
  border: 2px solid gray;
  animation: none;
}

@keyframes shadow-pulse {
   0% {
        box-shadow: 0 0 0 0px rgba(169, 169, 169, 0.9);
   }

   100% {
        box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
   }
}

.setup {
  background-color: white;
  margin-top: 5%;
  margin-bottom: 5%;  
  color: #333;
  border: 2px solid black;
  padding:  1%;
}

.setup h2 {
  text-align: left;
}

.setup p {
  text-align: left;
  padding:  0px;
}

.empty {
  width: 100%;
  height: 40vh;
  background-image: url('http://keithplocek.com/img/SunsetDroneBackground.jpg');
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: cover;
  background-attachment: fixed;
}


@media (hover: none) and (orientation: landscape) {
   #circle {
       background-attachment: initial;
   }
}

@media (hover: none) {
    .empty {
      background-attachment: initial;
    }
}


@media only screen and (max-width: 1600px) {

  .intro {
    max-width: 820px;
  }

}

@media only screen and (max-width: 1200px) {

    #circle {
      width: 40vw;
      height: 40vw;
    }

}

@media only screen and (max-width: 820px) {
 
    body {
      background-image: url('http://keithplocek.com/img/SunsetDroneBackground1024.jpg');
    }

    p {
    	font-size: 130%;
    }

    .tallline p {
      text-align: left;
    }

/*
    .tallline p {
      line-height: 170%;
    }*/


    h1 {
    	font-size: 300%;
    }

    h2, .intro h2 {
    	font-size: 200%;
    }

    h3 {
      font-size: 150%;
    }

    .veil {
      background-color: rgba(0,0,0,1);
    }

    @keyframes lighten {

      100% {
        background-color: rgba(0,0,0,1);
      }

    }

    .intro { 
      margin-top: 0vh;
      margin-bottom: 0vh;
      flex-direction: column;
    }

    .name h1 {
      font-size: 500%;
      margin: 0px;   
    }

    #circle {
      width: 50vh;
      height: 50vh;
    }

    .stories iframe {
      min-height: 250px;
    }

 /*   #codingflex {
      grid-template-columns: 1fr 1fr;
    }*/

    .randombox {
      width: 90%;
      font-size: 1.3em;
    }

    .randombutton {
      max-width: 330px;
    }

    .text {
      margin: 2vh auto;
    }


}

@media only screen and (max-width: 640px) {

    body {
      background: none;
      background-color: black;
    }

    .text {
      margin: 1vh auto;
    }


}