*,
*::before,
*::after {
    box-sizing: border-box;
    /* border: solid red;  */
}

nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

nav li {
    border-style: outset;
    margin: 0.6em;
    list-style: none;

}

nav li :hover {
    border: solid rgb(133, 124, 216); 
    border-style:none;
    background-color: rgb(104, 190, 227);
    font-style: italic;
    font-size: 1.5em;
    transition-duration: 3s;
}

h1{
    text-align: center;
}

.offpage { 
    position: absolute;
    left: -1000px;

}

.offpage:focus{
    position: static
}

/* index-page */



.index-page {     
    background-image: url("../img/matrix-background.jpeg");
    background-color: rgb(183, 238, 239);

}

 
.index-page h1 {
    color: rgb(37, 72, 197);
    font-size: 9em;     
            
    
}

.left {
    text-align:left; 
    position: static;
    margin-left: 3em; 
}
.right {
    text-align: right; 
    position: static;
    

    margin-right: 4em; 

}
 
.index-page h2 {
    color: rgb(100, 100, 100);
    font-size: 2.5em;  
    font-family: 'Arial', sans-serif;
    text-align: center; 
    margin: 0 5em; 
}


.index-page h2 a:hover {
    font-size: 1.2em;
    font-style: italic;
    /* border: 2px solid rgb(47, 89, 194); */
    transition-duration: 1s;
}




/* about-page */



.about-page button {
    font-size: 1.5em; 
    cursor: pointer; 
}
 
.about-page nav {
    font-size: 1.5em; 

}






/* BOOKS PAGE */

.books-page main{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
    padding-inline-start: 0px;
}




.books-page main div{ 
    flex-direction: column;
    text-align: center; 
    flex: 1, 1, auto; 
    opacity: 50%;
 
}


.books-page ul div p{
    align-self:center;
    border: none;
    
}

.books-page main div:hover{
    border: 6px solid rgb(133, 124, 216); 
    opacity: 100%; 
    /* padding: 1px; */
    transition-duration: 1s;
    transition-delay: 0.5s;
    border-radius: 20px;
}



/* 
.books-page ul div:nth-child(odd){
    border: black thick
     
} */

 




/* FOOD PAGE */

.food-page main ul {
    display: grid; 
    grid-template-columns: 50% 50%;
    justify-content:center;



}

.food-page main ul li {
    list-style: none; 
    border: 6px;
}

.food-page main ul li img:nth-child(odd) {
    border-radius: 50%;

}





.food-page img{ 
    width: 85%; 

}

/* .food-page main ul li:nth-child(even){
    border: solid rgb(154, 147, 212); 
} */



/* MOVIES PAGE */












/*PEOPLE PAGE */