@import url('https://fonts.googleapis.com/css2?family=Changa:wght@200;400;700&display=swap');

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    background: #15151F;
}

nav {
    display: flex;
    justify-content: end;
    height: 58px;
    width: auto;
    
    background: #000000;
    box-shadow: 0px 3px 4px rgba(66, 66, 66, 0.9), 0px 7px 3px rgba(134, 134, 134);
}

nav ul {
    float: right;
}

nav ul li {
    display: inline-block;
    margin-right: 20px;
}

.logo img {
    position: absolute;
    left: 15px;
    top: 12px;

    width: 98px;
    height: 50px;

    cursor: pointer;
}

li > a {
    padding-right: 5px;
    padding-left: 5px;

    text-decoration: none;
    font-family: 'Changa';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 59px;
    letter-spacing: 0.02em;

    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: 20px;
}

li > a:hover {
    background: rgba(255, 255, 255, 0.849);
    color: #000000;
    transition-duration: 1s;
}

#pistas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    margin-top: -20%;
}

#pistas .card {
    width: 240px;
    height: 250px;
    margin: 20px;

    background: #1B1B26;
    border-radius: 11px;
}

.card {
    display: flex;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.34);
}

.card > label {
    position: absolute;
    width: 220px;
    height: 160px;

    display: flex;
    justify-content: center;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.04) 100%);
    border-radius: 11px;
}

.text p {
    text-align: center;
}

.card-tittle {
    margin-top: 180px;

    font-family: 'Changa';
    font-style: normal;
    font-weight: 800;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 0.02em;
    text-transform: uppercase;

    color: #FFFFFF;
}

.card-subtittle {
    font-family: 'Changa';
    font-style: normal;
    font-weight: 800;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;

    color: #FFFFFF;
}

#listra-roxa {
    display: flex;
    justify-content: end;

    margin-top: -25%;
}

#listra-roxa img{
    width: 350px;
}