@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Fjalla+One&display=swap');

/* font-family: 'DM Mono', monospace; */
/* font-family: 'Fjalla One', sans-serif; */

:root {
    --clr-bg : #8386D5;
    --primary : #F6F6DB;
}

body {
    background-color: var(--clr-bg);
}

a {text-decoration: none !important;}
a:hover {color: var(--clr-bg);}


/* === MAIN PAGE === */

#main-page {
    height: 100vh;
    display: flex; justify-content: center; align-items: center; flex-direction: column;
    padding: 2rem;
}

.title-wrap {
    display: flex; justify-content: center; align-items: center; gap: 1.2rem;
    width: fit-content; height: auto; 
}

#title-logo {
    width: 150px; height: auto;
}

.title-text {
    font-family: 'Fjalla One', sans-serif; 
    font-size: max(min(180px, 12rem)); color: var(--primary);
}

.main-buttons {
    width: fit-content; flex-wrap: wrap;
    display: flex; justify-content: center; align-items: center; gap: 2rem;
}

.main-buttons .complete-button {
    width: fit-content; 
}

/* === Challenge Page === */

#challenge-page {
    display: flex; justify-content: space-around; align-items: center;
    padding: 2rem;
}

#title-logo-fixed {
    position: absolute; top: 2rem; left: 3rem;
    width: 60px; height: auto;
}

.challenge-image {
    padding: 2rem; width: 80%; height: auto;
}

.image-wrap {
    display: flex; justify-content: center; align-items: center;
    width: 40%; height: 750px; max-width: 600px;
    background-color: var(--primary);
    border-radius: 14px;
    margin-inline-start: 6rem;
    margin-top: 3rem;
}

.info-wrap {
    display: flex; justify-content: center; align-items: start; flex-direction: column;
    width: 40%; max-width: 700px; gap: 5rem;
}

.info-level {
    font-family: 'DM Mono', monospace;
    font-size: 35px; color: var(--primary);
}

.text-wrap {
    width: max-content; flex-direction: column;
    display: flex; justify-content: center; align-items: start; gap: 1.5rem;
}

.info-text {
    display: flex; justify-content: center; align-items: center; gap: 1.2rem;
    font-family: 'DM Mono', monospace;
    font-size: 20px; color: var(--primary);
}

.brick {
    width: 70px; height: 15px; border: 5px solid var(--primary);
}

.mover-wrap {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
}

.move-button {
    text-align: center;
    width: fit-content; width: 46%; padding-inline: 2.1rem; padding-block: .5rem;
    background-color: var(--primary); border-radius: 18px;
    color: var(--clr-bg); font-family: 'DM Mono', monospace; font-size: 34px;
    transition: all .2s ease-in-out;
}
.move-button:hover {
    transform: translateY(-5px);
    transition: all .2s ease-in-out;
}

.complete-button {
    text-align: center;
    width: 100%; padding-inline: 2.1rem; padding-block: .5rem;
    background-color: var(--primary); border-radius: 18px;
    color: var(--clr-bg); font-family: 'DM Mono', monospace; font-size: 22px;
    transition: all .2s ease-in-out;
    cursor: pointer;
}.complete-button:hover {
    transform: translateY(-5px);
    transition: all .2s ease-in-out;
}

.buttons-wrap {
    display: flex; justify-content: center; align-items: center; width: 100%;
    flex-direction: column; gap: 2.5rem;
}

.logo-text {
    font-family: 'Fjalla One', sans-serif; 
    font-size: 80px; color: var(--primary);
}