:root {
    --font: "Poppins", sans-serif;
    --color-hover: #EF5F4C;
    --text-color-primary: #313131;
    --text-color-secondary: #6C6C6C;
    --font-size-md: 14px;
    --font-size-h1: 32px;
}

header {
    position: relative;
    width: 1280px;
    height: 40px;
    margin: auto;
    margin-bottom: 32px;
}

.nav.items {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
}

.menu.items {
    display: flex;
    font-family: var(--font);
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: var(--text-color-secondary);
}

.nav.items {
    display: flex;
}

.nav.items a {
    color: var(--text-color-secondary);
    cursor: pointer;
    text-decoration: none;
}

.nav.items a:hover {
    color: var(--color-hover);
    cursor: pointer;
    text-decoration: none;
}

nav {
    position: relative;
    width: 1280px;
    height: 240px;
    margin: auto;

}

.perfil {
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
}


.nome-perfil {
    display: flex;
    flex-direction: column;
    margin-left: 32px;
    margin-right: auto;
    width: 384px;
    height: 168px;
    font-family: var(--font);
    font-size: var(--font-size-md);
}

.nome-perfil h1 {
    font-size: var(--font-size-h1);
    margin-bottom: -8px;
    font-family: var(--font);
    color: var(--text-color-primary);
}

.nome-perfil p {
    display: flex;
    text-align: left;
    text-decoration: none;
    width: 314px;
    height: 168px;
    font-family: var(--font);
    color: var(--text-color-secondary);

}


.info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 280px;
    height: 104px;
}

.location {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.countries {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 16px;

}

.photo-gallery {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;

}

.info span {
    display: inline;
    align-items: center;
    font-size: var(--font-size-md);
    justify-content: center;
    margin: 8px;
    font-family: var(--font);
    color: var(--text-color-secondary);
}

.photo-gallery {
    position: relative;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 1380px;
    height: 1020px;
}

.card.photo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}


.card.photo img {
    position: relative;
    cursor: pointer;
    width: 286px;
    height: 286px;
    margin: 24px;
}

footer .travelgram {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1280px;
    height: 42px;
    margin: auto;
    color: var(--text-color-secondary);
    font-size: var(--font-size-md);
}