h1, h2, h3, h4, h5, h6, a, p, figcaption, blockquote, li {
    font-family: Arial, Helvetica, sans-serif
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 24px;
}

.text-24 {
    font-size: 24px;
}

.link-style-reset, a, p, ul, li, figcaption, h1, h2, h3, h4, h5, h6, blockquote {
    color: #fff;
}

body, html {
    background-color: #000;
    margin: 0;
}


/* Explicitly give figure a position so we can use absolute positioning in the figcaption child. */
figure {
    position: relative;
}

/* Home sticky header overlapping with figure. Need to do explicitly give it a z-index so it sits over the figure. */
.header-fixed {
    z-index: 1;
}


button, .button-link {
    padding: 12px 24px;
    background-color: #000;
    color: #fff;
    border-radius: 12px;
    font-size: 16px;
    border: 2px solid #fff;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin: 12px 0;
}

button:hover, .button-link:hover {
    background-color: #64115996;
}

.landing-body {
    height: 100vh;
    display: flex; 
    align-items: center;
    margin: 0px;
}

.dark-bg {
    background-color: #000;
}

.dark-bg-transparent {
    background-color: #00000059;
}

.secondary-bg {
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(132,71,183,1) 19%, rgba(255,150,95,1) 51%, rgba(132,71,183,1) 89%, rgba(0,0,0,1) 100%); 
}
.secondary-bg h1, .secondary-bg h2, .secondary-bg h3, .secondary-bg h4, .secondary-bg h5, .secondary-bg h6, .secondary-bg a, .secondary-bg p, .secondary-bg figcaption, .secondary-bg blockquote {
    color: #000;
}

.secondary-bg-reverse {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 15%, rgba(132,71,183,1) 25%, #ff965f 70%); 
}

.simpson-bg {
    background: url('img/simpson-orion.jpg');
    background-size: cover;
}


.purple-bg {
    background: rgba(132,71,183,1);
}

/* Main section styling */
.landing-main {
    text-align: center;
}

#orion-main {
    background-color: #000000ba;
    width: 400px;
    height: 295px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
    z-index: 1;
    float: right;
}


/* Nav Menu / Header*/
header {
    background-color: #000000ba;
    border-bottom: 1px solid #fff;
}

.main-nav li {
    display: block;
    margin-right: 20px;
}

.main-nav li {
    text-align: center; 
}
  
.main-nav a {
    background-color: #3c134f;
    color: #fff;
    padding: 12px;
    text-decoration: none;
    display: block;
    font-weight: bold;
    border-radius: 12px;
    border: 2px solid #fff;
    max-width: 150px;
    margin: 5px auto;
}
/* Footer */
footer {
    border-top: 1px solid #fff;
    margin-top: 15px;
}


/* Generic styling */
.hide-overflow {
    overflow: hidden;
}

.white-text {
    color: #fff;
}

.black-text {
    color: #000;
}

.orange-text {
    color: #ff965f;
    text-shadow: 0px 3px 0px #600, 0px 16px 10px rgba(74, 0, 0, 0.7), 0px 24px 2px rgba(255, 0, 0, 0.1), 0px 34px 30px rgb(255, 150, 95);
}

.border-radius-24 {
    border-radius: 24px;
}

.pad-around-24 {
    padding: 24px;
}

.nopad-nomargin {
    padding: 0;
    margin: 0;
}

.margin-24 {
    margin: 24px;
}

.flex-align-center {
    display: flex;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
}


.text-center {
    text-align: center;
}

.justify {
    text-align: justify;
}

.flex-grow {
    flex-grow: 1;
}

.max-width-100 {
    max-width: 100%;
}

.vh-100 {
    height: 100vh;
}

.vh-50 {
    height: 50vh;
}

.width-350-automargin {
    width: 350px;
    margin: 0 auto;
}

.clear {
    clear: both;
}


/* Section Styling */
.fullwidth {
    width: 100%;
}

.boxed-section {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.boxed-section-nopad-nomargin {
    padding: 0px;
    max-width: 1200px;
    margin: 0 auto;
}


.boxed-section-small {
    padding: 32px;
    margin: 0 auto;
    max-width: 600px;
}

.orion-section {
    width: 1200px;
    height: 800px;
}

#bg-container {
    background: url("img/avci_takimyildizinin_sekli_gokyuzunde_ok_atan_bir_avciya_benzer.png");
    height: 100%;
    width: 100%;
    position: relative;
}


/* Orion list item shared styles */
.orion-items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0px;
}

.orion-item {
    display: block;
    position: absolute;
}

.orion-item a:hover, .orion-item a:focus {
    background: url("img/Group\ 3.png");
    
}

.orion-item a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Orion Star Chart CSS */
/* Orion individual list items */

.orion-item.i-1 {
    width: 273px;
    height: 302px;
    left: 339px;
    top: 147px;
}

.orion-item.i-1 a {
    background-position-x: -339px;
    background-position-y: -147px;
}

.orion-item.i-2 {
    left: 600px;
    top: 176px;
    height: 250px;
    width: 227px;
}

.orion-item.i-2 a {
    background-position-x: 600px;
    background-position-y: -176px;
}


.orion-item.i-3 {
    left: 809px;
    top: 178px;
    width: 265px;
    height: 300px;
}

.orion-item.i-3 a {
    background-position-x: 391px;
    background-position-y: 622px;
}

.orion-item.i-4 {
    left: 433px;
    top: 472px;
    height: 253px;
    width: 327px;
}

.orion-item.i-4 a {
    background-position-x: 767px;
    background-position-y: 328px;
}



/* Home-Specific */
.orion-quote {
    font-size: 36px;
}

.orion-quote-caption {
    font-size: 24px;
}

.orion-nebula-bg {
    background: url('img/orion-nebula-bg.jpg');
    background-attachment: fixed;   
    background-size: cover;
}


/* Explore specific */

.star-list figure {
    margin: 10px 15px;
}


/* Mobile Specific */

@media (max-width: 767px) {
    .orion-quote {
        font-size: 24px;
        margin: 0px;
    }
}

@media (min-width: 768px) {
    .caption-overlay figcaption {
        position:absolute;
        bottom: 20px;
        background:#000;
        padding: 10px;
        border-radius: 24px;
        width: 85%;
        left: 5%;
      }    
}

@media (max-width: 1199px) {
    .flex-center {
        flex-direction: column;
    }
    .orion-section {
        display: none;
    }
}



/* Desktop Specific */
@media (min-width: 1200px) {

    .orion-section-mobile {
        display: none;
    }

    .header-fixed {
        position: fixed;
    }

    .orion-section-mobile {
        display: none;
    }

    .float-right {
        float: right;
    }
    
    .float-left {
        float: left;
    }

    .flex-left {
        display: flex;
        justify-content: flex-start;
    }
    
    .flex-right {
        display: flex;
        justify-content: flex-end;
    }
    
    .flex-66 {
        flex-basis: 66.6%;
    }

    .flex-33 {
        flex-basis: 33.3%;
    }

    .flex-50 {
        flex-basis:50%;
    }

    .flex-75 {
        flex-basis: 75%;
    }

    .flex-25 {
        flex-basis: 25%;
    }
}


/* Nebula Page Specific */ 
.absolute-bottom-right {
    position:absolute;
    bottom:0px;
    right:0px;
  }
  
  .absolute-top-left {
    position:absolute;
    top: 0px;
    left: 0px;
  }

  .nebula-page-hero {
    background: url("img/nebula-hero.jpg");
    position: relative;
    background-position: center;
  }

   .border-purple {
    border: 4px solid #64115996;
   }

  /* Nebula Grid */
@media (min-width: 1200px) {
  .nebula-grid {
      grid-template-columns: 33% 33% 33%;
      grid-template-rows: auto auto auto;
      display: grid;
  }

  .nebula-grid div {
      overflow: hidden;
  }

  .grid-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    padding: 20px;
    }

    .grid-2 {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .grid-3 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 4;
    }

    .grid-4 {
        grid-column-start: 3;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 4;
        padding: 20px;
    }
}