:root {
    --escuro: #231F20;
    --vermelho: #D11F2F;
}
@font-face {
    font-family: montserrat;
    src: url("/fonts/Montserrat-Regular.ttf");
}
body {
    background-color: var(--escuro);
    margin: 50pt 0 25pt 0;
    height: auto;
    display: flex;
    font-family: montserrat;
    color: white;
    flex-direction: column;
    justify-content: center;
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    width: 60%;
}
*, *::before, *::after {
    box-sizing: border-box;
}
/* Para navegadores modernos */
::selection {
    background-color: var(--vermelho); /* A cor de fundo que você deseja (ex: um azul customizado) */
}

/* Para o Firefox (versões mais antigas podem precisar do prefixo) */
::-moz-selection {
    background-color: var(--vermelho);
}
i {
    display: flex;
    align-items: center;
}
h3 {
    font-weight: normal;
    text-align: center;
}
#logo {
    width: 250pt;
}
form {
    border: solid white 2pt;
    background-color: var(--escuro);
    border-radius: 20pt;
    padding: 5pt;
    padding-left: 10pt;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 5pt;
}
input[type="search"] {
    background: none;
    border: none;
    outline: none;
    color: white;
    font-family: montserrat;
    width: 100%;
}
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}
button {
    background-color: var(--vermelho);
    color: white;
    border: none;
    outline: none;
    padding: 5pt 10pt 5pt 10pt;
    border-radius: 20pt;
    font-family: montserrat;
    cursor: pointer;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5pt;
}
#resultados, main > :nth-child(4)  {
    margin-top: 15pt;
    width: 100%;
    justify-content: left;
}
main > :nth-child(4) > p {
    font-size: small;
}
.resultado {
    display: flex;
    gap: 10pt;
}
.resultado img {
    width: 100pt;
    border-radius: 10pt;
}
.resultado button {
    padding: 5pt 20pt 5pt 20pt;
    margin-left: 0;
    width: fit-content;
}
.resultado > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.resultado > div p {
    line-height: 1.5;
    margin: 0;
}
#resultadoContainer {
    display: flex;
    flex-direction: column;
    gap: 20pt;
}
#resultadoContainer > p > i {
    font-size: 30pt;
}
footer {
    margin: 50pt 50pt 25pt 50pt;
    text-align: center;
    flex-direction: column;
}
#dev {
    border: solid var(--vermelho) 2pt;
    font-family: montserrat;
    display: flex;
    margin: auto;
    margin-top: 50pt;
    margin-bottom: 25pt;
    padding: 15pt;
    gap: 15pt;
    width: fit-content;
    justify-content: center;
    text-align: left;
    border-radius: 15pt;
    flex-wrap: wrap;
}
#dev > div:first-of-type {
    width: fit-content;
    display: flex;
    flex-direction: column;
}
#dev > div > p {
    width: fit-content;
}
#dev > div strong {
    font-size: 14pt;
}
#dev > div > div {
    display: flex;
    gap: 10pt;
}
#devPic {
    width: 100pt;
    border-radius: 50%;
}
#dev i {
    font-size: 34pt;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    top: 0;
    transition: 250ms;
}
#dev i:hover {
    top: -5pt;
    color: var(--vermelho);
}
#loading {
    width: 40pt;
    height: 40pt;
    border: solid var(--escuro) 4pt;
    border-top: solid var(--vermelho) 4pt;
    border-radius: 50%;
    animation: load 1s infinite ease-in-out;
}
@keyframes load {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 1024px) {
    main {
        width: 100%;
        justify-content: center;
        padding: 0pt 50pt 0pt 50pt;
    }
}

@media (max-width: 600px) {
    * {
        font-size: small;
    }
    main {
        padding: 0pt 25pt 0pt 25pt;
    }
    #logo {
        width: 200pt;
    }
    footer {
        margin: 50pt 25pt 0pt 25pt;
    }
    #dev {
        margin: 0;
        justify-content: left;
    }
    #dev > div > div {
        flex-wrap: wrap;
    }
    #devPic {
        width: 75pt;
        border-radius: 50%;
    }
    #dev i {
        font-size: 24pt;
    }
    .resultado img {
        width: 75pt;
        border-radius: 5pt;
    }
    .resultado button {
        padding: 5pt 15pt 5pt 15pt;
        margin-left: 0;
        width: fit-content;
    }
    form {
        border: solid white 1pt;
    }
}

@media (max-width: 320px) {
    form {
        padding: 0;
        padding-left: 5pt;
    }
}