/* ---- Outer Containers Styling Begin --- */
html {
    min-width: 360px;
    max-height: 100%;
    
}
body {
	background-color: black;
    background-image: url("../images/background/background_colors.png");
    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;
    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 2s 0s;
    animation-fill-mode: reverse;
    animation-direction: reverse;
    animation-timing-function: ease-in-out;
}
/* animation to slide planet in */
@keyframes slide {
    from {top: 26vw;}
    to {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 2s 2s;
    animation-fill-mode: forwards;
}
/* fades rings in */
@keyframes ringin {
    from {opacity: 0;}
    to {opacity: 1;}
}
/* 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 1s 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
/* shootn fade in animation*/
@keyframes words {
    from {opacity: 0;}
    to {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 1s 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
#moonman img {
    width: 100%;
    height: auto;
}
/* moonman animation */
@keyframes moonman {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* stars container placement */
#stars {
    position: absolute;
    top: -40vw;
    transition: margin-left 0.5s;
    z-index: 2;
    animation: move 2s;
    animation-fill-mode: reverse;
    animation-direction: reverse;
    animation-timing-function: ease-in-out;
}
/* animation to slide stars in */
@keyframes move {
    from {top: -40vw;}
    to {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 2s 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
#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 nav in top bar */
#top_bar nav {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
}
#index_menu {
    margin-right: 3vw;
    margin-top: 8px;
    color: white;
}
#index_menu:hover {
    opacity: 0.6;
}

/* 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: 1.6em;
	letter-spacing: 1pt;
    margin-bottom: 5px;
}
h1:hover {
	opacity: .6;
}

/* styles contact information*/
#title p, #phone_number {
    margin: 0;
    font-size: 1em;
    color: rgba(255,255,255,0.7);
}
/* ---- 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;
}
/* 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;   
}
/* menu item grow on hover */
.menu-item:hover {
    opacity: 0.5;
    width: 110%;
    transition: 0.1s;
}

/* places about us */
#aboutm {
    top: 0vw;
}
/* places design */
#designm {
    top: 5vw;
    left: 3.1vw;
}
/* places contact */
#contactm {
    top: 10vw;
    left: 6.5vw;
} 

/* hides mobile menu on desktop */
#top_bar #mobile_menu {
    display: none;
}
/* ---- Menu Styling End --- */


/* --- Tablet Styling --- */
@media screen and (max-width: 1200px) {
    
     /* planet tablet placement*/
    #earth {
        transform: scale(1.1);
        top: 51vw;
    }
    @keyframes slide {
        from {top: 51vw;}
        to {top: 150vh;}
        
    }
    
    /* ring tablet placement*/
    #rings {
        top: 29vw;
        transform: scale(1.1);
    }
    
    /* moonman tablet placement*/
    #moonman {
        width: 15vw;
        top: 45vw;
        left: 68vw;
        transform: rotate(10deg);
    }
    /* shootn words tablet placement*/
    #shootn-words {
        width: 30vw;
        top: 18vw;
        left: 60vw;
        transform: rotate(3deg);
    }
    
    /* menu tablet placement*/
    #menu {
        width: 100vw;
        top: 24vw;
        left: 0vw;
        padding-left: 30vw;
        padding-right: 55vw;
    }
    #aboutm {
        top: 0vw;
        left: 2vw;
        transform: rotate(8deg);
    }
    #designm {
        top: 4.5vw;
        left: 4vw;
        transform: rotate(8deg);
    }
    #contactm {
        top: 10.5vw;
        left: 7vw;
        transform: rotate(8deg);
    }
}


/* --- Mobile Styling --- */
@media screen and (max-width: 680px) {

    /* --- Mobile Menu Styling Begin --- */
    #top_bar #mobile_menu {
        display: flex;
        opacity: 0;
        animation-name: menu_hide;
        animation-duration: 0.1s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
        z-index: 3;
        animation-name: menu_hide;
    }
    /* animation to fix display issue on load */
    @keyframes menu_hide {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    /* place toggle icon */
    #menuToggle {
      display: block;
      position: absolute;
      top: 4vw;
      left: 4vw;
      z-index: 1;
      user-select: none;
    }
    /* place toggle button */
    #menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
    }
    /* style hamburger menu */
    #menuToggle span {
      display: block;
      width: 33px;
      height: 3px;
      margin-bottom: 8px;
      position: relative;
      background: #cdcdcd;
      z-index: 1;
      transform-origin: 4px 0px;
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }
    /* shorten second span */
    #menuToggle span:nth-child(3) {
      width: 25px;
    }
    /* move last span on click */
    #menuToggle span:nth-child(4) {
      transform-origin: 0% 100%;
    }
    /* rotate and place first span on click*/
    #menuToggle input:checked ~ span {
      transform: rotate(45deg) translate(0px, 2px);
    }
    /* hide second span on click*/
    #menuToggle input:checked ~ span:nth-child(3) {
      opacity: 0;
    }
    /* rotate and place third span on click*/
    #menuToggle input:checked ~ span:nth-last-child(2) {
      transform: rotate(-45deg) translate(0, -1px);
    }
    /* style menu background */
    #menu_items_mobile {
        background-color: black;
        position: absolute;
        top: 0;
        box-sizing: border-box;
        width: 100vw;
        height: 200vh;
        margin: 0vw;
        margin-left: -4vw;
        margin-top: -4vw;
        padding: 0vw;
        padding-top: 20vh;
        transform: translate(-100%, 0);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    /* removes bullets from menu items */
    #mobile_menu ul {
        list-style-type: none;
    }
    /*slide from left */
    #menuToggle input:checked ~ ul {
      transform: none;
    }
    .dropdown button, #menu_items_mobile li {
        font-family: 'avenir', sans-serif;
        font-weight: 700;
        font-size: 2em;
        text-align: center;
        color: rgba(255,255,255,1);
        background-color: Transparent;
        border: none;
        width: 100%;
        padding: 0px;
        padding-top: 3vw;
        padding-bottom: 3vw;
        margin: 0;
        margin-bottom: 7vw;
    }
    /* style menu item for indicating current page */
    #mobile_menu #current_page {
        color: rgba(190,190,190,1);
    }
    /* keeps design dropdown content from displaying when not hovering */
    .dropdown-content {
        display: none;
        margin-top: -7vw;
    }
    /* styles design dropdown content */
    .dropdown-content a {
        display: block;
        color: rgba(255,255,255,1);
        font-size: 1.2em;
    }
    /* displays dropdown content when hovering over design item */
    .dropdown:hover .dropdown-content {
        display: block;
    }
    /* styling for dropdown content on hover */
    .dropdown-content a:hover {
        color: rgba(255,255,255,0.7);
    }
    /* mobile menu item hover styling */
    #menu p:hover, .dropdown:hover button, #menu_items_mobile li:hover{
        background-color: rgb(50,50,50);
    }
    /* center design dropdown text */
    .dropdown {
        text-align: center;
    }
    /* design dropdown content tablet styling */
    .dropdown-content a {
        color: white;
        margin-top: 2vw;
        padding-top: 0.5vw;
        padding-bottom: 2.5vw;
        padding-left: 0.5vw;
        border-bottom: solid 1px gray;
    }  
    
    /* hides top menu on mobile */
    #top_bar #desktop_menu {
        display: none;
    }
    /* --- Mobile Menu Styling End --- */
    
     /* planet mobile placement */
    #earth {
        transform: scale(2);
        top: 165vw;
        overflow: hidden;
    }
    @keyframes slide {
        from {top: 165vw;}
        to {top: 150vh;}
    }
    
    /* rings mobile placement */
    #rings {
        top: 147vw;
        transform: scale(2);
    }
    
     /* shootn words mobile placement */
    #shootn-words {
        width: 60vw;
        top: 62vw;
        left: 50%;
        margin-left: -30vw;
        transform: rotate(-15deg);
    }
    
    /* moonman mobile placement */
    #moonman {
        width: 18vw;
        top: 115vw;
        left: 71vw;
        transform: scale(1.5) rotate(10deg);
    }
    
    /* menu mobile placement */
    #menu {
        width: 89.5vw;
        top: 80vw;
        left: 0vw;
        padding-left: 25vw;
        padding-right: 45vw;
    }
    #aboutm {
        top: 0vw;
        left: 0vw;
        transform: scale(1.6) rotate(9deg);
    }
    #designm {
        top: 11.5vw;
        left: 3.5vw;
        transform: scale(1.6) rotate(9deg);
    }
    #contactm {
        top: 24vw;
        left: 8.5vw;
        transform: scale(1.6) rotate(9deg);
    } 
    
    /* logo mobile placement */
    #logo {
        width: 34vw;
        height: 34vw;
        left: 50%;
        margin-left: -17vw;
        top: 25vw;
    }

    /* top bar mobile styling */
    #top_bar {
        width: 100%;
        right: 0;
    }
    #title {
        padding-right: 10px;
    }
    /* title mobile styling */
    #title h1 {
        text-align: center;
        font-size: 2.1em;
        margin-top: 7px;
        margin-bottom: 0px;
    }
    /* contact mobile styling */
    #title p {
        font-size: 1.1em;
        margin-top: 0px;
    }
    
    /* star container mobile placement */
    #stars {
        top: 18vw;
    }
    @keyframes move {
        from {top: 18vw;}
        to {top: 100vh;}
    }
    
    /* fixes overlapping stars on mobile */
    .five {
        top: 20vw;
    }
    .nine {
        top: 10vw;
        left: 10vw;
    }
    .seven {
        top: 10vw;
    }

}