website/src/components/header/styles.module.scss
.header {
display: flex;
justify-content: center;
align-items: center;
}
.logo {
max-width: 100px;
}
.title span {
color: var(--highlight-color);
}
.sup {
vertical-align: super;
font-size: 16px;
font-family: "Montserrat", sans-serif;
}
.container {
display: flex;
flex-direction: column;
}
.subtitle {
display: flex;
justify-content: space-between;
}
.links {
display: grid;
grid-template-columns: repeat(4, auto);
gap: 3px;
align-items: center;
justify-content: center;
}
.link {
font-weight: bold;
text-decoration: none;
padding: var(--padding-xxs) var(--padding-xs);
border-radius: var(--padding-sm);
color: #fafafa;
background: var(--link-color);
font-size: 20px;
position: relative;
&::after {
content: attr(tip);
white-space: nowrap;
position: absolute;
font-size: 12px;
top: -5px;
left: 50%;
translate: -50% -100%;
opacity: 0;
background: var(--link-color);
padding: 4px;
border-radius: 4px;
transition: opacity 0.3s ease-in-out;
}
&:hover::after {
opacity: 1;
}
}
@media (max-width: 500px) {
.logo {
max-width: 60px;
}
}