/*Main stylesheet for the Space site*/


/****** General Styling ******/
  
  * {
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
  }
  
  a {
  	text-decoration: none;
  	color: #fff;
  	display: inline-block;
  	transition: all .5s ease;
  }
  
  a:hover {
  	-webkit-transform: scale(1.2);
  	-moz-transform: scale(1.2);
  	-ms-transform: scale(1.2);
  	-o-transform: scale(1.2);
  	transform: scale(1.2);
  }
  
  /* clearfix */
    
    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }
    .clearfix:after {
      clear: both;
    }
    .clearfix {
      zoom: 1;
    }

/****** Header Styling ******/
  
  header {
  	background-color: rgba(34, 32, 32, 0.5);
  	padding-top: 5px;
  	width: 100%;
  	border-bottom: 1px solid #fff;
  	float: left;
  }
  
  /* Navigation */
  
    .back-arrow {
      float: left;
      margin: 1em 0 1em 3em;
      width: 1.4em;
      height: 1.4em;
      border-left: 0.2em solid white;
      border-bottom: 0.2em solid white;
      transform: rotate(45deg);
      transition: all .5s ease;
    }
    
    .back-arrow:hover {
      -webkit-transform: rotate(45deg) scale(1.2);
  	  -moz-transform: rotate(45deg) scale(1.2);
  	  -ms-transform: rotate(45deg) scale(1.2);
  	  -o-transform: rotate(45deg) scale(1.2);
  	  transform: rotate(45deg) scale(1.2);
    }
    
    #back-arrow {
      width: 1.3em;
      height: 1.3em;
    }
  
    nav {
    	float: right;
    	margin-right: 5%;
    	text-align: right;
    	font-size: 1.3em;
    }
    
    nav li {
    	display: inline-block;
    	margin-right: 20px;
    }
    
    nav li:last-child {
    	margin-right: 0;
    }
  
  /* Main Banner */
  
    .banner {
    	height: 100vh;
    	background: black url("../img/andromeda.jpg") no-repeat;
    	background-size: cover;
    	background-attachment: fixed;
    }
    
    .banner h1 {
    	margin: 0;
    	text-align: center;
    	color: white;
    	font-size: 5em;
    	/*font-size: 4vw;*/
    }
    
    .banner h3 {
    	margin: 0;
    	text-align: center;
    	color: white;
    	font-size: 1.2em;
    }
    
    .banner-text {
    	position: relative;
      	top: 50%;
      	transform: translateY(-50%);
    }

/****** Body Styling ******/
  
  body {
  	font-size: 14px;
  }
  
  .left-column {
    width: 50%;
    float: left;
    padding: 0 2%;
    position: inherit;
    z-index: 1;
  }
  
  .right-column {
    width: 50%;
    float: left;
    padding: 0 2%;
    position: inherit;
    z-index: 1;
  }
  
  .tweet-header {
    text-align: center;
    font-size: 2.9em;
    color: white;
    padding-bottom: 1.2em;
  }
  
  .space-tweets {
    position: relative;
  }
  
  .left-tweets {
    width: 50%;
    float: left;
    padding: 0 2%;
    text-align: center;
  }
  
  .right-tweets {
    width: 50%;
    float: left;
    padding: 0 2%;
    text-align: center;
  }
  
  .semi-circle {
    /*width: 0;*/
    /*height: 0;*/
    /*border-top: 300px solid cadetblue;*/
    /*border-right: 300px solid cadetblue;*/
    /*border-left: 300px solid cadetblue;*/
    /*border-top-left-radius: 300px;*/
    /*border-top-right-radius: 300px;*/
    /*position: absolute;*/
    /*bottom: 0;*/
    /*left: 50%;*/
    /*margin-left: -300px;*/
    
    /*width: 100%;*/
    /*height: 570px;*/
    /*position: absolute;*/
    /*bottom: 0;*/
    /*left: 50%;*/
    /*margin-left: -500px;*/
    /*background: url("../img/semi-circle.png") no-repeat;*/
    /*z-index: 0;*/
  }
  
  /* Section Styling */
  
    .first-section {
    	height: 100vh;
    	box-shadow: inset 0 0 20px 1px rgba(0,0,0,0.75);
    	padding-top: 1%;
    	position: relative;
    	/*background: rgb(50,50,50) url("../img/semi-circle-large.png") center;*/
    	color: white;
    	
    	background: -webkit-radial-gradient(center bottom, blue -60%, rgba(0,0,0,0) 60%);
      background-color: rgba(0,0,0,.8);
    }
    
    #flare {
      background: -webkit-radial-gradient(center bottom, red -60%, rgba(0,0,0,0) 60%);
      background-color: rgba(0,0,0,.8);
      
      /*background-color: rgb(50,50,50);*/
      opacity:0.0;
      position:absolute;
      /*top:0;*/
      width:100%;
      height:100%;
      z-index: 0;
      margin-top: -1%;
    }
    
    .second-section {
    	height: 100%;
    	box-shadow: inset 0 0 20px 1px rgba(0,0,0,0.75);
    	background-color: black;
    }
    
    .tweet-section {
      height: 100%;
      /*background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);*/
      overflow: hidden;
      padding-bottom: 2%;
    }
    
    .third-section {
    	height: 100vh;
    	box-shadow: inset 0 0 20px 1px rgba(0,0,0,0.75);
    }
    
    .first-section h2 {
      text-align: center;
      font-size: 2em;
    }
  
  /* Form Styling */
  
    .form-section {
    	max-width: 300px;
    	margin: 0 auto;
    	padding-bottom: 2em;
    }
    
    .form-section p {
    	margin: 0;
    }
    
    .form-title {
    	text-align: center;
    	font-size: 3em;
    	padding-top: 1.5em;
    }
    
    .form {
    	text-align: center;
    }
    
    input {
    	width: 90%;
    	height: 30px;
    	padding: 10px;
    	border-radius: 5px;
    	border: none;
    	background-color: lightgray;
    }
    
    input:focus {
    	transform: scale(1.5);
    	transition: all.2s ease;
    	outline: 0;
    }
    
    textarea {
    	overflow: auto;
    	vertical-align: top;
    	padding: 10px;
    	border-radius: 5px;
    	width: 90%;
    	border: none;
    	background-color: lightgray;
    }
    
    textarea:focus {
    	transform: scale(1.5);
    	transition: all.2s ease;
    	outline: 0;
    	/*margin-bottom: 30px;*/
    	position: relative;
    	top: -40px;
    	border: 1px solid white;
    }
    
    button {
    	font-size: 1.6em;
    	padding: 10px 15px;
    	border-radius: 10px;
    	border: none;
    	background-color: lightgray;
    	color: gray;
    	outline: 0;
    }
    
    button:hover {
    	transform: scale(1.1);
    	transition: all.2s ease;
    }
    
    button:active {
    	background-color: gray;
    	color: lightgray;
    }
    
    form div {
    	margin: 20px 0;
    }

/****** Footer Styling ******/
  
  .footer-section {
  	margin-left: 5%;
  }

  .new-settings {
    position: relative;
    bottom: -24.2em;
    right: 1em;
    background-color: white;
    border: 1px solid black;
    padding: .5%;
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 8em;
    text-align: center;
    float: right;
  }
  
  .tars {
    background: url("../img/tars.jpg");
    position: fixed;
    bottom: -1381px;
    width: 695px;
    height: 1381px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .animateTars {
    -webkit-animation: Tars 85s linear 15s;
    animation: Tars 85s linear 15s;
  }
  
  @-webkit-keyframes Tars {
    0% {bottom: -1381px;}
    50% {bottom: -450px;}
    100% {bottom: -1381px;}
  }