194 lines
3.4 KiB
CSS
194 lines
3.4 KiB
CSS
@font-face {
|
|
font-family: "Archivo";
|
|
src: url(../media/Archivo-Regular.ttf) format('truetype');
|
|
font-weight: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Archivo";
|
|
src: url(../media/Archivo-SemiBold.ttf) format('truetype');
|
|
font-weight: bold;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Archivo";
|
|
src: url(../media/Archivo-Italic.ttf) format('truetype');
|
|
font-weight: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "SourceSansPro";
|
|
src: url(../media/SourceSansPro-Regular.ttf) format('truetype');
|
|
font-weight: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "SourceSansPro";
|
|
src: url(../media/SourceSansPro-SemiBold.ttf) format('truetype');
|
|
font-weight: bold;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "SourceSansPro";
|
|
src: url(../media/SourceSansPro-Italic.ttf) format('truetype');
|
|
font-weight: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Exo2";
|
|
src: url(../media/Exo2-Regular.ttf) format('truetype');
|
|
font-weight: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Exo2";
|
|
src: url(../media/Exo2-Bold.ttf) format('truetype');
|
|
font-weight: bold;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Exo2";
|
|
src: url(../media/Exo2-Italic.ttf) format('truetype');
|
|
font-weight: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: url(../media/Roboto-Regular.ttf) format('truetype');
|
|
font-weight: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: url(../media/Roboto-Bold.ttf) format('truetype');
|
|
font-weight: bold;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: url(../media/Roboto-Italic.ttf) format('truetype');
|
|
font-weight: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@keyframes appear {
|
|
from {
|
|
opacity: 0.05;
|
|
}
|
|
|
|
to {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@keyframes appear-from-right {
|
|
from {
|
|
margin-left: 100%;
|
|
width: 300%;
|
|
opacity: 0.05;
|
|
}
|
|
|
|
to {
|
|
margin-left: 0%;
|
|
width: 100%;
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@keyframes appear-from-below {
|
|
from {
|
|
margin-top: 100%;
|
|
opacity: 0.05;
|
|
}
|
|
|
|
to {
|
|
margin-top: 0%;
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@media (min-device-width: 10cm) {
|
|
body {
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body .section:first-child {
|
|
animation-name: appear;
|
|
animation-duration: 1s;
|
|
}
|
|
|
|
body .section:not(:first-child) {
|
|
animation-name: appear-from-below;
|
|
animation-duration: 1.2s;
|
|
animation-timing-function: cubic-bezier(.27,.72,.44,1.01);
|
|
}
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-family: "Exo2";
|
|
border: 5px solid #000;
|
|
border-radius: 5px;
|
|
margin-bottom: 2em;
|
|
box-shadow: 5px 10px 5px 5px #2A202F, inset 2px 2px 5px 5px #3A2A1A;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.section > div {
|
|
padding: 10px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.section > *:nth-child(odd){
|
|
color: #FFDC00;
|
|
background-color: #0074D9;
|
|
}
|
|
|
|
.section > *:nth-child(even){
|
|
color: #001F3F;
|
|
background-color: #39CCCC;
|
|
}
|
|
|
|
.section > * {
|
|
flex: 1 1 650px;
|
|
}
|
|
|
|
.section h1 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.section h2 {
|
|
font-weight: italic;
|
|
}
|
|
|
|
.container {
|
|
text-align: center;
|
|
}
|
|
|
|
.container ul {
|
|
color: #001F3F;
|
|
text-align: left;
|
|
padding-left: 5%;
|
|
}
|
|
|
|
.pane {
|
|
max-width: 100%;
|
|
}
|