@font-face {
    font-family: "password";
    src: url("font/Password.ttf") format("truetype");
    font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900;
    font-style: normal;
    font-display: block;
}

body {
    background-color: #eec800;
    color: black;
    font-family: 'Inter', sans-serif;
    transition: background-color 150ms ease-in-out 0s;
}

body:focus-within {
    background-color: #eec800;
}

body:has(.inputPass:placeholder-shown):focus-within {
    background-color: tomato;
}

#wrapper {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
}

.flexDiv {
    display: flex;
}

.vFlex {
    flex-direction: column;
}

.inputFlex {
    gap: 0.4vmax;
    width: 100%;
}

.biggerFlex {
    height: 100%;
    width: 80%;
    max-width: 900px;
    gap: 6vmax;
}

.centerFlex {
    justify-content: center;
    align-items: center;
}

.spaceFlex {
    justify-content: space-between;
}

.endFlex {
    justify-content: flex-end;
    gap: 1vmax;
}

.labelPass {
    font-size: 1.2vmax;
    color: rgba(0, 0, 0, 0.6);
}

.inputPass {
    font-size: 3vmax;
    border: 0.2vmax solid black;
    border-radius: 1vmax;
    padding: 1vmax;
    width: calc(100% - 2vmax);
    padding-bottom: 0.7vmax;
    color: black;
    outline: none;
    background-color: transparent;
    font-family: 'password', sans-serif;
    box-shadow: 0 0 0 0 black;
    transition: box-shadow 300ms ease-in-out 0s;
}

.inputPass::placeholder {
    color: rgba(0, 0, 0, 0.2);
    transform: translateY(0.1vmax);
    font-family: 'Inter', sans-serif;
}

.inputPass:focus {
    box-shadow: 0 0 0 0.2vmax black;
}

.smallFlex {
    border-radius: 1vmax;
    width: calc(100% - 2vmax);
    justify-content: space-between;
    padding: 1vmax;
    background-color: white;
}

.downloadFlex {
    justify-content: flex-end;
}

.downloadFlex h2 {
    white-space: nowrap;
}

a {
    position: relative;
    border-radius: 50%;
    width: 33px;
    height: 33px;
    padding: 16px;
    isolation: isolate;
    transition: transform 300ms ease-in-out 0s;
    transform: scale(1);
}

a:hover {
    transform: scale(1.2);
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: lightgray;
    z-index: -1;
    transform: scale(0);
    transition: transform 300ms ease-in-out 0s;
}

a:hover::before {
    transform: scale(1);
}

a svg {
    transform: scale(0.75);
    transform-origin: top left;
    transition: stroke 300ms ease-in-out 0s;
}

a:hover svg {
    stroke: black;
}

h2 {
    margin-right: 3vmax;
}

p {
    color: #999999;
}

@media screen and (max-width: 900px) {
    .mobileFlex {
        flex-direction: column;
        align-items: flex-start;
        margin: 3vmax;
    }

    .downloadFlex {
        margin: 3vmax;
    }

    .inputPass {
        font-size: 4vmax;
    }

    .labelPass {
        font-size: 2vmax;
    }

    p {
        margin: 0;
        line-height: 1.5;
    }

    h2 {
        font-size: 1.2em;
    }
}