AA_styles.css

:root {
	--timing: 1;
}

/* Tiny reset thingy */
body,html{
	margin:0;
	padding:0;
}

.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 100vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 2px;
}

.section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 100vh;

  /* For text formatting. */
  display: flex;
  align-items: left;
  justify-content: center;
  color: white;
  vertical-align: top;
  /* text-shadow: 0 0 0px #000; */
}

.parallax::after {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
  transform: translateZ(-1px) scale(1.6);
  /* Force the background image to fill the whole element. */
   background-size: cover;
  /* Keep the image from overlapping sibling elements. */
   z-index: -2;
}
/* The styling for the static div. */
.static {
  background: rgba(255,102,102,1);
  height: 20%;
  vertical-align: top;
}

.static_bottom {
	position: relative;
	background: -webkit-linear-gradient(-90deg, #313292, #313292 50%, rgba(255,102,102,1) 99%);
	font-size: inherit;
	height: 20%;
	z-index: 0;
}

.half_width {
  background: rgba(255,102,102,1);
  height: 20vh;
  width: 60%;
  vertical-align: top;
}

.bg1::after {
	background-image: url(Assets/cunningham_ranch.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index: -3;
}

.bg1::before {
	content:'';
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 110%;
	z-index: -1;
	background: -webkit-linear-gradient(90deg, rgba(255,102,102,1), rgba(255,102,102,1) 33%, rgba(102,204,255,0.2) 60%, rgba(102,204,255,0.2) 70%, rgba(255,102,102,1) 95%);
}

.bg2::after {
	background-image: url('Assets/prarie_wind.jpg');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	z-index: -2;
}

.bg2::before {
	content:'';
  position: absolute;
  align-items: middle;
	top: 0;
	bottom: 0;
  width: 100%;
  height: 100vh;
	z-index: -1;
	background: -webkit-linear-gradient(93deg, rgba(255,102,102,1), rgba(255,102,102,1) 7%, rgba(255,102,102,0.05) 33%,
	rgba(255,102,102,0.8) 80%, rgba(255,102,102,1) 99%);
}

.bg3::after {
	background: url('Assets/Calgary_night.jpg');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index: -2;
}

.bg3::before {
	content:'';
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100vh;
	width: 100%;
	z-index: -1;
	background: -webkit-linear-gradient(-87deg, rgba(255,102,102,1), rgba(255,102,102,0.9) 10%, rgba(255,102,102,0.1) 25%,rgba(255,255,255,0.0) 50%,  #323292 80%);
}

header h1 {
    font-family: cooper-black-std, sans-serif;
    color: white;
/*	text-transform: full-width;*/
    text-align: right;
    text-shadow: 3px 5px rgba(255,102,102,1);
    font-size: 630%;
    margin-right: 12px;
    margin-top: 15px;
    font-style: normal;
    font-size-adjust: inherit;
    z-index: 0;
/*    font-weight: 40;*/
}

header img {
	object-position: right;
	height: 75px;
	z-index: 0;
	padding-left: 8px;
}
header h2 {
	font-family: sans-serif;
	color: white;
	text-align: right;
	font-size: 210%;
	margin-right: 12px;
	margin-top: -90px;
	font-style: italic;
	/* font-size-adjust: auto; */
}

header{
	margin-top: 10px;
	background: linear-gradient(145deg, rgba(255,255,255,1), rgba(255,102,102,1) 72%);
  height: 130px;
  line-height: 130px;
}

h1 {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    color: white;
    text-align: center;
    font-size: 3em;
    text-shadow: -0.1em 0.1em rgba(255,102,102,0.5);
}

h4 {
  color: white;
	text-align: left;
	font-size: 2em;
	margin-top: 0em;
	margin-left: 1em;
  margin-right: 1em;
	/* font-size-adjust: auto; */
}

h5 {
    font-size: 240%;
    margin-top: 20px;
    margin-bottom: 0px;
    font-weight: bold;
    /* font-size-adjust: auto; */
}

h6 {
  color: white;
	text-align: left;
	font-size: 1em;
	margin-top: 0em;
	margin-left: 1em;
  margin-right: 1em;
}

body{
   background-color:rgba(255,102,102,1);
}
span{
   display:inline-block;
}



a:link {
  color: #330000;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

#windy{
    display: table;
    position: center;
    background: rgba(255,102,102,1);
    margin-top: auto;
		margin-left: auto;
		margin-right: auto;
		height:460px;
		width: 80%;
}
.turbine{
	fill: #ffffff
}
.blades{
	stroke: #ffffff;
	stroke-width: 1px;
	fill: #ffffff;
	fill-opacity: 1;
	animation: spinning calc(var(--timing)*1.6s) linear infinite;
	transform-origin: 1544.14px 530px;
}

 .well{
     stroke:#000;
     fill:#21D4FD;
 }

.ground{
    stroke:#000;
    fill:#0c6;
}

.thermStore{
    stroke:#000;
    fill:#ffffff;
}

.thermPipe{
    fill:url(#linear-gradient-1);
    stroke:#ffffff;
	/*animation: pulsing calc(var(--timing)*1.6s) linear infinite;*/

}

.compressor{
     fill: #faff6d;
 }

.topOfWell{
    fill: #313292;
}


@keyframes spinning {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes pulsing {
	0% {opacity: 1;}
	50% {opacity: 0.6;}
}