@charset "UTF-8";
/* CSS Document */


@media screen and (orientation: portrait) {
  .flex-container {
	  display:flex;
	  width:100px;
	  height:auto;
	  margin:10px;
	  flex-direction:column;
	  margin:auto
  }
  .flex-item {
	  height:100px;
	  width:100%;
	  margin:auto;
  }
 .media {
	  flex-shrink:1;
	  height:100px;
	  width:100px;
	  margin:20px;
  }
.mediacontainer {
	  display:flex;
	  width:auto;
	  height:100px;
	  margin:10px;
	  flex-direction:row;
	  margin:auto
  }
}

@media screen and (orientation: landscape) {
  .flex-container {
	  display:flex;
	  width:auto;
	  height:100px;
	  margin:10px;
	  flex-direction:row;
  }
  .flex-item {
	  height:100%;
	  width:100px;
	  margin:auto;
  }
    .mediacontainer {
	  display:flex;
	  width:auto;
	  height:100px;
	  margin:10px;
	  flex-direction:row;
  }
  .media {
	  flex-shrink:1;
	  height:100%;
	  width:100px;
	  margin:auto;
  }

}
section {
	width:99%;
	height::99%;
}
  html {
	  height:100%;
  }
  
  h1 {
	  text-align:center;
	  font-size:200%;
	  font-family: ‘Arial Black’, Gadget, sans-serif;
  }
  
  #leftfront {
	  float:left;
  }
  
.startbutton  {
	  margin:auto;
	  height:100px;
	  width:100px;
  }
  footer {
	position:absolute;
   	bottom:0;
   	width:100%;
  	height:100px;
  }
  #outside {
	background:linear-gradient(#56C7EF, #56C7EF 50%, #07C210 50%, #07C210);
	height:100%;
	overflow:hidden;
  }
  #inside {
	  background-color:#000000;
	  height:100%;
	  overflow:hidden;
  }
  #mainpic1 {
	  position:absolute;
		width:100%;
		height:100%;
		text-align:center;
	  
  }
  #mainpic {
	  margin:auto;
	  width:200px;
	  height:200px;
  }
	  
  .Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

  #mainpic.clicked {
	  animation:mainpic-animation 1s alternate ease-in-out 2;
	  border:none;
  }
  @keyframes mainpic-animation {
	  from{
		  width:200px;
		  height:200px;
	  }
	  to{
		  width:300px;
		  height:300px;
	  }
  }
  .hidden {
	  visibility:hidden;
  }
  .flex-item.clicked {
	  animation:flex-item-animation 1s alternate ease-in-out 2;
	  border:none;
  }
  @keyframes flex-item-animation {
	  from{
		  width:100px;
		  height:100px;
	  }
	  to{
		  width:200px;
		  height:200px;
	  }
  }
#full {
	width:99%;
	height:99%;
}