*
{
    margin: 0;
    padding: 0;
}

/*** CLASS ***/

body
{
    height: 100%;
    background-color: #131316;
    display: grid;
    align-items: center;
    place-items: center;
    flex-wrap: wrap;

    font-family: 'Alfa Slab One', Helvetica, sans-serif;
    font-size: 1vw;
    color: #fff;
}

.containerSearch
{
    width: 100vw;
    height: 7vw;

    display: grid;
    align-items: center;
    place-items: center;
    transition: 0.3s;
}

.searchBar
{
    width: 70vw;
    height: 5vw;
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: space-evenly;

    background-color: #4e4e57d0;
    transition: 0.3s;
}

.inputBox
{
    width: 45vw;
    transition: 0.3s;
}

.inputBox input
{
    border: none;
    width: 45vw;
    height: 3vw;
    font-size: 3vw;
    font-family: 'Poppins',sans-serif;
    border-radius: 5px;
    transition: 0.3s;
}

.dropdown
{
    width: 20vw; 
    position: relative;
    align-items: center;
    align-content: center;
    transition: 0.3s;
}

/* .dropdown *
{

} */

.select
{
    width: 18vw;

    background: #2A2F3B;
    color: #fff;
    display: flex;

    justify-content: space-between;
    align-items: center;
    border: 2px #2A2F3B solid;
    border-radius: 0.5em;
    padding: 1em;
    cursor: pointer;
    transition: 0.3s;
}

.select-clicked
{
    border: 2px #26489A solid;
    box-shadow: 0 0 0.8em #26489A;
}

.select:hover
{
    background: #323741;
}

.caret
{
    width: 0;
    height: 0;
    border-left : 5px solid transparent;
    border-right: 5px solid transparent;
    border-top : 6px solid #fff;
    transition: 0.3s;
}

.caret-rotate
{
    transform: rotate(180deg);
}

.menu
{
    list-style: none;
    margin-top: 1em;
    padding: 0.2em 0.5em;
    background: #323741;
    border : 1px #363143 solid;
    box-shadow: 0 0.5em 1em rgba(0, 0,0, 0.2);
    border-radius: 0.5em;
    color: #9FA5B5;
    position: absolute;
    top: 3em;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    opacity: 0;
    display: none;
    transition: 0.2s;
    z-index: 1;
}

.menu li
{
    padding: 0.7em 0.5em;
    margin: 0.3em 0;
    border-radius: 0.5em;
    cursor: pointer;
}

.menu li:hover
{
    background: #2A2D35;
}

.active
{
    background: #23242A;
}

.menu-open
{
    display: block;
    opacity: 1;
}




.container
{
    width: 100%;
    height: calc(1080/1920*70vw);

    display: grid;
    align-items: center;
    justify-content: space-evenly;
    transition: 0.3s;
}

.frameBox
{
    width: 70vw;
    height: calc(1080/1920*70vw);
    border-radius: 10px;

    display: grid;
    place-content: center;
    justify-content: space-evenly;
    transition: 0.3s;
}


/* *
{
    margin: 0;
    padding: 0;
}

body
{
    font-family: Helvetica, sans-serif;
    background: #23242A;
    display: grid;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.inputBox
{
    min-width: 15em;
    position: relative;
    margin: 2em;
    box-sizing: border-box;
    display: grid;
}

.inputPseudo
{
    background: #2A2F3B;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px #2A2F3B solid;
    border-radius: 0.5em;
    padding: 1em;
    cursor: pointer;
    transition: 0.3s;
}

.dropdown
{
    min-width: 15em;
    position: relative;
    margin: 2em;
}

.dropdown *
{

}

.select
{
    background: #2A2F3B;
    color: #fff;
    display: flex;

    justify-content: space-between;
    align-items: center;
    border: 2px #2A2F3B solid;
    border-radius: 0.5em;
    padding: 1em;
    cursor: pointer;
    transition: 0.3s;
}

.select-clicked
{
    border: 2px #26489A solid;
    box-shadow: 0 0 0.8em #26489A;
}

.select:hover
{
    background: #323741;
}

.caret
{
    width: 0;
    height: 0;
    border-left : 5px solid transparent;
    border-right: 5px solid transparent;
    border-top : 6px solid #fff;
    transition: 0.3s;
}

.caret-rotate
{
    transform: rotate(180deg);
}

.menu
{
    list-style: none;
    margin-top: 1em;
    padding: 0.2em 0.5em;
    background: #323741;
    border : 1px #363143 solid;
    box-shadow: 0 0.5em 1em rgba(0, 0,0, 0.2);
    border-radius: 0.5em;
    color: #9FA5B5;
    position: absolute;
    top: 3em;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    opacity: 0;
    display: none;
    transition: 0.2s;
    z-index: 1;
}

.menu li
{
    padding: 0.7em 0.5em;
    margin: 0.3em 0;
    border-radius: 0.5em;
    cursor: pointer;
}

.menu li:hover
{
    background: #2A2D35;
}

.active
{
    background: #23242A;
}

.menu-open
{
    display: block;
    opacity: 1;
} */