/*set all elements to sero margin and passing so i can control them*/

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    /*borders box so that padding and borders are included in  height and width measurements*/

}

#opener{
    width: 100%;
    height: 100vh; /*veiwport height, the united for the height of the browser*/
    background-image: url(moon-images/stars.jpg);
    background-size: cover;
    color:white;
background-repeat: repeat;
background-position: center;
overflow: hidden;
position:relative;/*the part that goes outside the browser*/
}

.quote{
    width:60%; /*can also use 500px*/

    position: relative;
    top:35%; /*or you could say 15%*/
    left:100px; /* or 10% percentage adjust better*/
    z-index: 200;
}

h2{
    font-size: 40px;
    margin-bottom: 25px;
     font-family: "Kalnia", serif;
        font-optical-sizing: auto;
        font-weight: 100;
        font-style: normal;
        font-variation-settings:
          "wdth" 100;
}
h3{
    font-size: 18px;
    font-family: "Inclusive Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
}
a{
    color:yellow;
    text-decoration: none;

}
a:hover{
    color:orange;
    text-decoration: underline;
}
.redmoon{
    background-image: url(moon-images/moon-red.png);
    width:600px;
    height:600px;
    position: absolute;
    right: -100px;
    bottom: -50px;
    z-index: 0;
    z-index:10;
    background-size: contain;


}
.bluemoon{
    background-image:url(moon-images/moon-blue.png);
    width:400px;
    height:400px;
    background-size: contain;
    position: absolute;
    top:100px;
    left:-100px;
    z-index:9;

}
.graymoon{
    background-image: url(moon-images/moon-bw.png);
    width: 100px;
    height:100px;
    background-size: contain;
    position: absolute;
    left:30px;
    bottom:-50px;
    z-index: 20;

}
/*making colums and using flex bos to make one-dimensinal layouts*/

.flex-area
{
    display: flex;
    flex-direction: row;
    justify-content: center;


}
.flexitem{
    width:33.3%;
    margin:50px;
}

ul{
    list-style-type: none;
}
li{
    font-size: 20px;
    font-family: "Inclusive Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    border-bottom: 1px dotted gray;
    padding: 10px 0 10px 0;
    color: white;
  

}
span{
    color:plum;
    Font-style: italic;
    display: block;
    font-size: 14px;

}

h4{
    font-family: "Kalnia", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
      font-size: 30px;
      margin-bottom: 30px;
    color:white;
}

#list-section{
    background-image:url(moon-images/galaxy.jpg);
    background-size: cover;
    padding: 100px;
    background-position: bottom;
   padding:100px 200px;
}
/*video section*/

#video-section{
    background-color: black;
    padding: 200px 0;
   
}
iframe{
    margin:0 50px;

}
/*header*/

header{ 
    text-align:center;

    position: fixed;
    top:0;
    left:0;
    z-index:99999;
width:100%;


}
h1{
 
    color: white;
    font-family: "Kalnia", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
      font-size: 60px;
      
}
nav ul li{
    border:none;
    text-transform: uppercase;
    font-size: 14px;
    display:inline-block;

}
nav a{
    background-color:yellow;
    border: 1px solid gray;
    color:black;
    padding:5px 10px;
margin: 0 10px;

}

nav a:hover{
    background-color:black;
    color:yellow;
    border: 1px solid yellow;
    text-decoration: none;


}
.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    }
    
    .div1 { grid-area: 1 / 1 / 4 / 2; 
        background-image: url(moon-images/phases-all.jpg);
        height:600px;
        width:600px;
    }
    /* grid row start/grid colum start/gridrow end/grid colum end/*/
    .div2 { grid-area: 1 / 2 / 2 / 3;background-image:url(moon-images/phase1.jpg); height: 200px;background-size: contain;background-repeat: no-repeat;}
    .div3 { grid-area: 1 / 3 / 2 / 4;background-image:url(moon-images/phase2.jpg);height: 200px;background-size: contain; }
    .div4 { grid-area: 1 / 4 / 2 / 5;background-image:url(moon-images/phase3.jpg);height: 200px;background-size: contain;}
    .div5 { grid-area: 2 / 2 / 3 / 3;background-image:url(moon-images/phase4.jpg);height: 200px;background-size: contain;}
    .div6 { grid-area: 2 / 3 / 3 / 4;background-image:url(moon-images/phase5.jpg); height: 200px;background-size: contain;}
    .div7 { grid-area: 2 / 4 / 3 / 5; background-image:url(moon-images/phase6.jpg);height: 200px;background-size: contain;}
    .div8 { grid-area: 3 / 2 / 4 / 3;background-image:url(moon-images/phase7.jpg);height: 200px; background-size: contain;}
    .div9 { grid-area: 3 / 3 / 4 / 4; background-image:url(moon-images/phase8.jpg);height: 200px;background-size: contain;}


.parent> div{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color:plum;
    font-size: 14px;
    font-family: "Inclusive Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;   
     text-align: center;
    text-shadow: 1px 1px black;

    /*use these 3 propeties to cneter horisonitally and vertically*/
    display: flex;
    align-items: center;
    justify-content: center;
}
#phase-section{ 

    background-color: black;

padding:100px 100px;
}

/*poem section*/
#Poem-section{
text-align: center;
color:aliceblue;
background-color: black;
padding:100px 0;
background-image: url(moon-images/moon-blue.png);
background-position: top right;
position: relative;

}
#Poem-section h2 {
    font-size: 50px;
    font-weight: 300px;
    margin: 0;
}
#Poem-section h3{
    font-size:14px;
    margin-bottom: 50px;

}
#Poem-section p {
font-size: 28px;
font-family: "Inclusive Sans", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.7;
}
.button{
font-size: 16px;
font-family: "Inclusive Sans", sans-serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
background-color: black;
border: 1px solid gray;
padding:20px;
margin: 50px auto 0 auto;
display: block;
width:250px;
border-radius: 15px;
box-shadow: 5px 5px yellow;

}

.button:hover{
    text-decoration: none;
    background-color: gray;
    color: white;
    box-shadow: 1px 1px yellow;
    transform: translate(2px, 2px);


}
.played{
    background-color: blue;
    color:lightcoral;
    display: inline-block;
    padding:0 10px;
    font-size: 20px;
    font-style:normal;
    transition: all 1s;

}
.played:hover{

    transform: translate(20px,0);
    cursor:crosshair;
    opacity: .5;
    color: red;


 
}
.laughing{
    
    background-color: pink;
    color:blue;
    display: inline-block;
    padding:0 10px;
    font-size: 20px;
    font-style:normal;
    transition: all 1s;

}
.laughing:hover{
    transform:rotate(90deg);
    cursor:crosshair;
    opacity: .5;
    color:red;
    

}

.hid{
    background-color: lightskyblue;
    color:lightcyan;
    display: inline-block;
    padding:0 10px;
    font-size: 20px;
    font-style:normal;
    transition: all 1s;
}
.hid:hover{
    cursor:crosshair;
    opacity:0;
    color:red;
    transform:scale(0.5,0.5);
}
.tinymoon{
    background-color: lightskyblue;
    color:lightcyan;
    display: inline-block;
    padding:0 10px;
    font-size: 20px;
    font-style:normal;
    transition: all 1s;

}
.tinymoon:hover{
    color:red;


}
.resizered{
    width:100px;
    height:100px;
    position: absolute;
    top:20%;
    left:50%;
    display: none;

}
.tinymoon:hover~.resizered{
    display:block;

}
#animated-section{

    width:100%;
    height:100vh;
    overflow: hidden;
    position: relative;
    background-image:url(moon-images/stars.jpg);
    background-size: cover;
    animation-name:movestars;
    animation-duration: 120s;
    animation-timing-function:linear ;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;


}
@keyframes movestars{
    0%{
    background-postion: 0,0;


    }
    100%{
background-position: 6000px,0;
    }
}
.moon1{
    width:400px;
    height:400px;
    position: absolute;
    top:0;
    left:0;
    animation-name: movemoon;
    animation-duration: 5s;
    animation-timing-function:linear ;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    z-index: 999;


}
@keyframes movemoon {
0%{
    top:0;
    left:0;
}
50%{
    top: 500px;
    left:0;

}
100%{
    top:0%;
    left:1000px;
}
}


.moon2{
    width:200px;
    height:200px;
    position:absolute;
    bottom:50px;
    right:50px;
    animation-name: rotatemoon;
    animation-duration: 4s;
    animation-timing-function:linear ;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    z-index: 990;

}
@keyframes rotatemoon{
    0%{
        bottom:50px;
        right:50;
        opacity:0;
        transform: rotate(0deg) scale(0,0);

    }
    100%{
        bottom:90%;
        right:90%;
        opacity:1;
        transform: rotate(360deg)scale(2,2);




    }
}
.moon3{
   width:600px;
    height:600px;
    position:absolute;
    top:10%
    bottom:10%;
    z-index: 900;
    animation-name: movemoon;
    animation-duration: 15s;
    animation-timing-function:linear ;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    z-index: 999;
    /*  ^long hand version 
    shorhanf version below
    
    animation: movemoon 15s linear 0s inifinte alternate-reverse;
*/

}


@media screen and (max-width:1200px){
   #list-section{
   padding:100px 80px;
   }
.div1{
    width: 400px;
}



}
@media screen and (max-width:700px){
    .flex-area{
flex-direction: column;

    }
    .flexitem{
        width:90%;
    }
    iframe{
        margin:50px 0;
        width:80%;

    }
    .parent{
        display: block;
    }
 
div1{
    width:100%;
 }   
 h2 {
    font-size: 6vw;
 }
 .quote {
    width:80%;

 }
 h1{
    font-size: 10vw;
 }
 nav ul il {
font-size: 10px;
 }
 .redmoon{
    display: none;
 }
 a {
    color: pink;
 }
}