*{
    margin: 0px;
    padding: 0px;
}

:root{
    scrollbar-color: #d1d1d180 #2c2c2c;
    scroll-behavior: smooth;
    scrollbar-width: auto;
}

body{
    height: 100%;
    background: #2c2c2c;
    background-attachment: fixed;
}

header{
    display: flex;
    vertical-align: middle;
    align-items:center;
    justify-content: space-between;
    height: 5vw;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);    
}

footer{
    display: flex;
    position:fixed;
    bottom: 0;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: column;
    align-items:center;
    justify-content: space-around;
    height: 2.5vw;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}

#header_btns{
    display: flex;
    flex-wrap: wrap;
    /* padding: 50px; */
}

#header_btns > * {
        background-color:#444444;
        border-radius: 5px;
        margin: 5px;
        border: none;
}

#container{
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 75vh;
}

#btnList{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 36vw;
}

.character_btn{
    /* margin-left:5px ; */
    display: flex;
    width: fit-content;
    height: fit-content;
    font-family: Bebas;
}

.character_btn:hover{
    cursor: pointer;
    outline: solid;
    outline-color: #999;
    outline-width: 2px;
}

#char_mugshot{
    width: fit-content;
}

p, a{
    font-family: Bebas;
    text-align: center;
}

.a_main_menu{
    padding: 0px; 
    border: none;
    text-decoration: none;
    font-size: 27px;
}

a{
    margin: 5px;
    color: white;
    text-decoration: none;
    font-size: 27px;
}

.a_credit{
border: none;
border-radius: 0;
color: white;
background-color: transparent;
text-decoration: none;
}

.a_credit:hover{
    font-size: 30px;
    color: #c0c0c0;
}

#div_credit{
    display: flex;
    flex-direction: column;
    padding: 5px;
    align-items: center;
    text-align: center;
}

/*this is for Character Move List directly*/

@font-face {
    font-family: Bebas;
    src: url(bebas_regular.ttf);
}

@font-face {
    font-family: Tarrget;
    src: url(tarrgetchrome.ttf);
}

h1, h2, h3, h4{
    font-family: bebas;
    display: flex;
    width: fit-content;
    height: fit-content;
    color: #626262;
    text-shadow: 5px 5px 3px #141414;
    padding: 15px;
}

#char_cr{
    display: flex;
    height: 12vh;
    width: 13vh;
    margin-left: 50px;
}

#char_cr_name{
    display: flex;
    position: absolute;
    margin-left: 5vw;
    font-family: Tarrget;
    color: transparent;
    background-image: linear-gradient(45deg,#999 5%,#fff 10%,#ccc 30%,#ddd 50%,#ccc 70%,#fff 80%,#999 95%);
    background-clip: text;
    font-size: 75px;
    letter-spacing: 10px;
    
}

img{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: bebas;
    font-size: 35px;
    padding: 2px;
}

#card_container{
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

#move_cards{
    display: flex;
    flex-wrap: wrap;
    color: white;
    justify-content: center;
    text-align: center;
    width: 90%;
}


.move_name{
    display: flex;
    width: fit-content;
    font-size: 25px;
}

#key_div{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    width: 100%;
}

.keys_img_div{
    display: flex;
    width: fit-content;
}

.move_card{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
    flex-direction: column;
    margin: 15px 30px 15px 30px;
    border-radius: 25px;
    transition-property: transform;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}
    
.move_card:hover{
    filter: drop-shadow(0.5rem 0.5rem 10px rgba(255, 255, 255, 0.350));
    transform: scale(1.05);
    cursor: pointer;
}

.card_placeholder{
    display: flex;
    width: 640px;
    height: 360px;
    padding: 5px;
}

.move_main_info{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 25PX;
}

.move_main_info_down, .move_main_info_up{
    display: flex;
    width: 90%;
}

/*this is for everything glossary*/

.glossary_btn:hover{
    cursor: pointer;
    outline: solid;
    outline-color: #999;
    outline-width: 2px;
}

#glossary_div_container{
    display: none;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 105%;
    height:105%;
    background-color: #00000061;
    backdrop-filter: blur(10px);
    z-index: 100;
}

#glossary_div{
    display: none;
    position: inherit;
    height: 100%;
    flex-direction: column;
    align-items: center;
    overflow: scroll;
    overflow-x: hidden;
    scrollbar-width:thin;
    background-color: transparent;
    padding-top: 7px;
    padding-bottom: 7px;
}

#css_is_terrible{
    width: fit-content;
    height: fit-content;
    overflow: hidden;
    width: 35%;
    height: 78%;
    border-radius: 25px;
    background-color: #2c2c2c;
    margin-bottom: 20vh;
}

#glossary_div::-webkit-scrollbar-track{
    
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;    
    
}



.glossary_text_div{
    font-size: 40px;
}

.glossary_content_img{
    width: 45px; 
    height: 45px;
}

#glossary_inside_container{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#glossary_left_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#glossary_right_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.glossary_text_def{
    font-size: 28px;
}

table{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
   margin-bottom: 20px
}

tbody{
    text-align: center;
    align-items: center;
}


tr{
    height: 49px;
    margin-left: auto;
    margin-right: auto;
}

th{
    text-align: center;
}

td{
    text-align: center;
    vertical-align: middle;
}

/* everything related to the search bar  */

input[type=text]{
    background-color: #444444;
    color: white;
    font-family: bebas;
    font-size: 15px;
    border: none;
    height: 32px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

input[type=text]::placeholder{
color: white;
}

input:focus{
    cursor: text;
    outline: none;
}

#search_button_img{
    padding: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 32px;
    height: 32px;
    background-color: #444444; 
}

#search_button_img:hover{
    cursor: pointer;
}

#search_bar_div{
    margin-right: 125px;
    border-radius: 5px;
}


#search_bar_div:has(> input:focus){
    outline: solid;
    outline-color: #999;
    outline-width: 2px;
}