/* ---- Outer Containers Styling Begin --- */
html {
max-height: 100%;
}
body {
background-color: black;
background-image: url("../images/background-colors.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
background-size: cover;
width: 100%;
height: 100vh;
margin: 0px;
display: flex;
flex-flow: column;
justify-content: center;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
color: white;
font-family: 'avenir', sans-serif;
text-decoration: none;
}
/* removes link underlines */
a {
text-decoration: none;
}
/* ---- Outer Containers Styling End --- */
/* ---- Background Styling Begin --- */
/* fixes planet animation flash on safari */
#z-index-fix {
transform: translate3d(0px, 0px, 0px);
position: absolute;
display: flex;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
/* styling for planet */
#earth {
width: 100%;
position: absolute;
top: 26vw;
z-index: 0;
margin: 0px;
padding: 0px;
animation: slide 4s 0s;
animation-fill-mode: reverse;
animation-direction: reverse;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* animation to slide planet in */
@keyframes slide {
0% {top: 26vw;}
50% {top: 26vw;}
100% {top: 200vh;}
}
/* sizes planet image */
#earth img {
width: 100%;
height: 100%;
}
/* styling for rings */
#rings {
width: 100%;
position: absolute;
opacity: 0;
top: 5vw;
z-index: -1;
animation: ringin 4s 0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
/* fades rings in */
@keyframes ringin {
0% {opacity: 0;}
50% {opacity: 0;}
99% {opacity: 1;}
100% {opacity: 0;}
}
/* sizes ring image */
#rings img {
width: 100%;
height: auto;
}
/* styles shootn words*/
#shootn-words {
width: 20vw;
position: absolute;
top: 10vw;
left: 58vw;
opacity: 0;
margin: 0;
z-index: 1;
animation: words 4s 0s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
/* shootn fade in animation*/
@keyframes words {
0% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 0.7;}
}
#shootn-words img {
width: 100%;
height: auto;
}
/* moonman styling*/
#moonman {
width: 10vw;
position: absolute;
top: 25vw;
left: 55vw;
opacity: 0;
z-index: 1;
transform: rotate(10deg);
animation: moonman 4s 0s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
#moonman img {
width: 100%;
height: auto;
}
/* moonman animation */
@keyframes moonman {
0% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 1;}
}
/* stars container placement */
#stars {
position: absolute;
top: -40vw;
transition: margin-left 0.5s;
z-index: 2;
animation: move 4s;
animation-fill-mode: reverse;
animation-direction: reverse;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* animation to slide stars in */
@keyframes move {
0% {top: -40vw;}
50% {top: -40vw;}
100% {top: 100vh;}
}
/* stars styling */
.star {
animation: fade 8s infinite;
background-color: white;
border-radius: 50%;
position: absolute;
}
/* star fade animation */
@keyframes fade {
0% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}
.one {
width: .5vw;
height: .5vw;
left: 5vw;
top: 30vw;
}
.two {
width: 2vw;
height: 2vw;
top: 25vw;
left: 20vw;
animation-delay: 1s;
}
.three {
width: 2vw;
height: 2vw;
left: 30vw;
top: 2vw;
animation-delay: 3s;
}
.four {
width: 3vw;
height: 3vw;
left: 57vw;
top: 2vw;
animation-delay: 10s;
}
.five {
width: 3vw;
height: 3vw;
right: 25vw;
top: 25vw;
animation-delay: 7.2s;
}
.seven {
width: 1vw;
height: 1vw;
left: 90vw;
top: 5vw;
animation-delay: 4s;
}
.eight {
width: .5vw;
height: .5vw;
left: 5vw;
top: 80vw;
animation-delay: 1s;
}
.nine {
width: 2vw;
height: 2vw;
top: 65vw;
left: 20vw;
animation-delay: 1s;
}
.ten {
width: 2vw;
height: 2vw;
left: 30vw;
top: 42vw;
animation-delay: 3s;
}
.eleven {
width: 1vw;
height: 1vw;
left: 57vw;
top: 45vw;
animation-delay: 10s;
}
.twelve {
width: 3vw;
height: 3vw;
left: 75vw;
top: 65vw;
animation-delay: 7.2s;
}
.thirteen {
width: 1vw;
height: 1vw;
left: 95vw;
top: 80vw;
animation-delay: 5s;
}
.fourteen {
width: 1vw;
height: 1vw;
left: 92vw;
top: 55vw;
animation-delay: 4s;
}
/* ---- Background Styling End --- */
/* ---- Logo and Title Styling Begin --- */
/*logo styling*/
#logo {
width: 15vw;
height: 15vw;
max-width: 250px;
max-height: 250px;
box-sizing: border-box;
position: absolute;
left: 3vw;
top: 20px;
z-index: 2;
opacity: 0;
/* uses same animation as rings */
animation: ringin 4s 0s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
#logo img:hover {
opacity: 0.5;
}
#logo img {
width: 100%;
height: 100%;
}
/* styles top bar*/
#top-bar {
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: flex-start;
position: absolute;
top: 0px;
right: 2vw;
z-index: 4;
}
/* styles title section */
#title {
display: flex;
flex-flow: column;
align-items: flex-end;
justify-content: space-between;
margin-right: 1.25%;
text-decoration: none;
min-width: 200px;
}
/* styles title */
h1 {
font-weight: 700;
color: white;
font-size: 2.5vw;
letter-spacing: 1pt;
margin-bottom: 5px;
}
h1:hover {
opacity: .6;
}
/* ---- Logo and Title Styling End --- */
/* ---- Menu Styling Begin --- */
/* menu container styling */
#menu {
width: 20vw;
height: 100%;
position: relative;
top: 10vw;
left: 23vw;
z-index: 1;
box-sizing: border-box;
padding-left: 5vw;
padding-right: 5vw;
animation: menu 4s 0s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
/* fades menu in */
@keyframes menu {
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}
/* menu item styling */
.menu-item {
opacity: 1;
width: 100%;
position: relative;
}
/* places about us */
#aboutm {
top: 0vw;
}
/* places design */
#designm {
top: 5vw;
left: 3.1vw;
}
/* places contact */
#contactm {
top: 10vw;
left: 6.5vw;
}
@media screen and (max-width: 400px) {
#menu {
top: 9vw;
}
#designm {
top: 2.5vw;
}
#contactm {
top: 5vw;
}
}
/* ---- Menu Styling End --- */