:root {
    --clr-focal-pt: #606C38;
    --clr-main-font: #283618;
    --clr-secondary-bg: #FEFAE0;
    --clr-main-bg: #FFFFFF;
    --arwhead-filter: invert(41%) sepia(11%) saturate(1521%) hue-rotate(33deg) brightness(91%) contrast(89%);
    --clrTheme-icon-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(125deg) brightness(103%) contrast(103%);
    --copyIcon-filter: invert(0%) sepia(9%) saturate(7464%) hue-rotate(152deg) brightness(104%) contrast(110%);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--clr-main-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
    color: var(--clr-main-font);
}

main {
    position: relative;
    width: 90%;
    max-width: 550px;
    background: var(--clr-secondary-bg);
    color: var(--white);
    padding: 3em 3.25em;
}

header {
    margin-bottom: 3.1875em;
}

.title {
    font-size: 1.875rem; /* 30 px */
    font-family: 'Karla', sans-serif;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    margin: 0;
    margin-bottom: .333em;
}

.highlight {
    color: var(--clr-focal-pt);
    display: block;
}

.subtitle {
    font-size: 1.0625rem; /* 17px */
    margin-top: .625em;
}

footer {
    text-align: center;
    margin-top: 1.75em;
}

button {
    appearance: none;
    border: none;
    cursor: pointer;
}

/* ----------- PASSWORD LENGTH ---------- */
.pswd-length-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -1em 0 1em;
    column-gap: 1em;
}

.pswd-length-number {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--clr-focal-pt);
    color: var(--clr-main-bg);
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    text-align: center;
    font-size: 2.5rem;
    border: 5px solid var(--clr-main-font);
}

.arrowhead {
    display: block;
    width: 2.75rem;
    margin: 0 auto;
    filter: var(--arwhead-filter);
    cursor: pointer;
}

.arrowhead.up {
    margin-bottom: .2em;
}

.arrowhead.down {
    margin-top: .2em;
}

/* --------- NUMBERS & SPECIAL CHARS RELATED --------- */

.include-numbers-container,
.include-special-chars-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
    column-gap: 1em;
}

input[type="checkbox"] {
    margin-right: 1.75em;
    min-width: 1.5em;
    min-height: 1.5em;
    cursor: pointer;
    accent-color: var(--clr-focal-pt);
}

/* ------------- GENERATE PASSWORDS BUTTON --------- */
.generate-passwords-btn {
    width: 100%;
    padding: .5625em 1em;
    border-radius: 6px;
    background: var(--clr-focal-pt);
    border: none;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    color: var(--clr-main-bg);
    font-family: 'Inter', sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.5;
    margin: .625em 0 2.1875em;
    cursor: pointer;
}

hr {
    width: 100%;
    height: 1px;
    background: var(--clr-main-font);
    border: none;
    margin: 0 0 2.1875em;
}

/* --------- PASSWORD OUTPUT AREAS ----------- */
.password-wrapper {
    background: var(--clr-focal-pt);
    border-radius: 6px;
    width: 100%;
    height: 2em;
    text-align: center;
    font-size: 1rem; /* 16px */
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: var(--clr-main-bg);
    display: flex;
    align-items: center;
}

.copy-icon-wrapper {
    position: relative;
    border: 1px solid var(--clr-main-font);
    padding: .25em .5em;
    height: 100%;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    background: var(--clr-main-bg);
    align-self: end;
    cursor: pointer;
}

.copy-icon-wrapper:hover {
    background: #80808029;
}

.copy-icon {
    filter: var(--copyIcon-filter);
}

.password-wrapper:not(:last-child) {
    margin-bottom: 1em;
}

.password {
    padding: .25em 1em;
    width: 100%;
}

.tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--clr-main-bg);
    color: var(--clr-main-font);
    text-align: center;
    border: 1px solid var(--clr-main-font);
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: 50%;
    margin-left: -60px;
}
  
.copy-icon-wrapper:hover .tooltiptext {
    visibility: visible;
}

/* ---------- MEDIA QUERIES ---------- */
@media (min-width: 551px) {

    .pswd-length-number {
        margin-right: 2.425em;
    }

    input[type="checkbox"] {
        margin-right: 7.75em;
    }

    .generate-passwords-btn {
        display: inline;
        width: initial; 
    }

    .passwords-container {
        display: flex;
        gap: 2em;
    }

    .title {
        font-size: 2.5rem;
    }

    .subtitle {
        font-size: 1.25rem;
    }

    .pswd-length p, label {
        font-size: 1.1rem;
    }

}