You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

133 lines
2.1 KiB

.page {
min-height: 110vh;
background-color: #1B1C22;
display: flex;
flex-direction: column;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.content {
padding: 2em 0;
gap: 2em;
display: flex;
flex-direction: row;
}
.card {
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
gap: 1em;
padding: 2em;
color: white;
background-color: #25262C;
}
.card p {
font-size: 1.1em;
}
.content .buttons {
width: 300px;
display: flex;
flex-direction: column;
gap: 1em;
}
.content .buttons > a {
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
border-radius: 10px;
padding: 0.4em 2em;
font-size: 1.3em;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
background-color: rgba(79,79,255,1);
color: white;
transition-duration: 0.1s;
font-family: 'Dela Gothic One', cursive;
}
.icon {
font-size: 2em;
}
.content .buttons > a:hover {
transform: scale(0.95);
transition-duration: 0.1s;
}
.avatar {
height: 200px;
display: flex;
gap: 3em;
}
.avatar h1 {
font-size: 2em;
}
.avatar h4 {
font-weight: normal;
}
.avatar > img {
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
border-radius: 100%;
max-height: 100%;
transition-duration: 0.3s;
}
.avatar > img:hover {
transition-duration: 0.3s;
transform: scale(1.1) rotate(20deg);
}
.colorfulbar {
box-shadow: -2px -2px 10px rgba(0,0,0,0.2);
background: linear-gradient(to left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
height: 6px;
}
.menu {
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
background: #25262C;
color: white;
padding: 1em 2em;
}
.menu > div {
display: flex;
justify-content: space-between;
}
.menu .items {
display: flex;
gap: 1.5em;
}
.menu a {
display: flex;
align-items: center;
}
.menu .title > img {
height: 3em;
}
.menu .title {
margin: -20px 0;
gap: 5px;
font-size: 0.8em;
}
.footer {
text-align: center;
color: white;
}