110 lines
1.5 KiB
CSS
110 lines
1.5 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
|
|
|
:root
|
|
{
|
|
--dark-color: #1E1E1E;
|
|
--light-dark-color: #252525;
|
|
--lighter-dark-color: #2D2D2D;
|
|
--flair-color: #E65632;
|
|
}
|
|
|
|
*
|
|
{
|
|
font-family: "Outfit";
|
|
margin: 0;
|
|
}
|
|
|
|
{
|
|
cursor: pointer;
|
|
position: relative;
|
|
text-decoration: none;
|
|
}
|
|
a::after
|
|
{
|
|
background-color: var(--flair-color);
|
|
bottom: 0;
|
|
content: "";
|
|
height: 100%;
|
|
left: 0;
|
|
mix-blend-mode: darken;
|
|
position: absolute;
|
|
transform: scale(0, 1);
|
|
transform-origin: right;
|
|
width: 100%;
|
|
|
|
transition: transform 0.25s;
|
|
}
|
|
a:hover::after
|
|
{
|
|
transform: scale(1, 1);
|
|
transform-origin: left;
|
|
}
|
|
|
|
html
|
|
{
|
|
background-color: var(--dark-color);
|
|
color: white;
|
|
font-size: 1.25vw;
|
|
}
|
|
|
|
header
|
|
{
|
|
background-color: var(--lighter-dark-color);
|
|
align-items: center;
|
|
display: flex;
|
|
height: fit-content;
|
|
}
|
|
|
|
header img
|
|
{
|
|
margin: 0.75vw 1vw 0.75vw 2vw;
|
|
height: 2.5vw;
|
|
}
|
|
header h3
|
|
{
|
|
color: var(--flair-color);
|
|
width: 20%;
|
|
}
|
|
header .items
|
|
{
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
header .items *
|
|
{
|
|
margin: 0 1vw;
|
|
}
|
|
|
|
h2
|
|
{
|
|
color: var(--flair-color);
|
|
}
|
|
|
|
main
|
|
{
|
|
margin: 5vw 15vw;
|
|
}
|
|
main h1, main h2
|
|
{
|
|
margin-left: -5vw;
|
|
margin-top: 3vw;
|
|
}
|
|
main h3, main h4, main h5, main h6
|
|
{
|
|
margin-left: -3vw;
|
|
margin-top: 1.5vw;
|
|
}
|
|
|
|
main .para
|
|
{
|
|
margin-top: 7.5vw;
|
|
}
|
|
|
|
.title
|
|
{
|
|
background-color: var(--light-dark-color);
|
|
font-size: 2.5vw;
|
|
padding: 10vw 2.5vw;
|
|
text-align: center;
|
|
}
|