/* Common Styles */
body
{
    /* background-color: rgb(140, 192, 229); */
    background: rgb(216, 216, 216);
    background: linear-gradient(180deg, rgb(15, 15, 159) 2%, rgba(0, 212, 255, 1) 100%);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
}

h1{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-shadow: 1px 1px 5px white;
}

    h1 a{
        /* color: rgb(216, 216, 216); */
        color: rgb(9, 9, 121);
        font-style: italic;
        /* text-decoration: none; */
    }
    h1 a:hover{
        transform: scale(1.03, 1.03);
    }

a{
    text-decoration: none;
}

label{
    color: rgb(216, 216, 216);
}

header{
    background: rgb(216, 216, 216);
    background: linear-gradient(180deg, rgb(216, 216, 216) 25%, rgb(169, 169, 169) 100%);
    margin: 0;
    padding: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid black;
    /* border: 4px solid black; */
}

.secondary-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;
    margin-left: 10px;
}

.secondary-header h2{
    color: white;
    margin: 0;
}

.admin_dash_nav{
    background-color: rgb(216, 216, 216);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    padding: 0;
}
    .admin_dash_nav a{
        color: lightblue;
    }
    .admin_dash_nav a:hover{
    color: black;
}

#search_div{
    display: flex;
    justify-content: flex-end;
    margin: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
}





/* List page */

.list_img_div{
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.list_img{
    box-shadow: 4px 4px 6px black;
    margin-right: 10px;
}

#video_game_list_main{
    display: flex;
    flex-direction: row;
}

#categories_aside{
    display: flex;
    min-width: 200px;
    position: absolute;
    z-index: 2;
}

.aside_div{
    display: flex;
    flex-direction: column;
    /* background-color: rgb(216, 216, 216); */
    text-align: start;
    /* border: 2px solid black; */
}
.aside_div a{
    background: rgb(216, 216, 216);
    background: linear-gradient(180deg, rgb(216, 216, 216) 45%, rgb(169, 169, 169) 100%);
    color: rgb(9, 9, 121);
    text-shadow:  0 0 2px white;
    border-bottom: 1px solid black;
    padding-left: 4px;
    padding-right: 8px;
    padding-top: 1px;
    border-radius: 0px 25px 25px 0px;
    box-shadow: 0px 0px 6px black;;
    }
    .aside_div a:hover{
        transform: scale(1.03, 1.03);
    }
    
#list_of_games{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* right: 60px; */
    flex: 1;
    z-index: 1;
}

.list_of_games_secondary_div{
    margin: 0;
    /* background: rgb(216, 216, 216); */
}

.video_game_list{
    display: flex;
    flex-direction: row;
    justify-self: center;
    /* border: 3px dotted black; */
    padding: 12px;
    /* margin: 8px 8px 8px 12px; */
    max-width: 600px;
    min-width: 600px;
    border-top: 1px solid rgb(216, 216, 216);
    border-right: 1px solid rgb(216, 216, 216);
    border-bottom: 1px solid rgb(216, 216, 216);
    border-left: 1px solid rgb(216, 216, 216);
    /* box-shadow: 6px 6px rgb(216, 216, 216), -6px 6px rgb(216, 216, 216); */
    box-shadow: 1px 1px 4px rgb(14, 14, 14);
    background: rgb(216, 216, 216);
    background: linear-gradient(180deg, rgb(216, 216, 216) 45%, rgb(169, 169, 169) 100%);
    border-radius: 0px 15px 15px 0px;
}

.video_game_list:hover{
    transform: scale(1.03, 1.03);
}

.video_game_list_words{
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
    .video_game_list_words h2, .video_game_list_words p, .video_game_list_words small{
        color: rgb(9, 9, 121);
        /* font-family: Georgia, 'Times New Roman', Times, serif; */
        text-shadow: 1px 1px white, -1px -1px white;
    }
    .list_title{
        color: rgba(9, 9, 121);
        text-decoration: none;
    }

#page_arrow_and_info{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
    #page_arrow_and_info p{
        margin-left: 10px;
    }

#left_button, #right_button{
    height: 25px;
    width: 30px;
}

.page_links{
    padding: 0px 5px 0px 5px;
    font-size: large;
    border: 2px solid black;
    margin-right: 5px;
}

.pages_traversal_div{
    color: white;
}
.pages_traversal_div p{
    text-align: center;
}

@media(max-width: 1050px){
    #categories_aside{
        position: relative;
    }

    .video_game_list{
        min-width: 200px;
    }

    .secondary-header{
        display: flex;
        flex-direction: column;
        align-self: center;
        margin-bottom: 20px;
    }
    
    form{
        margin-bottom: 20px;
    }
}




/* Entry Page */
@keyframes coverAnimation {
    0%{transform: perspective(350px) rotateY(0deg);}
    25%{transform: perspective(350px) rotateY(-35deg);}
    75%{transform: perspective(350px) rotateY(35deg);}
    100%{transform: perspective(350px) rotateY(0deg);}
}

.secondary-header_entry{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 20px;
}

.entry_information{
    background: rgb(216, 216, 216);
    background: linear-gradient(180deg, rgb(216, 216, 216) 45%, rgb(169, 169, 169) 100%);
    padding-bottom: 20px;
    box-shadow: 0px 2px 8px black;
}

.entry_title_and_release{
    display: flex;
    justify-content: center;
    color: rgb(9, 9, 121);
    text-shadow: 1px 1px white, -1px -1px white; 
    padding: 4px;
    border-bottom: 2px solid rgb(9, 9, 121);
}
    .entry_title_and_release small{
        text-decoration: underline;
        font-size: medium;
    }

.img_div_entry{
    display: flex;
    justify-content: center;
    align-items:flex-end;
}
.entry_img{
    margin: 20px;
    box-shadow: 3px 4px 6px black, -3px 4px 6px black;
}
.entry_img:hover{
    animation-name: coverAnimation;
    animation-duration: 5s;
}
.img_placeholder{
    width: 320px;
    height: 420px;
    background-image: url("images/placeholder.png");
    background-size: contain;
    display: flex;
}

.esrb_div{
    margin-bottom: 10px;
}

.entries_tables{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 20px;
    /* background: rgb(9, 9, 121, 0.2); */
}

.regions_table{
    color: rgb(9, 9, 121);
    padding: 5px;
    /* border-radius: 25px; */
}
    .regions_table tr:nth-child(odd){
        background: rgb(9, 9, 121, 0.2);
    }
    .regions_table td, .regions_table tr{
        /* border: 2px solid rgb(9, 9, 121); */
        margin: 0;
        padding: 4px;
    } 

.consoles_table{
    color: rgb(9, 9, 121);
    padding: 5px;
}
    .consoles_table td{
        display: inline-block;
    }
    .consoles_table td:nth-child(odd){
        color: black;
    }
    .consoles_table tr:nth-child(odd){
        background: rgb(9, 9, 121, 0.2);
    }
    .consoles_table td, .consoles_table tr{
        padding-right: 4px;
    } 

.esrb_rating_img{
    width: 80px;
}

.gameplay_video_div{
    display: flex;
    justify-content: center;
    padding: 20px 0 20px 0;
    margin-bottom: 120px;
}
    .gameplay_video_div iframe{
        box-shadow: 5px 5px 5px black, -5px 5px 5px black;
    }

#comments_div{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(216, 216, 216);
    background: linear-gradient(180deg, rgb(216, 216, 216) 45%, rgb(169, 169, 169) 100%);
}

    #comments_div form{
        width: 40vw;
        /* border: 2px solid black; */
        /* box-shadow: 0px 2px 4px black; */
        padding: 20px;
        margin-top: 60px;
        /* margin-bottom: 60px; */
    }
    #comments_div .comments_form{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
    }
        #comments_div form h2{
            text-align: center;
            color: rgb(9, 9, 121);
        }
        #comments_div form label{
            text-align: start;
            color: rgb(9, 9, 121);
        }
        #comments_div form textarea{
            resize: none;
        }

    #comments_div .commenter_name_div{
        display: flex;
        flex-direction: column;
    }
        #comments_div .commenter_name_div input{
            border-radius: 10px;
        }
        #comments_div .commenter_name_div #commenter_name{
            margin-bottom: 10px;
        }
    #comments_div .comment_div{
        display: flex;
        flex-direction: column;
    }
        #comments_div .comment_div #comment{
            border-radius: 10px;
        }
    #comments_div .comment_submit_button_div{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 10vw;
    }
        #comments_div .comment_submit_button_div input{
        display: flex;
        flex-direction: column;
        align-content: flex-end;
    }

.comments_form{
    color: rgb(9, 9, 121);
}

.comments_section{
    width: 40vw;
}
    .comments_section h3{
        color: rgb(9, 9, 121);
        margin-bottom: 0;
        border-bottom: 2px solid rgb(9, 9, 121);
    }

.single_comment{
    /* background: rgb(216, 216, 216);
    background: linear-gradient(180deg, rgb(216, 216, 216) 45%, rgb(169, 169, 169) 100%); */
    /* box-shadow: 0px 0px 4px black; */
    padding: 2px;
    color: rgb(9, 9, 121);
}

.single_comment:nth-child(odd){
    background: rgb(9, 9, 121, 0.2);
}


@media(max-width: 1050px){
    .entries_tables{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .regions_table{
        margin-top: 20px;
    }

    .consoles_table{
        margin-top: 40px;
    }
}






/* Admin Dashboard */
.admin_dashboard{
    background: rgb(140, 192, 229);
}

.admin_dashboard header{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.admin_dashboard header h4{
    color: white;
}

.sorting_div{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.sorting_div a{
    margin-right: 6px;
}

#new_entry_link{
    background-color: #f1f0f0;
    color: black;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
#new_entry_link:hover{
    box-shadow: 4px 1px black, -4px -1px black;
    /* box-shadow: 4px -4px black; */
}

.admin_main{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
    .admin_game_list{
        display: flex;
        flex-direction: column;
    }
    .admin_main aside{
        display: flex;
        flex-direction: column;
    }


/* GAME STYLING */

.minigame_header{
    margin-bottom: 80px;
}

.game_div{
    display: flex;
    flex-direction: column;
    align-items: center;
}
canvas {
    display: flex;
    flex-direction: column;
    align-self: center;
    /* width: 600px;
    height: 300px; */
    width: 800px;
    height: 400px;
    border: 3px solid rgb(216, 216, 216);;
    /* background-image: url(uploads/250px-Sapphire_EN_boxart.png); */
    background: rgb(216, 216, 216);
    background: linear-gradient(180deg, rgb(97, 156, 97) 45%, rgb(159, 222, 143) 100%);
}

#game_score_div{
    color: azure;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game_button_div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.game_button_div_down{
    margin-bottom: 20px;
}