@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap');



/* Heading and Main Image */
body {
    background: url("../images/milkyway.jpeg");
    background-size: cover;
}

#title {
    text-align: center;
    font-size: 4rem;
    letter-spacing: 5px;
    color: #fff;
}

/* Hero Image */
#hero-outer {
    height: 37.5rem;
    width: 100%;
    overflow: hidden;
    border: solid 2px #fff;
}

#hero-image {
    height: 37.5rem;
    width: 100%;
    background: url("../images/solar-system.jpeg") no-repeat center center;
}

#cover-text {
    color: #fff;
    font-size: 1.5rem;
    font-family: 'Teko', sans-serif;
    text-transform: uppercase;
    width: 25rem;
    height: 25rem;
    padding-top: 1.25rem;
    padding-left:0.625rem;
    top: 9.375rem;
    right: 3.125rem;
    position: absolute;
}

/* Celestial Navigation */

#celestial-navs {
    height:auto;
    background-size: cover;
}
#celestial-navs h2 {
    text-align: center;
    color:#fff;
}
#celestial-navs img {
    height: auto;
    width: 90%;
    border: solid 1px #fff;
    padding: 2px;
    margin: 2px;   

}
.row {
    width: 100%;
    height: 33%;
    clear:both;  
}
.row>div {
    width: 33%;
    height: auto;
    text-align:center;
    display: inline-block;
}
.column p {
    font-size: 3em;
    margin: 0px;
    position: relative;    
}

a:link {
    color:#fff;
    text-decoration: none;
}
a:visited {
    color:#fff;
}

/* footer */

footer {
    height: 9.375rem;
}
.social-networks {
    text-align: center;
}
.social-networks > li {
    display: inline;
    color: black;
}
.social-networks i {
    font-size: 2rem;
    margin: 1%;
    padding: 1% 5%;
    color: #fff;
}

/* Nav Pages */

#planet-title {
    float: right;
    font-size: 4rem;
    margin-right: 3.125rem;
    margin-top: 5px;
    color: #fff;   
}
#menu {
    font-size: 1rem;
    letter-spacing: 2px; 
    font-weight: 900; 
    width: 33%;
    display: block;  
}
#menu p {
    list-style-type: none;
    text-transform:uppercase; 
    position: fixed;

}
#menu a {
    color:#CC5500; 
    text-decoration: solid;
}

#planet-hero-image>img {
    margin-left: 33%;
    margin-top: 15%;
    height: auto;
    width: 33%;
    border: solid 2px #fff;    
}

/* Planet Information */

#planet-info {
    height: 100%;
    width: 100%;
}
#planet-info h2 {
    color: #fff;
    text-align: center;
}
#info-head {
    text-align: center;
    font-size: 3rem;
}
#info-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    border: 1px black solid;
    margin: 0 auto;   
}
.info-div {
    width: 33%;
    height: 82rem;
    border: solid 1px #fff;
    background-color: rgba(51,102,153,.6)
}

.info-div h2 {
    color: #fff;
    font-size: 2rem;
    font-family: 'Teko', sans-serif;
    letter-spacing: 4px;
}
#center-about img {
    height: auto;
    width: 100%;
      
}
li {
    color: #fff;
    font-size: 2rem;
    font-family: 'Teko', sans-serif;
}



/* media quiries */

@media screen and (max-width:830px) {

    /* index.html */
    #title {
        text-align: center;
        font-size: 4rem;
        letter-spacing: 2px;
        color: #fff;
    }
       
    /* Celestial Navigation */

#celestial-navs img {
    height: auto;
    width: 90%;
    border: solid 1px #fff;
    padding: 2px;
    margin: 2px;   
}
.row {
    width: 100%;
    height: 33%;
    clear:both;  
}
.row>div {
    width: 100%;
    height: auto;
    text-align:center;   
}
}

  /* Home Page - header */

@media screen and (max-width:530px) {

    #title {
    text-align: center;
    font-size: 3rem;
    letter-spacing: 3px;
    color: #fff;
    }
    #cover-text {
    color: #fff;
    font-size: 1.1rem;
    font-family: 'Teko', sans-serif;
    text-transform: uppercase;
    width: 15rem;
    height: 20rem;
    padding-top: 1.25rem;
    padding-left:0.625rem;
    top: 15.375rem;
    left: 2.125rem;
    position: absolute;
}
}

/* Nav Pages */
@media screen and (max-width:1200px) {
    /* For medium to large screens */

    .info-div {
        width: 33%;
        height: 65rem;
        border: solid 1px #fff;
        background-color: rgba(51,102,153,.6)
    }
    
    li {
        color: #fff; 
        font-size: 1.5rem;
        font-family: 'Teko', sans-serif;
    }
}
@media screen and (max-width:940px) {
    /* For smaller screens */

    #menu {
        font-size: 0.6rem;
        letter-spacing: 1px; 
        font-weight: 900; 
        width: 33%;
        display: block;  
    }

    #info-container {
        display: block;
    }
    .info-div {
        width: 100%;
        height: 100%;
    }
    #center-about {
        width: 100%;
        text-align: center;
    }
    #center-about img{
        display: inline-block;
        height: 100%;
        width: 30%;
        margin: 0;
    }
}
@media screen and (max-width:700px) {

    #planet-title {
        float: right;
        font-size: 2.5rem;
        margin-right: 2.225rem;
        margin-top: 5px;
        color: #fff;   
    }
    #menu {
        font-size: 0.6rem;
        letter-spacing: 1px;    
    }  
}

@media screen and (max-width:550px) {

    #planet-title {
        float: right;
        font-size: 1.6rem;
        margin-right: 0.5rem;
        margin-top: 5px;
        color: #fff;   
    }
    #menu {
        font-size: 0.6rem;
        letter-spacing: 0.5px;    
    }  
    li {
        color:#fff; 
        font-size: 0.8rem;
        font-family: 'Teko', sans-serif;
    }
}