@import url('https://fonts.googleapis.com/css2?family=Anton&family=Lilita+One&family=Montserrat&family=Righteous&family=Roboto:wght@300;400;900&family=Teko:wght@400;600;700&display=swap'); /*font-family: 'Merriweather', serif;*/
/*font-family: 'Anton', sans-serif;*/
/*font-family: 'Lilita One', cursive;*/
/*font-family: 'Montserrat', sans-serif;*/
/*font-family: 'Righteous', cursive;*/
/*font-family: 'Roboto', sans-serif;*/
/*font-family: 'Teko', sans-serif;*/
:root {
    --main-font-color: #333333;
    --main-font: 'Teko', sans-serif;
    --secondary-font: 'Montserrat', sans-serif;
}

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set default font and color */
body {
    font-family: var(--secondary-font) !important;
    color: var(--main-font-color);
    background-color: #F9F9F9 !important;
}

/*Google icons */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
    color: rgba(0, 0, 0, 0.55);
}

.material-symbols-outlined:hover {
    color: rgba(0, 0, 0, 0.85);
}

.userDropdown {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.55);
}

.nav-text {
    color: rgba(0, 0, 0, 0.55);
}

.bg-light {
    --bs-bg-opacity: 0 !important;
}

.error-text {
    text-align: center;
    font-size: 1.5rem;
    white-space: normal;
    word-wrap: break-word;
}

.title {
    color: var(--main-font-color);
    font-weight: bold;
    font-family: var(--main-font);
}

.title-master {
    position: relative;
    font-size: 3.5rem;
}

.title-mind {
    position: relative;
    top: -4.2rem;
    font-size: 5.5rem
}

.secondary-text {
    position: relative;
    top: -7.9rem;
    font-family: var(--main-font);
    font-size: 1.67rem;
}

.img-cloud {
    position: relative;
    top: -14.1rem;
    left: 1rem;
}

.history_text {
    font-size: 0.8rem;
}

#hint-text {
    font-size: 1.2rem;
}

#hint-color {
    color: black;
    /*font-size: 2rem;*/
    width: 2.3rem;
    height: 2.3rem;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    /*cursor: pointer;*/
    transition: box-shadow 0.5s;
}

#hint-digit {
    color: black;
    font-size: 1.8rem;
}

form {
    flex-wrap: wrap;
    justify-content: center;
}

.four_inputs input,
.five_inputs input {
    width: 2.3rem;
    height: 2.3rem;
    border: 2px solid rgba(0, 0, 0, 0.26);
    border-radius: 5px;
    text-align: center;
    font-size: 1rem;
}

.history_labels {
    position: relative;
    left: -4.2rem;
    font-size: 0.8rem;
}

.history_inputs {
    position: relative;
    left: -2.2rem;
}

.history_inputs input {
    width: 3.5rem;
    height: 2.3rem;
    color: white;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 1rem;
    background-color: #6C757D;
}

#remaining_seconds {
    width: 4.5rem;
    font-size: 1rem;
}

.new-game {
    font-size: 0.8rem;
}

.new-game-title {
    font-family: var(--secondary-font);
    font-weight: bold;
    font-size: 1.2rem;
}

.new-game-secondary-title {
    font-size: 0.9rem;
    font-weight: 500;
}

.correct_result {
    color: #444444;
    font-weight: 500;
}

.digits button,
.colors button {
    width: 2.3rem;
    height: 2.3rem;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    transition: box-shadow 0.5s;
}

.digits button:hover,
.colors button:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#delete-button span {
    font-variation-settings: 'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
    color: transparent;
}

.badge {
    font-size: 2rem;
}

.colors button[onclick*="red"], .red {
    background: linear-gradient(to bottom, red, darkred);
    color: transparent;
    border: none !important;
}

.colors button[onclick*="yellow"], .yellow {
    background: linear-gradient(to bottom, #fce166, #d2b61f);
    color: transparent;
    border: none !important;
}

.colors button[onclick*="green"], .green {
    background: linear-gradient(to bottom, lightgreen, darkgreen);
    color: transparent;
    border: none !important;
}

.colors button[onclick*="brown"], .brown {
    background: linear-gradient(to bottom, #c9938c, #705551);
    color: transparent;
    border: none !important;
}

.colors button[onclick*="blue"], .blue {
    background: linear-gradient(to bottom, #0bb6e8, #004f6c);
    color: transparent;
    border: none !important;
}

.colors button[onclick*="purple"], .purple {
    background: linear-gradient(to bottom, #9d50bb, #3f214b);
    color: transparent;
    border: none !important;
}

.colors button[onclick*="orange"], .orange {
    background: linear-gradient(to bottom, #ffaa6a, #d25600);
    color: transparent;
    border: none !important;
}

.colors button[onclick*="black"], .black {
    background: linear-gradient(to bottom, #4f4f4f, #000102);
    color: transparent;
    border: none !important;
}

#login-icon {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 200, 'opsz' 24;
    font-size: 2rem;
    color: rgba(0, 0, 0, 0.55);
}

#login-icon:hover {
    color: rgba(0, 0, 0, 0.85);
}

/*modal*/
.settings-icon {
    font-size: 2rem;
}

.game_modal {
    /*position: absolute;*/
    display: none;
    position: fixed;
    width: 65vw;
    height: 80vh;
    padding: 4%;
    color: #333333;
    background-color: white;
    opacity: 97%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-in-out;
    overflow: auto;
    z-index: 1;
}

.close-button {
    top: 10%;
    right: 10%;
    border: none;
    cursor: pointer;
    color: #444444;
    font-size: 2rem;
}

.close-button:hover {
    /*color: #0B5ED7;*/
}

.intro {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.intro-window-left {
    position: absolute;
    top: 0;
    left: 0;
    right: 50%;
    bottom: 0;
    background-color: #222222;
    z-index: 999;
    color: white;
}

.intro-window-right {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    background-color: #222222;
    color: white;
    z-index: 999;
}

.intro-text-container {
    position: absolute;
    top: 42%;
    /*left: 50%;*/
    color: white;
    z-index: 1000;
}

.intro-button {
    color: white;
}

#intro-text-1 {
    position: relative;
    margin-bottom: 3%;
}

#intro-text-2 {
    position: relative;
    margin-bottom: 4%;
}

.notification {
    display: flex;
    position: fixed;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    /*max-width: 2vw;*/
    padding: 15px 25px;
    background-color: #28a745; /* Green background for positive messages */
    color: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 1; /* Fully visible initially */
    transition: opacity 0.5s ease-in-out; /* This makes the opacity change over 0.5 seconds */
}

.notification.hidden {
    opacity: 0; /* Fully transparent */
}


/*small screens only*/
@media only screen and (max-width: 480px), only screen and (max-width: 990px) {
    .nav-link::before {
        visibility: hidden;
    }

    .rules-icon-class {
        position: absolute;
        right: 3.5rem;
        top: 1.8rem;
    }

    .game-icon-class {
        position: absolute;
        right: 1rem;
        top: 1.8rem;
    }

    .score-class {
        position: absolute;
        left: -0.0rem;
        top: 4.2rem;
    }


    .history_inputs input {
        width: 1.8rem !important;
        height: 1.5rem !important;
        font-size: 0.8rem;
    }

    .four_inputs input {
        width: 1.7rem !important;
        height: 1.5rem;
        font-size: 1rem;
    }

    .five_inputs input {
        width: 1.7rem !important;
        height: 1.5rem;
        font-size: 1rem;
    }

    #remaining_seconds {
        width: 2rem !important;
        font-size: 0.7rem;
    }

    .title-master {
        font-size: 2rem;
        top: 0.8rem;
    }

    .title-mind {
        font-size: 3.2rem;
        top: -2.1rem;
    }

    .secondary-text {
        font-size: 0.98rem !important;
        top: -4.95rem;

    }

    .hero-text {
        position: absolute;
        right: 12.5rem;
        top: 7.5rem;
    }

    .bottom-half {
        position: relative;
    }

    #logo {
        position: relative;
        width: 70px;
        height: 70px;
        top: 0.6rem;
    }
    .mastermind_hero_logo {
        max-height: 100px;
    }
}

@media only screen and (max-width: 1200px) {
    .history_inputs input {
        width: 3rem;
        height: 2.3rem;
        font-size: 1rem;
    }

    #remaining_seconds {
        width: 2.5rem !important;
        font-size: 1rem;
    }

    .history_labels {
        position: relative;
        left: -2rem;
        font-size: 0.7rem;
    }
}

@media only screen and (max-width: 480px) {
    .history_labels {
        font-size: 0.45rem;
    }
}