site/assets/style.css

132 lines
1.9 KiB
CSS

/* The good ol reset boilerplate */
h1, h2, h3, h4, h5, p {
margin: 0;
}
body {
margin: 0;
font-size: 0;
}
/* vars */
:root {
--base-color: rgb(120, 50, 130);
--highlight-color: rgb(225, 175, 250);
--bg-color: rgb(20, 10, 25);
}
/* Actual style starts here */
body {
background-color: var(--bg-color);
color: var(--highlight-color);
font-family: "Poppins", sans-serif;
}
p {
font-size: 14pt;
margin: 20px 0;
}
a {
color: var(--highlight-color);
}
a:visited {
color: var(--highlight-color);
}
a:hover {
color: white;
}
h1 {
font-size: 18pt;
overflow: clip;
white-space: nowrap;
margin-top: 16px;
}
h1::after {
content: " ------------------------------------------------------------------------------------------------------------------------";
width: 100vw;
max-width: 960px;
font-size: 18pt;
}
h1::before {
content: "---- ";
width: 100vw;
max-width: 960px;
font-size: 18pt;
}
.content {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
.avi {
max-height: 196px;
border-radius: 100px;
box-shadow: 4px 4px 10px rgb(120, 50, 130, 0.5);
display: inline-block;
vertical-align: middle;
margin: 15px;
}
.akko {
display: inline-block;
float: right;
max-height: 48px;
vertical-align: top;
color: #fff;
margin: 15px;
}
.akko img {
max-height: 48px;
}
.akko:hover {
filter: contrast(200%);
}
.profile p {
display: inline-block;
vertical-align: middle;
margin-left: 25px;
font-size: 32pt;
font-weight: 300;
}
.profile a {
display: inline-block;
float: right;
font-size: 18pt;
text-align: right;
vertical-align: top;
}
@media only screen and (max-device-width: 720px) {
.avi {
max-height: 128px;
}
.profile p {
margin-left: 15px;
font-size: 24pt;
}
.akko img {
max-height: 32px;
}
}