@import "/fontsource/outfit/index.css";
@import "/fontsource/epilogue/index.css";
@import "/fontsource/inter/index.css";

/* *{margin:0;padding:0;box-sizing: border-box;font-family: 'Epilogue', sans-serif;letter-spacing: 1px;} */

:root {
    --website-background: #0E0E14;
    --website-theme-color: #00FEE4;
    --highlighted-color: #DB1866;
    --side-nav-width: 90px;
    --side-nav-original-width: 90px;
    --top-nav-height: 4rem;
    
    --gameBox:300px;
}

/* Define Font Style */
h1,h2,h3,h4,h5,h6 {font-family: 'Epilogue', sans-serif;}
p {font-family: 'Inter', sans-serif;}
* {font-family: 'Epilogue', sans-serif; letter-spacing: 1px;}

/* Body */
html {height: 100%;overflow: hidden;}
body{height: 100%;background-color: var(--website-background);}


/* Scrollbar Css */
*::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: var(--website-background);}
*::-webkit-scrollbar {width: 6px;height: 6px;background-color: var(--website-background);}
*::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: var(--highlighted-color);}


/* Radio Button Css */
input[type="radio"] {appearance: none;border-radius: 50%;width: 12px;height: 12px;position: relative;background-color: #D9D9D9;}
input[type="radio"]:checked {background-color: #252840;border: 2px solid #626262;}
input[type="radio"]:checked::after {content: ""; position: absolute;width: 11px;height: 11px;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: var(--website-theme-color);}


.w-10{width: 10%;}
.w-20{width: 20%;}
.w-30{width: 30%;}
.w-40{width: 40%;}
.w-50{width: 50%;}
.w-60{width: 60%;}
.w-70{width: 70%;}
.w-80{width: 80%;}
.w-90{width: 90%;}
.w-100{width: 100%;}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    transition: background-color 0s ease-in-out 99999s !important;
    -webkit-text-fill-color: white;
}


.viewAllDiv {flex-grow: 1;display: flex;align-items: center;justify-content: flex-end;}
.viewAllDiv .viewAll{ border-bottom: 1px solid #F970E3;padding-left: 2.5%;font-weight: bolder;text-decoration: none;color: white;transition: 0.2s;width: fit-content;}
.viewAllDiv .viewAll:hover{color: var(--website-background);}

.banner .card{cursor: unset;}
.banner .card:hover{transform: unset;}