You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
681 lines
11 KiB
CSS
681 lines
11 KiB
CSS
|
|
body{
|
|
margin: 0;
|
|
display: block;
|
|
|
|
}
|
|
|
|
.page {
|
|
height: 287mm;
|
|
width: 200mm;
|
|
margin: 0 auto;
|
|
padding: 5mm;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.card {
|
|
float: left;
|
|
width: calc(200mm / 2 ); /* Adjusted width to fit 2 cards per row with margins */
|
|
height: calc(287mm / 4 ) ; /* Adjusted height to fit 4 rows per page with margins */
|
|
/*border: 1px solid black;*/
|
|
box-sizing: border-box; /* Includes the border in the width and height calculation */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card.image{
|
|
width: calc(200mm / 2); /* Adjusted width to fit 2 cards per row with margins */
|
|
height: calc(287mm / 4);
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box; /* Includes the border in the width and height calculation */
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
.card.text{
|
|
padding: 5mm;
|
|
box-sizing: border-box; /* Includes the border in the width and height calculation */
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
/*game */
|
|
h1{
|
|
font-size: 12pt;
|
|
font-family: 'NotCourierSans Bold', Courier, monospace;
|
|
color: #c4007a;
|
|
font-weight: 600;
|
|
padding-left: 5mm;
|
|
padding-right: 5mm;
|
|
text-align: center;
|
|
padding-top: 50px;
|
|
overflow: hidden;
|
|
margin: 0mm;
|
|
margin-bottom: 5pt;
|
|
line-height: 14pt;
|
|
overflow-wrap: break-word;
|
|
|
|
|
|
|
|
}
|
|
|
|
/* thesis quotes */
|
|
h2{
|
|
font-family: 'Catamaran Bold', sans-serif;
|
|
font-weight: 1000;
|
|
font-size: 12pt;
|
|
color: #a6dbf0;
|
|
margin: 0mm;
|
|
margin-bottom: 5pt;
|
|
line-height: 14pt;
|
|
padding: 0mm 5mm 0mm 5mm;
|
|
|
|
}
|
|
|
|
/* alternative materials*/
|
|
h3 {
|
|
font-family: 'Catamaran Bold', sans-serif;
|
|
font-weight: 1000;
|
|
font-size: 12pt;
|
|
color: #E2C044;
|
|
margin: 0mm;
|
|
margin-bottom: 5pt;
|
|
line-height: 14pt;
|
|
padding: 0mm 5mm 0mm 5mm;
|
|
}
|
|
|
|
/* wiki*/
|
|
h4{
|
|
font-family: 'NotCourierSans Bold',Courier, sans-serif;
|
|
font-weight: 800;
|
|
font-size: 12pt;
|
|
color: #9594C4;
|
|
line-height:normal;
|
|
padding-left: 10mm;
|
|
margin: 1mm;
|
|
padding: 0mm 5mm 0mm 5mm;
|
|
|
|
|
|
}
|
|
.h4::after {
|
|
content: ":";
|
|
white-space: pre;
|
|
}
|
|
|
|
.a4::after {
|
|
content: "\A";
|
|
white-space: pre;
|
|
}
|
|
|
|
.tensteps{
|
|
font-family: 'Catamaran Bold', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 12pt;
|
|
color: #b4d194;
|
|
line-height: 16pt;
|
|
padding-top: 100px;
|
|
padding-left: 5mm;
|
|
text-align: center;
|
|
display: inline-block;
|
|
align-self: flex-end;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.image_titles {
|
|
/*width: 105mm;*/
|
|
text-align: center;
|
|
margin-top: 63mm;
|
|
margin-left: 9mm;
|
|
font-family: 'NotCourierSans',Courier, sans-serif;
|
|
|
|
font-size: 12pt;
|
|
/*text-shadow: -1px 2px #393e41;*/
|
|
color:black;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #9594c49e;
|
|
|
|
}
|
|
|
|
|
|
|
|
.game{
|
|
|
|
|
|
object-fit:cover;
|
|
width: 95mm;
|
|
}
|
|
|
|
|
|
@media screen {
|
|
.body{
|
|
background-image: url("background_videos.png");
|
|
background-size: cover;
|
|
|
|
}
|
|
.page{
|
|
border: 1px solid #9594c4;
|
|
margin-bottom: 5px;
|
|
|
|
}
|
|
|
|
|
|
nav {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 50;
|
|
padding: 24px;
|
|
margin-bottom: 50px;
|
|
text-align: right;
|
|
top: 0;
|
|
height: 100px;
|
|
|
|
|
|
|
|
}
|
|
|
|
.navtitle{
|
|
font-size: 40px;
|
|
font-family: 'Catamaran', sans-serif;
|
|
color: #E2C044;
|
|
float:left;
|
|
transform: rotate(-5deg);
|
|
}
|
|
.navtitle:hover{
|
|
color:#9594C4;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
|
|
|
|
.btn {
|
|
background-color:#9594C4;
|
|
border: 0 solid #E5E7EB;
|
|
box-sizing: border-box;
|
|
color: #000000;
|
|
display: flex;
|
|
font-family: 'NotCourierSans', Courier, sans-serif;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
justify-content: center;
|
|
line-height: 1.75rem;
|
|
padding: 0m;
|
|
position: relative;
|
|
text-align: center;
|
|
text-decoration: none #000000 solid;
|
|
text-decoration-thickness: auto;
|
|
max-width: 460px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transform: rotate(-2deg);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
float: right;
|
|
}
|
|
|
|
.btn:focus {
|
|
outline: 0;
|
|
}
|
|
.btn:after {
|
|
content: '';
|
|
position: absolute;
|
|
border: 1px solid black;
|
|
bottom: 4px;
|
|
left: 4px;
|
|
width: calc(100% - 1px);
|
|
height: calc(100% - 1px);
|
|
}
|
|
|
|
.btn:hover:after {
|
|
bottom: 2px;
|
|
left: 2px;
|
|
border: 1px solid #E2C044;
|
|
color:#E2C044;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.btn {
|
|
padding: .75rem 3rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
#textbox {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100px;
|
|
height: 50px;
|
|
}
|
|
|
|
|
|
.situation{
|
|
color: #9594C4;
|
|
}
|
|
|
|
.binding{
|
|
color:#a6dbf0;
|
|
}
|
|
|
|
.paperformat{
|
|
color:#E2C044
|
|
}
|
|
|
|
.addons{
|
|
color:#b4d194
|
|
}
|
|
|
|
#results {
|
|
|
|
border: 5px solid;
|
|
padding: 50px;
|
|
background-color: white;
|
|
display: inline-block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
.title{
|
|
margin-top: 100px;
|
|
width: 100%;
|
|
padding: 10px;
|
|
text-align: center;
|
|
|
|
}
|
|
.reload{
|
|
|
|
color:#c4007a;
|
|
margin-top:10px;
|
|
font-family: 'NotCourierSans Bold', Courier, monospace;
|
|
}
|
|
|
|
.reload:hover {
|
|
background-color:#c4007a;
|
|
padding: 20px 60px 20px 60px;
|
|
|
|
}
|
|
|
|
.titlegenerator{
|
|
padding-top: 0;
|
|
padding-bottom: 50px;
|
|
font-size: 35px;
|
|
line-height: normal;
|
|
}
|
|
.titlegenerator:hover{
|
|
color:#E2C044;
|
|
}
|
|
|
|
.generator{
|
|
font-size: 20px;
|
|
line-height: normal;
|
|
}
|
|
|
|
|
|
|
|
.center{
|
|
width: 100%;
|
|
margin-top: 40px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.video {
|
|
position: relative;
|
|
padding-top: 4.1%;
|
|
padding-bottom: 51.95%;
|
|
height: 0;
|
|
}
|
|
.video iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.video-gallery {
|
|
margin-top: 3em;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.video-gallery .video {
|
|
animation: 1200ms fadeOut ease;
|
|
animation-fill-mode: both;
|
|
grid-column-start: 1;
|
|
grid-row-start: 1;
|
|
grid-row-end: 7;
|
|
max-height: 19.5em;
|
|
opacity: 0;
|
|
transition: all 300ms ease;
|
|
}
|
|
.video-gallery input[type=radio] {
|
|
font-size: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
padding: 0;
|
|
position: fixed;
|
|
width: 0;
|
|
}
|
|
.video-gallery input {
|
|
grid-column-start: 1;
|
|
grid-row-start: 1;
|
|
}
|
|
.video-gallery label {
|
|
color: #000000;
|
|
font-size: 1.25em;
|
|
font-weight: 400;
|
|
grid-column-start: 2;
|
|
margin: 0 !important;
|
|
padding: 1rem 0 1rem 3rem;
|
|
position: relative;
|
|
border-bottom: 1px solid #9594C4;
|
|
cursor:pointer;
|
|
}
|
|
.video-gallery label:last-of-type {
|
|
border: 0 none;
|
|
}
|
|
.video-gallery input[type=radio]:checked + label {
|
|
color: #c4007a !important;
|
|
pointer-events: none;
|
|
|
|
|
|
}
|
|
.video-gallery input[type=radio]:checked + label:before {
|
|
content: "°";
|
|
left: 0;
|
|
top: 12px;
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
.grid-row {
|
|
display: block;
|
|
height: 56vw;
|
|
max-height: 19.5em;
|
|
position: relative;
|
|
}
|
|
.grid-row label {
|
|
left: calc(50% + 16px);
|
|
position: relative;
|
|
width: calc(50% - 16px);
|
|
}
|
|
.grid-row .video {
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 0;
|
|
}
|
|
.grid-row:after {
|
|
content: "";
|
|
clear: both;
|
|
display: table;
|
|
}
|
|
|
|
#video-1:checked ~ .video-1, #video-2:checked ~ .video-2, #video-3:checked ~ .video-3, #video-4:checked ~ .video-4, #video-5:checked ~ .video-5, #video-6:checked ~ .video-6 {
|
|
animation: 1200ms fadeIn ease;
|
|
animation-fill-mode: both;
|
|
opacity: 1;
|
|
width: 50%;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 1;
|
|
width: 50%;
|
|
}
|
|
25% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 1;
|
|
width: 50%;
|
|
}
|
|
49% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 0;
|
|
width: 50%;
|
|
}
|
|
50% {
|
|
display: none;
|
|
height: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
}
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
49% {
|
|
display: none;
|
|
height: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
50% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 0;
|
|
width: 50%;
|
|
}
|
|
100% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 1;
|
|
width: 50%;
|
|
}
|
|
}
|
|
@supports (display: grid) {
|
|
.grid-row {
|
|
align-items: start;
|
|
display: grid;
|
|
grid-column-gap: 16px;
|
|
grid-row-gap: 0;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
width: 100%;
|
|
}
|
|
.grid-row label {
|
|
left: auto;
|
|
width: 100%;
|
|
}
|
|
.grid-row .video {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
@keyframes fadeOut {
|
|
0% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 1;
|
|
width: 100%;
|
|
}
|
|
25% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 1;
|
|
width: 100%;
|
|
}
|
|
49% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 0;
|
|
width: 100%;
|
|
}
|
|
50% {
|
|
display: none;
|
|
height: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
}
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
49% {
|
|
display: none;
|
|
height: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
50% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 0;
|
|
width: 100%;
|
|
}
|
|
100% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 1;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.video-gallery {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: auto;
|
|
max-height: none;
|
|
}
|
|
.video-gallery label {
|
|
font-family: 'NotCourierSans Bold', Courier, monospace;
|
|
color: #c4007a;
|
|
left: auto;
|
|
order: 2;
|
|
width: 100%;
|
|
}
|
|
|
|
.video-gallery .video {
|
|
order: 1;
|
|
padding-top: 4.1%;
|
|
padding-bottom: 51.95%;
|
|
position: relative;
|
|
top: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
#video-1:checked ~ .video-1, #video-2:checked ~ .video-2, #video-3:checked ~ .video-3, #video-4:checked ~ .video-4, #video-5:checked ~ .video-5, #video-6:checked ~ .video-6 {
|
|
width: 100%;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 1;
|
|
}
|
|
49% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
display: none;
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
49% {
|
|
display: none;
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
display: block;
|
|
height: 56vw;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
label{
|
|
font-family: 'NotCourierSans Bold', Courier, monospace;
|
|
font-weight: 1000;
|
|
color: #c4007a;
|
|
cursor:pointer;
|
|
}
|
|
|
|
|
|
.photogallery {
|
|
display: grid;
|
|
grid-template-rows:max-content;
|
|
grid-template-columns: repeat(8, 8fr);
|
|
grid-gap: 5px;
|
|
margin: 50px;
|
|
}
|
|
|
|
.photogallery_img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border: 5px solid #a6dbf0;
|
|
}
|
|
|
|
|
|
|
|
.contact{
|
|
|
|
float:left;
|
|
text-align: left;
|
|
}
|
|
|
|
.container{
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: fit-content;
|
|
}
|
|
|
|
#reload{
|
|
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
#reload:hover{
|
|
background-color: #c4007a;
|
|
cursor: pointer;
|
|
|
|
}
|