/* Reset default margins and paddings for all elements */
* {
    margin: auto;
    padding: 0;
}

/* Set background color and center-align all text in body */
body {
    text-align: center;
    background-color: #ABC270;
}

/* Main grid container layout */
.container-fluid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    row-gap: 30px;
}

/* Main heading style */
h1 {
    margin: 2rem;
    font-family: "Goldman", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 4rem;
    text-decoration: wavy underline;
}

/* Player title box styling */
aside h2 {
    font-family: "Itim", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 50px;
    padding: 10px 50px;
    text-align: center;
    width: 20vw;
    white-space: nowrap;
    background-color: #FDA769;
    border: 5px solid #473C33;
    overflow: auto hidden;
}

/* Score display styling */
aside .score {
    font-family: "Goldman", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: xx-large;
    padding: 10px 100px;
    text-align: center;
    width: 100%;
    background-color: #EEEDED;
    border: 5px solid #06202B;
}

/* ---------- Modal Styles ---------- */

/* Modal button base style */
.modal-body button {
    background-color: #B4EBE6;
    border: 0px;
    width: max-content;
    padding: 1rem 2rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bolder;
    font-size: large;
    color: #1B4D3E;
}

/* Modal title text style */
.modal-title {
    font-weight: bolder;
    font-size: xx-large;
    font-family: "Goldman", sans-serif;
    width: 100%;
}

/* Modal paragraph text */
.modal-body>p {
    font-weight: bold;
    font-size: xx-large;
    font-family: "Itim", sans-serif;
    width: 100%;
}

/* Hover effect for modal buttons */
.modal-body button:hover {
    background-color: #80CBC4 !important;
    color: #2A3663 !important;
}

/* Active effect for modal buttons */
.modal-body button:active {
    background-color: #295F98 !important;
    color: #3f2237 !important;
}

/* Footer modal buttons */
.modal-footer button {
    background-color: #FBDB93;
    border: 0px;
    width: max-content;
    padding: 1rem 5rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bolder;
    font-size: xx-large;
    color: #594100;
}

/* Hover and active styles for footer modal buttons */
.modal-footer button:hover {
    background-color: #DDA853 !important;
    color: #BB3E00 !important;
}

.modal-footer button:active {
    background-color: #F0BB78 !important;
    color: #641B2E !important;
}

/* ---------- Game Grid ---------- */

/* Container for game boxes */
.game {
    width: 60vmin;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px 10px;
    place-content: center;
    place-items: center;
}

/* Individual box (cell) style */
.box {
    font-size: 6rem;
    height: 20vmin;
    width: 20vmin;
    border: 2px solid black;
    background-color: #FEC868;
    font-family: "Itim", system-ui;
    font-weight: 400;
    font-style: normal;
}

/* Disabled boxes still visible */
.box:disabled {
    opacity: 1 !important;
    color: black !important;
}

/* Game section placement */
section {
    width: max-content;
    grid-row-start: 2;
    grid-column-start: 2;
    position: relative;
}

/* Control buttons (new game, reset, etc.) */
.controls button {
    padding: 20px;
    font-family: "Goldman", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: x-large;
    width: 100%;
    background-color: #26BAEE;
    border: 3px solid #21209C;
}

/* Z-index logic for hiding/showing new game & game over buttons */
.newgame {
    position: absolute;
    left: 0px;
    z-index: -1;
}

.gameover {
    z-index: 1;
}

/* ---------- Footer Styling ---------- */

footer {
    width: 99vw;
    padding: 0;
    background-color: #c0bba8;
}

/* Footer copyright */
footer .copyright,
.love {
    font-family: "Itim", cursive;
    font-weight: 600;
    font-style: normal;
    font-size: 25px;
}

/* Footer link area */
footer .link {
    background-color: #b6b19d;
    width: 100%;
    padding: 10px 0px;
}

/* Contact and social icon spacing */
footer .link .contact {
    margin: 0px 10px;
}

footer .link .social {
    margin: 0px 10px;
}

/* Footer section titles */
footer .link .heading {
    font-family: "Goldman", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    text-decoration: double;
    text-decoration-line: underline;
}

footer .link .title {
    font-family: "Goldman", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
}

/* Footer icon sizes */
footer .link img {
    height: 20px;
    width: 20px;
}

/* Footer icon wrapper div */
footer .icons div {
    height: 50px;
    width: 50px;
    position: relative;
}

/* Footer icons area */
footer .icons {
    padding: 20px 0px;
}

/* Cursor and shape for icons */
footer .icons div {
    cursor: pointer;
    border-radius: 50%;
}

/* Text under icons */
footer .icons div div {
    font-family: "Itim", cursive;
    font-weight: 100;
    font-style: normal;
    font-size: 12px;
    position: absolute;
    top: 25px;
    z-index: -1;
    color: black;
}

/* Hover scale-up animation */
footer .icons>a>div:hover {
    transform: scale(1.5);
    z-index: 0;
}

/* Social icon hover effects with glow and color */
footer #email:hover {
    background-color: #d73f2e;
    box-shadow: 0px 0px 7px 8px #d73f2e;
}

footer #whatsapp:hover {
    background-color: #2ac758;
    box-shadow: 0px 0px 7px 8px #2ac758;
}

footer #linkedin:hover {
    background-color: #0841d1;
    box-shadow: 0px 0px 7px 8px #0841d1;
}

footer #github:hover {
    background-color: #ffffff;
    box-shadow: 0px 0px 7px 8px #ffffff;
}

footer #twitter:hover {
    background-color: #797575;
    box-shadow: 0px 0px 7px 8px #797575;
}

footer #facebook:hover {
    background-color: #1873eb;
    box-shadow: 0px 0px 7px 8px #1873eb;
}

footer #instagram:hover {
    background-color: #f70961;
    box-shadow: 0px 0px 7px 8px #f70961;
}

footer #telegram:hover {
    background-color: #27a3e3;
    box-shadow: 0px 0px 7px 8px #27a3e3;
}