:root {
--white: #FFF;
--gray: #F3F3F3;
--background: #060D23;
--tab-background: #383D4F;
--gray-dark: #3e3e3e;
--gray-hover: #F7F7F7;
--primary-blue: #00E0FE;
--blue-gray: #BBCFD5;
}
body {
font-family: 'Red Hat Display';
background-color: var(--gray);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
padding: 20px;
margin: 10px;
max-width: 380px;
width: 100%;
min-height: 400px;
border-radius: 16px;
background-color: var(--background);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.container-top-ten {
display: flex;
justify-content: start;
align-items: center;
gap: 8px;
margin-bottom: 16px;
color: var(--blue-gray);
}
header {
position: relative;
}
.tab-content {
display: none;
}
.tab-content--active {
display: block;
}
.tabs {
position: relative;
display: flex;
flex-grow: 1;
gap: 8px;
padding-top: 12px;
padding-bottom: 12px;
flex-wrap: nowrap;
border-bottom: 1px solid var(--tab-background);
}
.tabs > a {
position: relative;
display: flex;
text-decoration: none;
padding: 8px;
font-size: 14px;
font-weight: 600;
color: var(--white);
text-align: left;
justify-content: start;
align-items: center;
gap: 8px;
}
.tabs > a img {
height: 20px;
width: 20px;
}
.tabs > .active {
font-weight: 700;
outline: none;
border-radius: 8px;
color: var(--primary-blue);
background-color: var(--tab-background);
}
.tabs > a:hover {
background-color: var(--tab-background);
border-radius: 8px;
}
.tabs > a > svg {
stroke: var(--white);
}
.tabs > .active > svg {
stroke: var(--primary-blue);
}
.record {
display: flex;
flex-wrap: nowrap;
justify-content: start;
align-items: center;
gap: 12px;
color: var(--white);
height: 64px;
opacity: 1;
padding: 16px 0px;
animation: fadein 0.3s ease-in-out;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.record .avatar {
display: block;
border-radius: 16px;
flex-grow: 0;
height: 64px;
width: 64px;
border: 1px solid var(--tab-background);
object-fit: cover;
}
.content {
display: flex;
flex-direction: row;
flex-grow: 1;
gap: 16px;
align-items: center;
}
.content .title {
font-weight: 700;
color: var(--white);
}
.content .description {
font-size: smaller;
}
.title-description {
display: flex;
flex-direction: column;
color: var(--blue-gray);
}
.explore-button {
text-decoration: none;
margin-left: auto;
border: 1px solid var(--white);
color: var(--white);
border-radius: 8px;
height: fit-content;
padding: 6px 8px;
transition: all 0.2s ease-in-out;
}
.explore-button:hover {
border: 1px solid var(--primary-blue);
color: var(--primary-blue);
}