/*General To Do 
    -Add a link hover effect
    -Work on the backend
    -Learn GitHub 
    -make it responsive 
    -have a link when you click on the clothes you can buy it
    -make it orgnized 
    -make more web pages 
    -add some animations 
    -finish the footer
    -find a product people actually want to buy
*/

:root{
    --pager-sidewidth:130px
}


/* Pager */
/*FIXME 
    - line Space makes it look off center 
    - add an animation were when you scroll it changes the item
    - add media height difference 
    - touch up to make sure everything looks standard 
*/
header{
    position: sticky;
    top:0px;
    z-index: 10;
}

#pager{
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: visible;
    top:0px;
    background-color: white;
    /*To center something with uneven widths you have to make it so that 
    flex items on the right and left have the same width*/
}

#logo{
  
   /* border: 3px solid firebrick; */
   width: var(--pager-sidewidth);
}

#picture{
    text-align: center;
    border: 3px solid black;
    display: inline-block;
    padding:10px;
}

#title{
   
    font-family:'Courier New', Courier, monospace;
    letter-spacing: 15px;  /*THE LETTER SPACING MAKES IT LOOK UNCENTERED*/
    
}

#search{
    text-align: center;
    /* border: 3px solid firebrick; */

}

#signin{
    display: flex; 
    justify-content: right;
    width: var(--pager-sidewidth);
    gap:10px;
    /* border: 3px solid firebrick; */
    
}
#signin img{
    
    width: 40px;
   
}

    /*Handling  dropdown*/

nav ul{
    padding: 0;
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
   
}

nav li{  
    
    text-align: center;
    justify-content: center;
    font-family:'Courier New', Courier, monospace;
    font-size: 20px;
    margin-right: 30px;
    /* position: relative; */
}

nav a{
    color: #000;
    text-decoration: none;

}

nav a:hover{

    text-decoration:underline;
}


/* #dropdownbackground{
    position:absolute;
    top:1000%;
    color:green;
    background-color:bisque ;
    width:100%;
    display: none;
} */


/* 
#mission:hover #dropdownbackground{
    display:flex;
    color:pink;
    z-index: 100;
} */



/* #dropdownmission{
    display: none;
    position: absolute;
    background-color: aqua;
    border: 3px solid black;
    z-index: 10;

} */

.topicsandimgs{
    /* position: relative; */
    height: 100%;
    border:1px solid pink   ;

}

.topicsandimgs img {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3; /*THIS RIGHT Hurl(http://127.0.0.1:3000/Clothing.html)ERE SOLVES SO MANY PROBLEMS*/
  

}


.dropdownselection{
    display: flex;
    flex-direction: column;
    align-self: flex-start;
}

.dropdownmenu ul{
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0%;
    height: 100%;
    
}
.dropdownmenu li h3{
    
    width: 100%;
    text-align: center;
}
.dropdownmenu li{
    
    width: 100%;
    
}

.dropdownselection{
    width: 100%;
    /* border:1px solid saddlebrown; */
    
}

.dropdownmenu{
    display: none;

    position: absolute;
    padding: 0;
    gap: 20px;
    align-items: center;
    background-color: white;
    top: 100%; /* appear just below the parent */
    left: 0;  
    gap: 0;
    background: white;
    /* border: 1px solid black; */
    width: 100%;
    z-index: 3;
    
}

#Men:hover .dropdownmenu{ 
    display: flex;
}

#Women:hover .dropdownmenu{ 
    display: flex;
}

#Ourmission:hover .dropdownmenu {
  display: flex;
}

#Bible:hover .dropdownmenu{
   display: flex;
}

/* Video thats playing*/
/*FIXME 
    - The text in the center needs to be responisve and centered
    - make the text look better 
*/

#titlecontent{
    text-align: center; 
    position: relative; 
}
#titlevideo{
    
    width: 100%; 
   
}
#titletext {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* shifts back by half its size */
    background: tomato;
    padding: 20px;
    font-family:'Courier New', Courier, monospace;
    font-size: 30px;
    color:white
}

/*Discovery*/
/*FIXME: */
#darelabel{
    font-family:'Courier New', Courier, monospace;
    font-size: 30px;
    text-align: center;
    margin: 70px;
}
#discoveryitems{
    display: grid;
  
    gap: 1rem;
    grid-auto-columns: 1fr;
    width: 90%;
    grid-template-columns: 1fr 1fr 1fr 1.7fr;
    grid-template-rows: .5fr 1fr ;
    /*When you are adjusting the grid items or cells there are one of two 
    two ways you can do it. You can either adjust the parent by adjusting
    grid-template-columns and rows or you can adjust the child by adjusting
    it's height and width by through 100% or px. Remember there could be a
    min width for your grid items if it is a image or video or something else
    in that case refer to below. */
    /*Every img has a min width 
    when trying to adjust the height  or width in a image there could be a minumn height 
    or width to it. In order to by pass this you need to use minmax(0, .855)
    You are telling your computer that you are ok the width being 0
    */

    grid-template-areas: 'one two three four'
                         'five five five four';
     margin: 0 auto;    
}
#discoveryitems img{
   border-radius: 30px;
   
   height: 100%;

    width: 100%;
   /* box-shadow: 10px black; */
}

#discoveryitems > :nth-child(1){
 
    grid-area: one; 
    
}

#discoveryitems > :nth-child(2){
    grid-area: two;

}
#discoveryitems > :nth-child(3){
    grid-area: three; 

}
#discoveryitems > :nth-child(4){  
    
    grid-area: four; 
    
    
}
#discoveryitems> :nth-child(5){
    grid-area: five; 
    
}  
/* #discoveryitems:nth-child(6){
    grid-area: six; 
} */

/*mission*/
#mission{
    position:relative;

}
#mission img{
    width: 100%;

}
.missionwords{
    position:absolute;
    z-index: 2;
    left: 50%;
    bottom:10%;
    background: tomato;
    padding: 20px;
    font-family:'Courier New', Courier, monospace;
    font-size: 20px;
    color:white
}

/*clothing items*/
#clothingitems{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2,1fr);
    width : 90%;
    margin:0 auto;
}

#clothingitems img{
    width: 100%;
    border-radius: 30px;
}

.clothingdetails{
    display: flex;
    flex-direction: column;
    gap:10px;
    font-family:'Courier New', Courier, monospace;
    
    
}
.clothingdetails span{
    
}

.clothingdetails h5{
    font-size: 20px;
    margin: 0;
    background-color: tomato;
    color:white;
    text-align: center;
}


.clothingdetails h4{
    margin: 0;
    font-size: 15px;
}

.clothingdetails h3{
    margin: 0;
    font-size: 13px;
}

#ragelabel{
    text-align: center;
    font-family:'Courier New', Courier, monospace;
    font-size: 25px;
}