@charset "utf-8";


/* Font Import */

@import url("https://use.typekit.net/qeu6kmr.css");

@font-face {
src: url("fonts/fifty_regular.otf") format("opentype");
font-family: "fifty_regular";
}

@font-face {
src: url("fonts/tiny5x3_40.ttf") format("truetype");
font-family: "tiny5x3_40";
}

@font-face {
src: url("fonts/tiny5x3_gx.ttf") format("truetype");
font-family: "tiny5x3_gx";
}


/* Presettings */

* {
-moz-appearance: none;
-moz-user-select: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
appearance: none;
-ms-user-select: none;
border-color: transparent;
outline: 0;
font-family: "nimbus-roman", serif;
font-style: normal;
font-weight: normal;
line-height: 100%;
user-select: none;
}

html, body {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

body {
-webkit-animation: draggable_function_appearance_debugging 10s infinite;
animation: draggable_function_appearance_debugging 10s infinite;
}

@-webkit-keyframes draggable_function_appearance_debugging {
from {
background-color: white;
}

to {
background-color: transparent;
}
}

@keyframes draggable_function_appearance_debugging {
from {
background-color: white;
}

to {
background-color: transparent;
}
}


/* Basic Styles */

a {
color: inherit;
font-family: inherit;
text-decoration: inherit;
}

.alert_text, .description_text, .cv_link, .work_title, .link {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}

.white_filling {
fill: white;
}

.popup {
display: none;
position: absolute;
top: 0;
left: 0;
height: auto;
}

.description {
height: auto;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 14px;
padding-left: 15px;
background-color: black;
color: white;
font-size: 17.5px;
line-height: 110%;
}

.title {
display: block;
margin-top: 1px;
margin-bottom: 8px;
font-family: "fifty_regular", sans-serif;
font-size: 18.1px;
}

.gallery_image_landscape_orientation, .hidden_item_landscape_orientation {
width: auto;
height: 532px;
}

.gallery_image_portrait_orientation, .hidden_item_portrait_orientation {
width: auto;
height: 620px;
}

.height_adjustment {
width: auto;
height: auto;
}

.cv_icon, .email_icon, .letter_icon, .popup {
cursor: move;
}

button, .sfvr_link, .sfvr_for_small_display_sizes_link, .link {
cursor: pointer;
}


/* Browser Alert */

#browser_alert {
display: none;
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
background-color: white;
}

.alert_text {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 17.5px;
}


/* Logo */

.logo {
-webkit-box-align: center;
-webkit-box-pack: center;
display: -webkit-box;
display: flex;
align-items: center;
justify-content: center;
margin-top: 34px;
}

h1 {
-webkit-transition: letter-spacing 0.3s linear;
-o-transition: letter-spacing 0.3s linear;
display: inline-block;
margin: 0;
font-family: "fifty_regular", sans-serif;
font-size: 60px;
transition: letter-spacing 0.3s linear;
}

h1:hover {
letter-spacing: 0.1em;
cursor: default;
}


/* Color Change Buttons */

button {
width: 0;
height: 0;
margin: 0;
padding: 0;
float: left;
border-width: 0;
text-decoration: none;
}

#color_change_buttons {
position: absolute;
top: 19vh;
left: 10vw;
}

#button_black {
-webkit-animation: button_black 2s infinite step-start;
border-bottom: 42px solid black;
animation: button_black 2s infinite step-start;
}

@-webkit-keyframes button_black {
33.333% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: black;
}

66.666% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: black;
}

100% {
width: 0;
height: 0;
border-right: 21px solid transparent;
border-bottom: 42px solid black;
border-left: 21px solid transparent;
background-color: transparent;
}
}

@keyframes button_black {
33.333% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: black;
}

66.666% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: black;
}

100% {
width: 0;
height: 0;
border-right: 21px solid transparent;
border-bottom: 42px solid black;
border-left: 21px solid transparent;
background-color: transparent;
}
}

#button_red {
-webkit-animation: button_red 2s infinite step-start;
border-bottom: 42px solid red;
animation: button_red 2s infinite step-start;
}

@-webkit-keyframes button_red {
33.333% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: red;
}

66.666% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: red;
}

100% {
width: 0;
height: 0;
border-right: 21px solid transparent;
border-bottom: 42px solid red;
border-left: 21px solid transparent;
background-color: transparent;
}
}

@keyframes button_red {
33.333% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: red;
}

66.666% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: red;
}

100% {
width: 0;
height: 0;
border-right: 21px solid transparent;
border-bottom: 42px solid red;
border-left: 21px solid transparent;
background-color: transparent;
}
}

#button_blue {
-webkit-animation: button_blue 2s infinite step-start;
border-bottom: 42px solid blue;
animation: button_blue 2s infinite step-start;
}

@-webkit-keyframes button_blue {
33.333% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: blue;
}

66.666% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: blue;
}

100% {
width: 0;
height: 0;
border-right: 21px solid transparent;
border-bottom: 42px solid blue;
border-left: 21px solid transparent;
background-color: transparent;
}
}

@keyframes button_blue {
33.333% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: blue;
}

66.666% {
width: 42px;
height: 42px;
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: blue;
}

100% {
width: 0;
height: 0;
border-right: 21px solid transparent;
border-bottom: 42px solid blue;
border-left: 21px solid transparent;
background-color: transparent;
}
}


/* SfVR */

#sfvr, #sfvr_for_small_display_sizes {
position: absolute;
bottom: 8vh;
left: 5vw;
}

#sfvr_for_small_display_sizes {
display: none;
}

.sfvr_logo, .sfvr_logo_for_small_display_sizes {
-webkit-transform: rotate(-15deg);
-webkit-transition: font-variation-settings 4s linear;
font-variation-settings: "wght" 40;
-o-transition: font-variation-settings 4s linear;
transform: rotate(-15deg);
font-family: "tiny5x3_gx", "tiny5x3_40", sans-serif;
font-size: 190px;
transition: font-variation-settings 4s linear;
}

.sfvr_logo:hover, .sfvr_logo_for_small_display_sizes:hover {
font-variation-settings: "wght" 800;
}

.sfvr_gallery_popup_one {
top: 28vh;
left: 15vw;
}

.sfvr_description {
width: 398px;
}


/* CV */

#cv {
position: absolute;
top: 30vh;
left: 25vw;
width: 71px;
height: auto;
}

.cv_icon {
position: absolute;
width: 71px;
height: 90px;
}

#c, #v {
position: absolute;
top: 18px;
width: 100%;
font-family: "nimbus-roman", serif;
font-size: 63px;
font-style: normal;
font-weight: 700;
text-align: center;
}

#c {
-webkit-animation: c 2s infinite step-start;
animation: c 2s infinite step-start;
}

@-webkit-keyframes c {
0% {
opacity: 1;
}

33.333% {
opacity: 1;
}

66.666% {
opacity: 0;
}

100% {
opacity: 0;
}
}

@keyframes c {
0% {
opacity: 1;
}

33.333% {
opacity: 1;
}

66.666% {
opacity: 0;
}

100% {
opacity: 0;
}
}

#v {
-webkit-animation: v 2s infinite step-start;
animation: v 2s infinite step-start;
}

@-webkit-keyframes v {
0% {
opacity: 0;
}

33.333% {
opacity: 0;
}

66.666% {
opacity: 1;
}

100% {
opacity: 0;
}
}

@keyframes v {
0% {
opacity: 0;
}

33.333% {
opacity: 0;
}

66.666% {
opacity: 1;
}

100% {
opacity: 0;
}
}

.cv_popup_one {
top: 26vh;
left: 32vw;
width: 360px;
}


/* Email */

#email {
position: absolute;
top: 19vh;
right: 20vw;
width: 90px;
height: 71px;
}


/* Galleries */

.letter_icon {
width: 355px;
height: 452px;
}

#works_navigation, #projects_navigation {
display: none;
position: absolute;
top: 9px;
margin-left: 16px;
}

.link {
float: left;
clear: both;
font-size: 42px;
line-height: 100%;
}

.link:hover {
font-weight: 700;
}


/* Works */

#works {
position: absolute;
top: 33vh;
right: 13vw;
height: 0;
}

.works_gallery_popup_one {
top: 5vh;
left: 10vw;
}

.work_title {
margin-top: 6px;
font-size: 17.5px;
line-height: 110%;
}

.italic {
font-family: "nimbus-roman", serif;
font-size: inherit;
font-style: italic;
line-height: inherit;
}


/* Projects */

#projects {
display: none;
position: absolute;
top: 36vh;
right: 10vw;
height: 0;
}

.projects_gallery_popup_one {
top: 15vh;
left: 10vw;
}

.projects_gallery_popup_two {
top: 13vh;
left: 30vw;
}

.projects_gallery_popup_three {
top: 22vh;
left: 22vh;
}

.die_neue_altstadt_description {
width: 481px;
}

.eurs_description {
width: 437px;
}

.jax_description {
width: 427px;
}


/* Window Size A Start */

@media screen and (min-width: 1900px) and (min-height: 900px) {


/* Basic Styles */

.description {
padding-top: calc(15px * 1.23);
padding-right: calc(15px * 1.23);
padding-bottom: calc(14px * 1.23);
padding-left: calc(15px * 1.23);
font-size: calc(17.5px * 1.23);
}

.title {
margin-top: calc(1px * 1.23);
margin-bottom: calc(8px * 1.23);
font-size: calc(18.1px * 1.23);
}

.gallery_image_landscape_orientation, .hidden_item_landscape_orientation {
height: calc(532px * 1.23);
}

.gallery_image_portrait_orientation, .hidden_item_portrait_orientation {
height: calc(620px * 1.23);
}

.height_adjustment {
width: auto;
height: auto;
}


/* Browser Alert */

.alert_text {
font-size: calc(17.5px * 1.23);
}


/* Logo */

.logo {
margin-top: calc(34px * 1.23);
}

h1 {
font-size: calc(60px * 1.23);
}


/* Color Change Buttons */

#button_black {
border-bottom: calc(42px * 1.23) solid black;
}

@-webkit-keyframes button_black {
33.333% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: black;
}

66.666% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: black;
}

100% {
width: 0;
height: 0;
border-right: calc(21px * 1.23) solid transparent;
border-bottom: calc(42px * 1.23) solid black;
border-left: calc(21px * 1.23) solid transparent;
background-color: transparent;
}
}

@keyframes button_black {
33.333% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: black;
}

66.666% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: black;
}

100% {
width: 0;
height: 0;
border-right: calc(21px * 1.23) solid transparent;
border-bottom: calc(42px * 1.23) solid black;
border-left: calc(21px * 1.23) solid transparent;
background-color: transparent;
}
}

#button_red {
border-bottom: calc(42px * 1.23) solid red;
}

@-webkit-keyframes button_red {
33.333% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: red;
}

66.666% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: red;
}

100% {
width: 0;
height: 0;
border-right: calc(21px * 1.23) solid transparent;
border-bottom: calc(42px * 1.23) solid red;
border-left: calc(21px * 1.23) solid transparent;
background-color: transparent;
}
}

@keyframes button_red {
33.333% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: red;
}

66.666% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: red;
}

100% {
width: 0;
height: 0;
border-right: calc(21px * 1.23) solid transparent;
border-bottom: calc(42px * 1.23) solid red;
border-left: calc(21px * 1.23) solid transparent;
background-color: transparent;
}
}

#button_blue {
border-bottom: calc(42px * 1.23) solid blue;
}

@-webkit-keyframes button_blue {
33.333% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: blue;
}

66.666% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: blue;
}

100% {
width: 0;
height: 0;
border-right: calc(21px * 1.23) solid transparent;
border-bottom: calc(42px * 1.23) solid blue;
border-left: calc(21px * 1.23) solid transparent;
background-color: transparent;
}
}

@keyframes button_blue {
33.333% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: blue;
}

66.666% {
width: calc(42px * 1.23);
height: calc(42px * 1.23);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: blue;
}

100% {
width: 0;
height: 0;
border-right: calc(21px * 1.23) solid transparent;
border-bottom: calc(42px * 1.23) solid blue;
border-left: calc(21px * 1.23) solid transparent;
background-color: transparent;
}
}


/* SfVR */

#sfvr, #sfvr_for_small_display_sizes {
bottom: 8vh;
left: 5vw;
}

.sfvr_logo, .sfvr_logo_for_small_display_sizes {
font-size: calc(190px * 1.23);
}

.sfvr_description {
width: calc(398px * 1.23);
}

.sfvr_gallery_popup_one {
top: 27vh;
left: 14vw;
}


/* CV */

#cv {
width: calc(71px * 1.23);
}

.cv_icon {
width: calc(71px * 1.23);
height: calc(90px * 1.23);
}

#c, #v {
top: calc(18px * 1.23);
font-size: calc(63px * 1.23);
}

.cv_popup_one {
width: calc(360px * 1.23);
}


/* Email */

#email {
position: absolute;
right: 21vw;
width: calc(90px * 1.23);
height: calc(71px * 1.23);
}


/* Galleries */

.letter_icon {
width: calc(355px * 1.23);
height: calc(452px * 1.23);
}

#works_navigation, #projects_navigation {
top: calc(9px * 1.23);
margin-left: calc(16px * 1.23);
}

.link {
font-size: calc(42px * 1.23);
}


/* Works */

#works {
top: 33vh;
right: 12vw;
}

.work_title {
margin-top: calc(6px * 1.23);
font-size: calc(17.5px * 1.23);
}

.works_gallery_popup_one {
top: 17vh;
left: 22vw;
}


/* Projects */

#projects {
top: 36vh;
right: 9vw;
}

.projects_gallery_popup_one {
top: 20vh;
left: 18vw;
}

.projects_gallery_popup_two {
top: 13vh;
left: 45vw;
}

.projects_gallery_popup_three {
top: 31vh;
left: 60vh;
}

.die_neue_altstadt_description {
width: calc(481px * 1.23);
}

.eurs_description {
width: calc(437px * 1.23);
}

.jax_description {
width: calc(427px * 1.23);
}


/* Window Size A End */

}


/* Window Size B Start */

@media screen and (max-width: 900px), (max-height: 770px) {


/* Basic Styles */

.description {
padding-top: calc(15px / 1.206);
padding-right: calc(15px / 1.206);
padding-bottom: calc(14px / 1.206);
padding-left: calc(15px / 1.206);
font-size: calc(17.5px / 1.206);
}

.title {
margin-top: calc(1px / 1.206);
margin-bottom: calc(8px / 1.206);
font-size: calc(18.1px / 1.206);
}

.gallery_image_landscape_orientation, .hidden_item_landscape_orientation {
height: calc(532px / 1.25);
}

.gallery_image_portrait_orientation, .hidden_item_portrait_orientation {
height: calc(620px / 1.25);
}

.height_adjustment {
width: auto;
height: auto;
}


/* Browser Alert */

.alert_text {
font-size: calc(17.5px / 1.206);
}


/* Logo */

.logo {
margin-top: calc(34px / 1.3);
}

h1 {
font-size: calc(60px / 1.3);
}

h1:hover {
letter-spacing: normal;
}


/* Color Change Buttons */

#color_change_buttons {
top: 14vh;
left: 10vw;
}

#button_black {
border-bottom: calc(42px / 1.3) solid black;
}

@-webkit-keyframes button_black {
33.333% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: black;
}

66.666% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: black;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.3) solid transparent;
border-bottom: calc(42px / 1.3) solid black;
border-left: calc(21px / 1.3) solid transparent;
background-color: transparent;
}
}

@keyframes button_black {
33.333% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: black;
}

66.666% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: black;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.3) solid transparent;
border-bottom: calc(42px / 1.3) solid black;
border-left: calc(21px / 1.3) solid transparent;
background-color: transparent;
}
}

#button_red {
border-bottom: calc(42px / 1.3) solid red;
}

@-webkit-keyframes button_red {
33.333% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: red;
}

66.666% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: red;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.3) solid transparent;
border-bottom: calc(42px / 1.3) solid red;
border-left: calc(21px / 1.3) solid transparent;
background-color: transparent;
}
}

@keyframes button_red {
33.333% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: red;
}

66.666% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: red;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.3) solid transparent;
border-bottom: calc(42px / 1.3) solid red;
border-left: calc(21px / 1.3) solid transparent;
background-color: transparent;
}
}

#button_blue {
border-bottom: calc(42px / 1.3) solid blue;
}

@-webkit-keyframes button_blue {
33.333% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: blue;
}

66.666% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: blue;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.3) solid transparent;
border-bottom: calc(42px / 1.3) solid blue;
border-left: calc(21px / 1.3) solid transparent;
background-color: transparent;
}
}

@keyframes button_blue {
33.333% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: blue;
}

66.666% {
width: calc(42px / 1.3);
height: calc(42px / 1.3);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: blue;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.3) solid transparent;
border-bottom: calc(42px / 1.3) solid blue;
border-left: calc(21px / 1.3) solid transparent;
background-color: transparent;
}
}


/* SfVR */

#sfvr, #sfvr_for_small_display_sizes {
bottom: 8vh;
left: 5vw;
}

.sfvr_logo, .sfvr_logo_for_small_display_sizes {
font-size: calc(190px / 1.3);
}

.sfvr_description {
width: calc(398px / 1.206);
}


/* CV */

#cv {
width: calc(71px / 1.3);
}

.cv_icon {
width: calc(71px / 1.3);
height: calc(90px / 1.3);
}

#c, #v {
top: calc(18px / 1.3);
font-size: calc(63px / 1.3);
}

.cv_popup_one {
width: calc(360px / 1.206);
}


/* Email */

#email {
position: absolute;
width: calc(90px / 1.3);
height: calc(71px / 1.3);
}


/* Galleries */

.letter_icon {
width: calc(355px / 1.3);
height: calc(452px / 1.3);
}

#works_navigation, #projects_navigation {
top: calc(9px / 1.3);
margin-left: calc(16px / 1.3);
}

.link {
font-size: calc(42px / 1.3);
}


/* Works */

#works {
top: 34vh;
right: 14vw;
}

.work_title {
margin-top: calc(6px / 1.206);
font-size: calc(17.5px / 1.206);
}

.works_gallery_popup_one {
top: 13vh;
left: 12vw;
}


/* Projects */

#projects {
top: 36vh;
right: 9vw;
}

.projects_gallery_popup_one {
top: 15vh;
left: 8vw;
}

.projects_gallery_popup_two {
top: 7vh;
right: 7vw;
left: auto;
}

.projects_gallery_popup_three {
top: 12vh;
right: 12vw;
left: auto;
}

.die_neue_altstadt_description {
width: calc(481px / 1.206);
}

.eurs_description {
width: calc(437px / 1.206);
}

.jax_description {
width: calc(427px / 1.206);
}


/* Window Size B End */

}


/* Window Size C Start */

@media screen and (max-width: 740px), (max-height: 600px) {


/* Color Change Buttons */

#color_change_buttons {
top: 20vh;
right: 19vw;
left: auto;
}


/* SfVR */

#sfvr {
display: none;
}

#sfvr_for_small_display_sizes {
display: block;
bottom: 17vh;
left: 5vw;
}

.sfvr_logo_for_small_display_sizes {
font-size: calc(190px / 1.3);
}


/* Email */

#email {
top: 52vh;
right: 9vw;
}


/* CV */

#cv {
top: 33vh;
left: 25vw;
}

.cv_popup_one {
top: 40vh;
left: 10vw;
}


/* Works */

#works {
display: none;
}


/* Projects */

#projects {
display: none;
}


/* Window Size C End */

}


/* Window Size D Start */

@media screen and (max-width: 370px) {


/* Basic Styles */

.description {
padding-top: calc(15px / 1.42);
padding-right: calc(15px / 1.42);
padding-bottom: calc(14px / 1.42);
padding-left: calc(15px / 1.42);
font-size: calc(17.5px / 1.42);
}

.title {
margin-top: calc(1px / 1.7);
margin-bottom: calc(8px / 1.7);
font-size: calc(18.1px / 1.7);
}


/* Browser Alert */

.alert_text {
font-size: calc(17.5px / 1.42);
}


/* Logo */

.logo {
margin-top: calc(34px / 1.7);
}

h1 {
font-size: calc(60px / 1.7);
}


/* Color Change Buttons */

#button_black {
border-bottom: calc(42px / 1.7) solid black;
}

@-webkit-keyframes button_black {
33.333% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: black;
}

66.666% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: black;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.7) solid transparent;
border-bottom: calc(42px / 1.7) solid black;
border-left: calc(21px / 1.7) solid transparent;
background-color: transparent;
}
}

@keyframes button_black {
33.333% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: black;
}

66.666% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid black;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: black;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.7) solid transparent;
border-bottom: calc(42px / 1.7) solid black;
border-left: calc(21px / 1.7) solid transparent;
background-color: transparent;
}
}

#button_red {
border-bottom: calc(42px / 1.7) solid red;
}

@-webkit-keyframes button_red {
33.333% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: red;
}

66.666% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: red;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.7) solid transparent;
border-bottom: calc(42px / 1.7) solid red;
border-left: calc(21px / 1.7) solid transparent;
background-color: transparent;
}
}

@keyframes button_red {
33.333% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: red;
}

66.666% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid red;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: red;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.7) solid transparent;
border-bottom: calc(42px / 1.7) solid red;
border-left: calc(21px / 1.7) solid transparent;
background-color: transparent;
}
}

#button_blue {
border-bottom: calc(42px / 1.7) solid blue;
}

@-webkit-keyframes button_blue {
33.333% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: blue;
}

66.666% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: blue;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.7) solid transparent;
border-bottom: calc(42px / 1.7) solid blue;
border-left: calc(21px / 1.7) solid transparent;
background-color: transparent;
}
}

@keyframes button_blue {
33.333% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 0%;
background-color: blue;
}

66.666% {
width: calc(42px / 1.7);
height: calc(42px / 1.7);
border-right: 0px solid transparent;
border-bottom: 0px solid blue;
border-left: 0px solid transparent;
border-radius: 100%;
background-color: blue;
}

100% {
width: 0;
height: 0;
border-right: calc(21px / 1.7) solid transparent;
border-bottom: calc(42px / 1.7) solid blue;
border-left: calc(21px / 1.7) solid transparent;
background-color: transparent;
}
}


/* SfVR */

.sfvr_logo_for_small_display_sizes {
font-size: calc(190px / 1.7);
}


/* CV */

#cv {
width: calc(71px / 1.7);
}

.cv_icon {
width: calc(71px / 1.7);
height: calc(90px / 1.7);
}

#c, #v {
top: calc(18px / 1.7);
font-size: calc(63px / 1.7);
}

.cv_popup_one {
top: 39vh;
left: 4vw;
width: calc(360px / 1.42);
}


/* Email */

#email {
position: absolute;
width: calc(90px / 1.7);
height: calc(71px / 1.7);
}


/* Window Size D End */

}


/* Window Size E Start */

@media screen and (max-width: 300px), (max-height: 500px) {


/* Color Change Buttons */

#color_change_buttons {
display: none;
}


/* SfVR */

#sfvr_for_small_display_sizes {
display: none;
}


/* CV */

#cv {
display: none;
}


/* Email */

#email {
top: auto;
right: 12vw;
bottom: 25vh;
}


/* Window Size E End */

}


/* Window Size F Start */

@media screen and (max-width: 300px), (max-height: 200px) {


/* Presettings */

body {
display: none;
}


/* Window Size F End */

}


/* Further Adjustments */

@supports not (font-variation-settings: "wght" 40) {
.sfvr_logo, .sfvr_logo_for_small_display_sizes {
font-family: "tiny5x3_40", sans-serif;
}


/* Further Adjustments End */

}