178 lines
2.6 KiB
CSS
178 lines
2.6 KiB
CSS
@font-face {
|
|
font-family: pfdintextcomppromedium;
|
|
src: url(../fonts/PFDinTextCompPro-Medium.ttf);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: pfdintextcompprothin;
|
|
src: url(../fonts/PFDinTextCompPro-Thin.ttf);
|
|
}
|
|
|
|
:root {
|
|
--main-bg-color: #e6007e;
|
|
--alt-bg-color: #E59730;
|
|
--alt2-bg-color: #9EBF43;
|
|
--alt3-bg-color: #3096E5;
|
|
--main-color: #ffffff;
|
|
--alt-main-color: #1A000D;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--main-bg-color);
|
|
font-family: pfdintextcomppromedium;
|
|
text-align: center;
|
|
}
|
|
|
|
.white {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.black {
|
|
color: var(--alt-main-color);
|
|
}
|
|
|
|
.thin {
|
|
font-family: pfdintextcompprothin;
|
|
}
|
|
|
|
.bold {
|
|
font-family: pfdintextcomppromedium;
|
|
}
|
|
|
|
.button {
|
|
font-size: 2.5em;
|
|
transition-property: color;
|
|
transition-duration: 1s;
|
|
}
|
|
|
|
.button:hover {
|
|
color: var(--main-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.logo {
|
|
width: inherit;
|
|
}
|
|
|
|
.bg1 {
|
|
background-color: var(--alt-bg-color);
|
|
border-color: var(--alt-bg-color);
|
|
}
|
|
|
|
.bg2 {
|
|
background-color: var(--alt2-bg-color);
|
|
border-color: var(--alt2-bg-color);
|
|
}
|
|
|
|
.bg3 {
|
|
background-color: var(--alt3-bg-color);
|
|
border-color: var(--alt3-bg-color);
|
|
}
|
|
|
|
a {
|
|
font-family: pfdintextcomppromedium;
|
|
font-weight: 250;
|
|
color: var(--alt-main-color);
|
|
transition-property: color;
|
|
transition-duration: 1s;
|
|
text-decoration: wavy;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--main-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#main_wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
margin-bottom: 5em;
|
|
}
|
|
|
|
#center_wrapper, #header_wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
gap: 0;
|
|
text-align: center;
|
|
font-size: 9.75em;
|
|
font-weight: bold;
|
|
padding: 0;
|
|
}
|
|
|
|
#header > span {
|
|
margin: 0;
|
|
}
|
|
|
|
#subheader {
|
|
margin: -1em 0 0 0;
|
|
font-size: 3.47em;
|
|
}
|
|
|
|
#place {
|
|
margin: 0;
|
|
font-size: 2.145em;
|
|
}
|
|
|
|
#logo_wrapper {
|
|
margin-top: 1em;
|
|
width: 40em;
|
|
}
|
|
|
|
#navbar_wrapper {
|
|
position: fixed;
|
|
bottom: 0;
|
|
padding: 1em 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 2em;
|
|
background-color: var(--main-bg-color);
|
|
width: 100vw;
|
|
}
|
|
|
|
#blah {
|
|
margin: 2em 0 2em;
|
|
font-size: 2em;
|
|
font-family: pfdintextcompprothin;
|
|
color: var(--main-color);
|
|
width: 20em;
|
|
text-align:justify;
|
|
text-justify:inter-word;
|
|
}
|
|
|
|
#blah > p, #blah.h2 {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.important {
|
|
font-family: pfdintextcomppromedium;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
margin-left: 0.5em;
|
|
}
|