2023-06-27 14:31:55 +02:00
|
|
|
:root {
|
|
|
|
--bg: #27232a;
|
|
|
|
--bg-dark: #4b4b4b;
|
|
|
|
--bg-light: #a4a4a4;
|
|
|
|
--fg: #ffffff;
|
|
|
|
--hl: #8080ff;
|
2023-09-02 01:44:54 +02:00
|
|
|
--hl-light: #aeaeff;
|
2023-06-27 14:31:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
|
|
background: var(--bg);
|
|
|
|
margin: 0px;
|
|
|
|
padding: 0px;
|
|
|
|
font-family: "ubuntu", sans-serif;
|
|
|
|
color: var(--fg);
|
|
|
|
}
|
|
|
|
|
|
|
|
h1, h2, h3, h4 {
|
|
|
|
font-weight: lighter;
|
|
|
|
border-left: solid;
|
|
|
|
border-width: 5px;
|
|
|
|
padding-left: 5px;
|
|
|
|
padding-right: 5px;
|
|
|
|
display: inline-block;
|
|
|
|
border-color: var(--hl);
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
text-align: justify;
|
|
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: var(--hl);
|
|
|
|
}
|
|
|
|
|
|
|
|
dt {
|
|
|
|
font-weight: bold;
|
|
|
|
font-size: 90%;
|
|
|
|
border-bottom-style: solid;
|
|
|
|
border-bottom-width: 2px;
|
|
|
|
border-bottom-color: var(--bg-light);
|
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
form {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
form p {
|
|
|
|
text-align: center;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
input {
|
|
|
|
background: var(--bg-dark);
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="submit"], button {
|
2023-09-02 06:19:09 +02:00
|
|
|
font-size: 14px;
|
2023-06-27 14:31:55 +02:00
|
|
|
background: var(--hl);
|
2023-09-01 21:31:54 +02:00
|
|
|
border-style: none;
|
2023-06-27 14:31:55 +02:00
|
|
|
padding: 20px;
|
|
|
|
border-radius: 10px;
|
|
|
|
transition: background 0.1s;
|
|
|
|
color: var(--fg);
|
|
|
|
text-decoration: none;
|
|
|
|
width: fit-content;
|
|
|
|
align-self: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="submit"]:hover, button:hover {
|
2023-09-02 01:44:54 +02:00
|
|
|
background: var(--hl-light);
|
2023-06-27 14:31:55 +02:00
|
|
|
color: var(--fg);
|
|
|
|
}
|
|
|
|
|
|
|
|
button a {
|
|
|
|
color: var(--fg);
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="time"], input[type="date"] {
|
|
|
|
font-family: "Ubuntu", sans-serif;
|
|
|
|
background: var(--bg-dark);
|
|
|
|
border-style: solid;
|
|
|
|
border-width: 1px;
|
|
|
|
border-color: var(--bg);
|
|
|
|
padding: 20px;
|
|
|
|
border-radius: 10px;
|
|
|
|
transition: background 0.1s;
|
|
|
|
margin: 10px;
|
|
|
|
color: var(--fg);
|
|
|
|
}
|
|
|
|
|
2023-09-02 02:36:37 +02:00
|
|
|
input[type="text"], input[type="email"], input[type="number"], textarea {
|
2023-06-27 14:31:55 +02:00
|
|
|
font: inherit;
|
|
|
|
background: var(--bg-dark);
|
|
|
|
border-style: solid;
|
|
|
|
border-width: 1px;
|
|
|
|
border-color: var(--bg);
|
|
|
|
padding: 20px;
|
|
|
|
border-radius: 10px;
|
|
|
|
margin: 10px;
|
|
|
|
color: var(--fg);
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="checkbox"] {
|
|
|
|
display: none;
|
|
|
|
width: 0px;
|
|
|
|
height: 0px;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type=checkbox]:checked ~ .remove-check {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="checkbox"] + label {
|
|
|
|
background: var(--bg-light);
|
|
|
|
transition: background 0.1s;
|
|
|
|
display: inline-block;
|
|
|
|
width: 200px;
|
|
|
|
height: 80px;
|
|
|
|
padding: 10px;
|
|
|
|
margin: 10px;
|
|
|
|
text-align: center;
|
|
|
|
border-radius: 15px;
|
|
|
|
box-shadow: 5px 5px black;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="checkbox"]:hover + label {
|
|
|
|
background: var(--bg-dark);
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="checkbox"]:checked + label {
|
|
|
|
background: var(--hl);
|
|
|
|
}
|
|
|
|
|
|
|
|
header {
|
|
|
|
display: inline-block;
|
|
|
|
font-size: 150%;
|
|
|
|
width: 100%;
|
|
|
|
font-weight: lighter;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
header nav {
|
|
|
|
background-color: var(--bg-dark);
|
|
|
|
padding: 20px;
|
|
|
|
align-items: center;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
|
|
|
|
header nav p:first-of-type {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
header nav ul {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
display: flex;
|
|
|
|
gap: 15px;
|
|
|
|
list-style-type: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
header a {
|
|
|
|
padding: 5px;
|
|
|
|
text-decoration: none;
|
|
|
|
color: var(--fg);
|
|
|
|
transition: color 0.1s;
|
|
|
|
}
|
|
|
|
|
|
|
|
header a:hover {
|
|
|
|
color: var(--bg);
|
|
|
|
}
|
|
|
|
|
|
|
|
header > h1 {
|
2023-08-11 21:38:37 +02:00
|
|
|
font-size: 150%;
|
2023-06-27 14:31:55 +02:00
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
header > p:first-of-type {
|
2023-08-11 21:38:37 +02:00
|
|
|
font-size: 20px !important;
|
2023-06-27 14:31:55 +02:00
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
main {
|
|
|
|
padding: 15px;
|
|
|
|
padding-left: 100px;
|
|
|
|
padding-right: 100px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
line-height: 1.7;
|
|
|
|
gap: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
main table {
|
|
|
|
border-style: solid;
|
|
|
|
border-width: 1px;
|
|
|
|
border-color: var(--bg-dark);
|
|
|
|
border-radius: 10px;
|
|
|
|
background-color: var(--bg-dark);
|
|
|
|
}
|
|
|
|
|
|
|
|
main table td {
|
|
|
|
padding: 10px;
|
|
|
|
padding-left: 20px;
|
|
|
|
padding-right: 20px;
|
|
|
|
border-bottom: 2px solid var(--bg);
|
|
|
|
}
|
|
|
|
|
|
|
|
main table tr:last-of-type td {
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
main table td p:first-of-type {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
main p {
|
|
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
main nav {
|
|
|
|
width: 100%;
|
2023-06-28 17:41:57 +02:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
/* grid-template-columns: repeat(3, 1fr); */
|
2023-06-27 14:31:55 +02:00
|
|
|
gap: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
main img {
|
|
|
|
align-self: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
main article p {
|
|
|
|
line-height: 2.2;
|
|
|
|
}
|
|
|
|
|
|
|
|
main > article {
|
2023-06-28 17:41:57 +02:00
|
|
|
/* display: flex;
|
|
|
|
flex-direction: row; */
|
2023-06-27 14:31:55 +02:00
|
|
|
display: flex;
|
2023-06-28 17:41:57 +02:00
|
|
|
flex-direction: column;
|
2023-06-27 14:31:55 +02:00
|
|
|
gap: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
main > article img {
|
2023-09-02 07:01:27 +02:00
|
|
|
max-width: 100%;
|
2023-09-02 07:00:38 +02:00
|
|
|
max-height: 600px;
|
2023-06-27 14:31:55 +02:00
|
|
|
}
|
|
|
|
|
2023-09-02 06:19:09 +02:00
|
|
|
main > article div {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-self: center;
|
|
|
|
gap: 15px;
|
|
|
|
}
|
|
|
|
|
2023-06-27 14:31:55 +02:00
|
|
|
nav article {
|
|
|
|
background-color: var(--bg-dark);
|
|
|
|
border-style: solid;
|
|
|
|
border-width: 1px;
|
|
|
|
border-color: var(--bg-dark);
|
|
|
|
padding: 20px;
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
nav article img {
|
|
|
|
max-width: 100%;
|
|
|
|
max-height: 200px;
|
|
|
|
}
|
|
|
|
|
|
|
|
nav article footer {
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
section article {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
2023-06-28 17:41:57 +02:00
|
|
|
article p:first-of-type {
|
|
|
|
text-align: center;
|
2023-06-28 20:38:52 +02:00
|
|
|
font-weight: bold;
|
2023-06-28 17:41:57 +02:00
|
|
|
}
|
|
|
|
|
2023-06-27 14:31:55 +02:00
|
|
|
footer {
|
|
|
|
border-style: dashed;
|
|
|
|
border-color: var(--bg-light);
|
|
|
|
border-width: 2px 0px 0px 0px;
|
|
|
|
color: var(--fg);
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
footer > p {
|
|
|
|
text-align: center;
|
|
|
|
font-size: smaller;
|
|
|
|
}
|
|
|
|
|
2023-06-28 17:41:57 +02:00
|
|
|
video {
|
2023-06-29 18:42:43 +02:00
|
|
|
max-height: 300px;
|
2023-06-28 17:41:57 +02:00
|
|
|
}
|
|
|
|
|
2023-06-27 14:31:55 +02:00
|
|
|
.error {
|
|
|
|
background: #cc0000 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Medium devices (landscape tablets, 768px and up) */
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
|
|
main {
|
|
|
|
padding: 25px;
|
|
|
|
}
|
|
|
|
|
|
|
|
main nav {
|
|
|
|
width: 100%;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: auto;
|
|
|
|
gap: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
main > article {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 15px;
|
|
|
|
}
|
|
|
|
|
2023-09-02 06:19:09 +02:00
|
|
|
main > article div {
|
|
|
|
flex-direction: row;
|
2023-06-27 14:31:55 +02:00
|
|
|
}
|
2023-09-01 21:31:54 +02:00
|
|
|
|
|
|
|
video {
|
|
|
|
width: 100%;
|
|
|
|
}
|
2023-06-27 14:31:55 +02:00
|
|
|
}
|