html {
box-sizing: border-box;
scroll-snap-type: y mandatory;
}
*, *:after, *:before {
box-sizing: border-box;
}
a{
text-decoration: none;
color: white;
cursor:url(material/cursor2.png),pointer;
}
body en,html{
cursor:url(material/cursor3.png),pointer;
}
@font-face {
font-family: 'domaine';
src: url('fonts/domaine-display-regular.woff2') format('woff2');
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: 'domaine';
src: url('fonts/domaine-display-regular-italic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
font-display: swap;
}
html {
scroll-behavior: smooth;
}
body .de,
body .en,
body .fr {
display: none;
}
body.de .de,
body.en .en,
body.fr .fr {
display: initial;
}
.en {
margin: 0;
}
.fr {
margin: 0;
}
.de {
margin: 0;
}
/* EFFEKTE UND SO */
.blinker {
animation: blinker 1.5s linear infinite;
cursor: pointer;
}
@keyframes blinker {
50% {
color: rgb(251, 74, 133);
}
}
.fade-in {
position: fixed; /* Fixes the position on the screen */
top: 50%; /* Centers vertically */
left: 50%; /* Centers horizontally */
transform: translate(-50%, -50%); /* Adjusts to center the element */
font-size: 48px; /* Adjust the size as needed */
color: black; /* Change to your desired color */
opacity: 0; /* Start invisible */
transition: opacity 1.5s ease; /* Smooth transition for opacity */
z-index: 1000; /* Ensure it's on top of other content */
}
#main-content {
display: none;
}
.glow {
font-weight: bold;
color: rgb(255, 255, 255); /* Default text color */
display: inline-block;
position: relative;
animation: pulsate-glow 3s ease-in-out infinite; /* Adjust the timing for a slower or faster pulsate */
-webkit-animation: pulsate-glow 3s ease-in-out infinite; /* For Safari */
text-shadow: 0 0 5px hsl(0, 100%, 40%), 0 0 10px hsl(0, 100%, 75%), 0 0 15px hsl(0, 100%, 75%); /* Initial color (red) */
}
/* Pulsating glow with hue shift */
@keyframes pulsate-glow {
0% {
text-shadow: 0 0 5px hsl(0, 100%, 75%), 0 0 10px hsl(0, 100%, 75%), 0 0 15px hsl(0, 100%, 75%); /* Red */
}
20% {
text-shadow: 0 0 5px hsl(60, 100%, 75%), 0 0 10px hsl(60, 100%, 75%), 0 0 15px hsl(60, 100%, 75%); /* Yellow */
}
40% {
text-shadow: 0 0 5px hsl(120, 100%, 75%), 0 0 10px hsl(120, 100%, 75%), 0 0 15px hsl(120, 100%, 75%); /* Green */
}
60% {
text-shadow: 0 0 5px hsl(180, 100%, 75%), 0 0 10px hsl(180, 100%, 75%), 0 0 15px hsl(180, 100%, 75%); /* Cyan */
}
80% {
text-shadow: 0 0 5px hsl(240, 100%, 75%), 0 0 10px hsl(240, 100%, 75%), 0 0 15px hsl(240, 100%, 75%); /* Blue */
}
100% {
text-shadow: 0 0 5px hsl(300, 100%, 75%), 0 0 10px hsl(300, 100%, 75%), 0 0 15px hsl(300, 100%, 75%); /* Purple */
}
}
/* SLIDER STUFF */
/* Container for both sliders */
.slider-container {
display: flex;
justify-content: space-between;
overflow: hidden;
position: relative;
}
/* The slider itself (for both right and left sliders) */
.slider-right, .slider-left {
flex: 1;
width: 50%; /* or any other width you prefer */
white-space: nowrap;
position: absolute;
}
/* The content inside the slider */
.slider-content {
display: flex;
flex-direction: column;
animation: slideRightToLeft 10s linear infinite;
}
/* Text inside each slider */
.slider-text {
display: inline-block;
padding-right: 20px; /* Space between each sentence */
}
/* Animation for the slider moving right to left */
@keyframes slideRightToLeft {
0% {
transform: translateX(100%); /* Start off-screen to the right */
}
100% {
transform: translateX(-100%); /* End off-screen to the left */
}
}
/* Animation for the slider moving left to right */
@keyframes slideLeftToRight {
0% {
transform: translateX(-100%); /* Start off-screen to the left */
}
100% {
transform: translateX(100%); /* End off-screen to the right */
}
}
.slider-left .slider-content {
animation: slideLeftToRight 10s linear infinite;
}
/* HOMEPAGE */
.image {
width: 100%;
margin: 0%;
display:block;
margin-left: auto;
margin-right: auto;
}
.projectinfo {
display: flex;
}
.weltklasse_front {
width: 100%;
}
.hochformat {
width: 60%;
}
.fill {
object-fit: none;
width: 90%;
}
.weltklasse-duo {
display: flex;
}
.weltklasse50 {
width: 50%;
}
.fit {
width: 50%;
object-fit: none;
margin-left: -50;
}
.madlen {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode:both;
overflow: visible;
display: flex;
text-align: right;
padding-right: 5px;
width:100%;
padding-right: 30px;
}
.auchselberdenken {
width: 50%;
display: block;
}
.shortfilm {
width: 90%;
display: block;
}
.shortfilm_mini {
width: 80%;
display: block;
padding-left: 10%;
}
.shortfilm_mini_right {
display: block;
padding-left: 40%;
}
.welcome {
width: 25%;
margin-left: auto;
margin-right: auto;
display: block;
}
.rotate5 {
transform: rotate(3deg);
}
.aboutmecontainer {
width: 100%;
padding-left: 30px;
padding-top: 30px;
}
/* PROJEKTEINSTELLUNGEN UND PADDINGS */
.padding300 {
padding-left: 300px;
padding-right: 300px;
padding-bottom: 100px;
}
.analog {
width: 80%;
}
.zeitung {
width: 90%;
}
.siebzig {
width: 70%;
}
.weltklasse__gif {
width: 60%;
}
.sketch_flex {
display: flex;
}
.mini_text {
font-size: 14px;
font-family: domaine;
font-style: normal;
font-weight: normal;
color: black;
padding-right: 40px;
padding-bottom: 20px;
font-kerning: 3px;
text-align: left;
}
.mini_text_rechts {
font-size: 14px;
font-family: domaine;
font-style: normal;
font-weight: normal;
color: black;
padding-right: 100px;
padding-bottom: 20px;
font-kerning: 3px;
text-align: right;
}
.allesimsack {
width: 80%;
display:block;
margin-left: auto;
margin-right: auto;
}
/* SCROLL FADE IN */
.frontcontainer {
width:100%;
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode:both;
overflow: visible;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* DESKTOP */
@media (min-width: 1200px) {
.container {
padding-left: 250px;
padding-right: 250px;
padding-top: 50px;
padding-bottom: 200px;
display: block;
}
.maintitlecontainer {
width: 100%;
padding-left: 30px;
padding-right: 50px;
padding-top: 25px;
margin: 0;
z-index: 1;
display: flex;
justify-content: space-between;
mix-blend-mode: multiply;
}
.titlecontainer {
width: 100%;
padding-left: 25px;
padding-right: 50px;
padding-top: 30px;
margin: 0;
position: fixed;
z-index: 1;
display: flex;
justify-content: space-between;
mix-blend-mode: multiply;
}
.bottomcontainer {
width: 100%;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 30px;
bottom: 0;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 1;
mix-blend-mode: multiply;
}
.madlencontainer {
width: 27%;
}
.paragraphcontainer {
width: 60%;
}
.banner{
overflow: hidden;
white-space: nowrap;
padding: 5px 0px 5px 0px;
background: rgb(250, 225, 0);
color: white;
font-family: domaine;
font-size: 20pt;
}
.banner-lab{
overflow: hidden;
white-space: nowrap;
padding: 5px 0px 5px 0px;
background: rgb(255, 0, 144);
color: white;
font-family: domaine;
font-size: 20pt;
}
.banner-slide{
display: inline-block;
height: 5px;
animation: 10s slide infinite linear;
white-space: nowrap;
}
@keyframes slide{
from{
transform: translateX(0)
}
to{
transform: translateX(-100%)
}
}
.aboutmecontainer {
display: flex;
}
.skillscontainer {
width: 60%;
}
.sketching {
width: 60%;
}
.frontcontainer {
columns: 3;
/* padding-left: 300px; */
break-inside: avoid-column;
}
.opacity {
opacity: 100%;
}
.opacity:hover {
opacity: 80%;
transition: ease;
}
.textcontainer {
padding-top: 100px;
}
.project__textbox {
padding-top: 50px;
}
.padding_70 {
padding-bottom: 70px;
}
.abschlussprojekt_reihe {
display: flex;
columns: 3;
justify-content: space-between;
padding-bottom: 30px;
}
.abschlussprojekt_reihe img {
width: 33.3%; /* Adjust image width to fit three images in a row */
height: auto; /* Keeps the aspect ratio of images */
}
.auchselberdenken {
width: 30%;
max-width: 100%;
object-fit: cover;
}
.analogfoto-duo {
display: flex;
}
.corporatedesign_reihe {
columns: 3;
}
.abschlussprojekt_front {
width: 100%;
}
.imagefront {
padding-bottom: 30px;
}
.weltklasse {
width: 40%;
margin: 0%;
display:block;
margin-left: auto;
margin-right: auto;
padding-bottom: 30px;
}
.corporate-design {
display: flex;
width: 40%;
}
.width55 {
width: 55%;
}
.width65 {
width: 65%;
}
.width80 {
width: 80%;
}
.width100 {
width: 105%;
}
.prettyugly {
width: 60%;
margin: 0%;
display:block;
margin-left: auto;
margin-right: auto;
padding-bottom: 70px;
}
.imagesketch {
width: 65%;
}
/* ABOUT ME */
.aboutme_textbox {
width: 100%;
display: flex;
}
.skills {
width: 100%;
}
/* TYPOGRAFIE */
.project_text {
font-size: 24px;
font-family: domaine;
font-style: normal;
font-weight: normal;
color: black;
text-decoration: none;
margin: 0;
padding-right: 40px;
padding-bottom: 20px;
font-kerning: 3px;
}
.madlen_text {
font-size: 30px;
font-family: domaine;
font-style: normal;
font-weight: normal;
color: black;
text-decoration: none;
margin: 0;
padding-right: 40px;
padding-bottom: 20px;
font-kerning: 3px;
}
.titletext {
font-size: 35px;
font-family: domaine;
font-style: normal;
font-weight: normal;
color: black;
text-decoration: none;
margin: 0;
padding-left: 0px;
padding-top: 0px;
justify-self: right;
right: 0;
/* transform: rotate(-5deg); */
}
.titletext:hover {
font-style: oblique;
}
.email {
color: black;
text-decoration: none;
}
.info {
margin: 0;
text-align: right;
}
.sprachumschalter {
text-align: right;
}
/* EINZELNE EINSTELLUNGEN */
.medienwocheplakate {
width: 28%;
display: flex;
padding-bottom: 60px;
}
}
/* TABLET */
@media (min-width: 680px) and (max-width: 1199px) {
.container {
padding-left: 190px;
padding-right: 190px;
padding-top: 150px;
padding-bottom: 200px;
display: block;
}
.titlecontainer {
width: 100%;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
margin: 0;
position: fixed;
z-index: 1;
display: flex;
justify-content: space-between;
mix-blend-mode: multiply;
}
.maintitlecontainer {
width: 100%;
padding-left: 25px;
padding-right: 50px;
padding-top: 25px;
margin: 0;
z-index: 1;
display: flex;
justify-content: space-between;
mix-blend-mode: multiply;
}
.bottomcontainer {
width: 100%;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
bottom: 0;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 1;
mix-blend-mode: multiply;
}
.aboutmecontainer {
display: block;
padding-bottom: 200px;
}
.paragraphcontainer {
width: 100%;
}
.skillscontainer {
width: 100%;
}
.banner{
overflow: hidden;
white-space: nowrap;
padding: 12px 0px 12px 0px;
background: rgb(250, 225, 0);
color: white;
font-family: domaine;
font-size: 18pt;
}
.banner-lab{
overflow: hidden;
white-space: nowrap;
padding: 12px 0px 12px 0px;
background: rgb(255, 0, 144);
color: white;
font-family: domaine;
font-size: 18pt;
}
.banner-slide{
display: inline-block;
height: 5px;
animation: 10s slide infinite linear;
white-space: nowrap;
}
@keyframes slide{
from{
transform: translateX(0)
}
to{
transform: translateX(-100%)
}
}
.madlen {
display: flex;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.sketching {
width: 60%;
}
.frontcontainer {
columns: 3;
padding-top: 40px;
padding-left: 20px;
padding-right: 25px;
padding-bottom: 20px;
break-inside: avoid-column;
}
.opacity {
opacity: 100%;
}
.opacity:hover {
opacity: 80%;
transition: ease;
}
.textcontainer {
padding-top: 50px;
}
.project__textbox {
padding-top: 50px;
}
.padding_70 {
padding-bottom: 40px;
}
.prettyugly {
width: 60%;
margin: 0%;
display:block;
margin-left: auto;
margin-right: auto;
padding-bottom: 150px;
}
.auchselberdenken {
width: 100%;
max-width: 100%;
object-fit: cover;
}
.analogfoto-duo {
display: flex;
}
.corporatedesign_reihe {
columns: 3;
}
.abschlussprojekt_reihe {
display: flex;
columns: 3;
justify-content: space-between;
padding-bottom: 30px;
}
.abschlussprojekt_reihe img {
width: 33.3%; /* Adjust image width to fit three images in a row */
height: auto; /* Keeps the aspect ratio of images */
}
.abschlussprojekt_front {
width: 100%;
}
.imagefront {
padding-bottom: 30px;
}
.weltklasse {
width: 40%;
margin: 0%;
display:block;
margin-left: auto;
margin-right: auto;
padding-bottom: 30px;
}
.corporate-design {
display: flex;
width: 40%;
}
.width65 {
width: 65%;
}
.prettyugly {
width: 60%;
margin: 0%;
display:block;
margin-left: auto;
margin-right: auto;
padding-bottom: 40px;
}
.medienwocheplakate {
width: 20%;
display: flex;
}
.imagesketch {
width: 65%;
}
/* ABOUT ME */
/* TYPOGRAFIE */
.project_text {
font-size: 26px;
font-family: domaine;
font-style: normal;
font-weight: normal;
color: black;
text-decoration: none;
margin: 0;
padding-right: 40px;
padding-bottom: 20px;
font-kerning: 3px;
}
.madlen_text {
font-size: 30px;
font-family: domaine;
font-style: normal;
font-weight: normal;
color: black;
text-decoration: none;
margin: 0;
padding-right: 40px;
padding-bottom: 20px;
font-kerning: 3px;
}
.titletext {
font-size: 32px;
font-family: domaine;
font-style: normal;
font-weight: normal;
color: black;
text-decoration: none;
margin: 0;
padding-left: 0px;
padding-top: 0px;
justify-self: right;
right: 0;
/* transform: rotate(-5deg); */
}
.titletext:hover {
font-style: oblique;
}
.info {
margin: 0;
text-align: right;
}
.sprachumschalter {
text-align: right;
}
/* EINZELNE EINSTELLUNGEN */
.medienwocheplakate {
width: 20%;
display: flex;
}
}
/* SMARTPHONE */
@media (max-width: 679px) {
.container {
padding-left: 30px;
padding-right: 30px;
padding-top: 120px;
padding-bottom: 200px;
display: block;
}
.titlecontainer {
width: 100%;
padding-left: 15px;
padding-right: 30px;
padding-top: 20px;
margin: 0;
position: fixed;
z-index: 1;
display: flex;
justify-content: space-between;
mix-blend-mode: multiply;
}
.maintitlecontainer {
width: 100%;
padding-left: 15px;
padding-right: 15px;
padding-top: 20px;
margin: 0;
z-index: 1;
display: flex;
justify-content: space-between;
mix-blend-mode: multiply;
}
.bottomcontainer {
width: 100%;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
bottom: 0;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 1;
mix-blend-mode: multiply;
}
.aboutmecontainer {
display: block;
padding-bottom: 100px;
}
.paragraphcontainer {
width: 100%;
}
.banner{
overflow: hidden;
white-space: nowrap;
padding: 7px 0px 7px 0px;
background: rgb(250, 225, 0);
color: white;
font-family: domaine;
font-size: 15pt;
}
.banner-lab{
overflow: hidden;
white-space: nowrap;
padding: 7px 0px 7px 0px;
background: rgb(255, 0, 144);
color: white;
font-family: domaine;
font-size: 15pt;
}
.banner-slide{
display: inline-block;
height: 5px;
animation: 10s slide infinite linear;
white-space: nowrap;
}
@keyframes slide{
from{
transform: translateX(0)
}
to{
transform: translateX(-100%)
}
}
.madlen {
width: 80%;
margin-right: auto;
margin-left: auto;
}
.skills {
width: 85%;
}
.sketching {
width: 60%;
}
.frontcontainer {
columns: 1;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
break-inside:avoid;
}
.paddingdesktop {
padding-bottom: 20px;
}
.opacity {
opacity: 100%;
}
.opacity:hover {
opacity: 80%;
transition: ease-in-out;
}
.textcontainer {
padding-top: 30px;
}
.skillscontainer {
width: 100%;
}
.project__textbox {
padding-top: 50px;
}
.padding_70 {
padding-bottom: 30px;
}
.prettyugly {
width: 80%;
margin: 0%;
display:block;
margin-left: auto;
margin-right: auto;
padding-bottom: 30px;
}
.auchselberdenken {
width: 100%;
max-width: 100%;
object-fit: cover;
}
.analogfoto-duo {
display: block;
}
.medienwocheplakate {
display: block;
}
.corporatedesign_reihe {
columns: 3;
}
.abschlussprojekt_reihe {
display: flex;
columns: 3;
justify-content: space-between;
}
.abschlussprojekt_reihe img {
width: 33.3%; /* Adjust image width to fit three images in a row */
height: auto; /* Keeps the aspect ratio of images */
}
.abschlussprojekt_front {
width: 100%;
}
.imagefront {
padding-bottom: 30px;
}
.weltklasse {
width: 80%;
margin: 0%;
display:block;
margin-left: auto;
margin-right: auto;
padding-bottom: 30px;
}
.corporate-design {
display: flex;
width: 40%;
}
.width65 {
width: 65%;
}
.imagesketch {
width: 65%;
}
/* ABOUT ME */
/* .aboutme_textbox {
padding-bottom: 25px;
} */
/* TYPOGRAFIE */
.project_text {
font-size: 20px;
font-family: domaine;
font-style: normal;
font-weight: normal;
color: black;
text-decoration: none;
margin: 0;
padding-right: 40px;
padding-bottom: 20px;
font-kerning: 3px;
}
.madlen_text {
font-size: 20px;
font-family: domaine;
font-style: normal;
font-weight: normal;
color: black;
text-decoration: none;
margin: 0;
padding-right: 40px;
padding-bottom: 20px;
font-kerning: 3px;
}
.titletext {
font-size: 22px;
font-family: domaine;
font-style: normal;
font-weight: normal;
color: black;
text-decoration: none;
margin: 0;
padding-left: 0px;
padding-top: 0px;
justify-self: right;
right: 0;
/* transform: rotate(-5deg); */
}
.titletext:hover {
font-style: oblique;
}
.info {
margin: 0;
text-align: right;
}
.sprachumschalter {
text-align: right;
}
/* EINZELNE EINSTELLUNGEN */
}