@font-face {
    font-family: 'eurosteal';
    src:url('Website Fonts/Eurosteal.woff')
    format('woff');
    }
@font-face {
   font-family: 'Montserrat-Light';
   src:url('Website Fonts/Montserrat-Light.woff')
   format('woff');
   }

@font-face {
    font-family: 'Montserrat-Medium';
    src:url('Website Fonts/Montserrat-Medium.woff')
    format('woff');
  }
:root {
  --font-size-primary: 1.6em ;
  --font-size-secondary: 3vw;
  --font-size-navigation: 1.2em;
  --font-size-text: 0.9em;
  --font-size-text-phone: 16pt;
  --font-size-footer: 0.8em;
  --font-size-footer-phone: 0.6em;
  --font-primary: 'eurosteal','Arial', sans-serif;;
  --font-secondary: 'Montserrat-Light','Arial', sans-serif;
  --font-color: black;
  --font-effect-filter:  blur(2px);
  --letter-spacing-secondary: 1.2em;
  --letter-spacing-text: 1px;
  --letter-spacing-footer: 3px;
  --letter-spacing-footer-phone: 2px;
  --line-height-text: 1.5;
  --background-color: rgba(232, 232, 232, 0.519);
  --hover-effect:  blur(2px);
  --hover-effect-transition: filter 0.5s ease;
  --backdrop-filter: blur(5px);
  --gradient-mask: linear-gradient(to bottom, 
  rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 80%, 
  rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
  ) 100% 50% / 100% 100% repeat-x;
  --border-radius: 3px;
  --border: 1px solid #000000;
}
 

html {
  scroll-behavior: smooth;
}
#About {
  scroll-margin-top: 120px; 
}
#Portfolio {
  scroll-margin-top: 120px; 
}

body{
  margin: 0%;
}
ul{
  list-style-type: none;
}

.list-box {
display: flex;
flex-direction: row; 
justify-content: space-between; 
padding: 15px;
background-color: rgba(255, 255, 255, 0.29);
margin-bottom: 0px;
margin-top: 0px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
@media (max-width: 700px){ 
.list-box {
flex-direction: column;
align-items: flex-start;
transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
opacity: 0;
margin-bottom: -168px;
}}

.nav-box {
position: sticky;
z-index: 5;
top: 0;
margin-top: -49.5px;
} 
@media (max-width: 700px){ 
.nav-box {
margin-top: -56px;
}}

.menu-item {
margin-left: 3%;
margin-right: 3%;
list-style-type: none;
}
@media (max-width: 700px){ 
.menu-item {
margin-bottom: 15px;
}}

#header-image {
width: 100%;
height: 100vh;
filter: grayscale(0) brightness(2) blur(2px);
object-fit: cover;
object-position: left;
position: relative;
}
@media (max-width: 700px){ 
#header-image {
height: 100vh;
}}

.h1-box {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 7%;
padding: 0;
position: absolute;
top: calc(50% - 38px - 50px);
z-index: 6;
}
    
h1 { 
font-size: var(--font-size-primary);
font-family: var(--font-primary);
background-color: transparent;
}
   
#Logo {
width: 75px;;
}

.navtext {
font-family: var(--font-primary);
font-size: var(--font-size-navigation); 
color: var(--font-color);
text-decoration: none;
transition: var(--hover-effect-transition); 
}
.navtext:hover {
  filter: blur(2px); 
}

.heroshot img {
 width: 100%; 
 height: auto; 
 display: block; 
 mask: var(--gradient-mask);
 -webkit-mask: var(mask); 
 mask: var(mask);
}
@media (max-width: 700px){ 
.heroshot img {
height:auto;
width: 100%;
}}

h2 {
 font-size: 2.7em;
 font-family: var(--font-primary);
 margin-left: 20%;
 margin-top:5%;
 filter: var(--font-effect-filter);
 letter-spacing: var(--letter-spacing-secondary);
}
@media (max-width: 700px){ 
h2 {
font-size: 7vw;
margin-top: 20%;
}}

.about-box {
 display: flex;
 flex-direction: row; 
 align-items: start;
 justify-content: space-evenly;
 padding: 0%;
 margin-top: 4%;
}
@media (max-width: 700px){ 
.about-box {
flex-direction: column;
align-items: flex-end;
}}

#portrait {
 width: 100%;
 min-width: 200px;
 max-width: 350px;
 height: auto;
 border-radius: 3%;
 margin-left: 2%;
}
@media (max-width: 700px){ 
#portrait { 
max-width: 200px;
margin: 0% 3% -4% 0%;
}}

.description-text {
font-size: var(--font-size-text);
font-family: var(--font-secondary);
letter-spacing: var(--letter-spacing-text);
line-height: var(--line-height-text);   
padding: 0; 
margin: 3% 10% 0% 5%;
}
@media (max-width: 700px){ 
.description-text { 
font-size: var(--font-size-text-phone);
}}

.background1 {
width: 100%;
background-image: url('Website Bilder/Paintstroke1.jpg'); 
background-repeat: no-repeat; 
background-position: right bottom; 
background-size: 13%;
}

h3 {
font-size: 2.7em;
font-family: var(--font-primary);
margin-left: 32%;
margin-bottom: 4%;
margin-top:20%;
filter: var(--font-effect-filter);
letter-spacing: var(--letter-spacing-secondary);
word-wrap: break-word;
}
@media (max-width: 700px){ 
h3 {
font-size: 7vw;
margin-left: 5%;
line-height: 1.5;
}}

#decoration {
height: 125px;
padding: 0;
margin: 0;
}
@media (max-width: 700px){ 
#decoration {
width: 100%;
height: auto;
margin-left: -20%;
}}

.portfolio-box {
display: flex;
flex-direction: row; 
align-items: center;
justify-content: flex-end;
padding: 0;
margin: 3% 185pt 1% 0%;
}
@media (max-width: 700px){ 
.portfolio-box{
flex-direction: column;
align-items: center;
margin: 0;
}}

.button-box {
display: flex;
flex-direction: column; 
align-items: center;
justify-content: space-around;
gap: 38px;
padding: 0%;
height: 125px; 
margin: 0% 0% 0% 30px;
}
@media (max-width: 700px){ 
.button-box {
margin: 5% 0% 0% 0%;
}}

.button-text {
font-family: var(--font-primary);
font-size: var(--font-size-navigation); 
color: var(--font-color);
text-decoration: none;
transition: var(--hover-effect-transition);
border-radius: var(--border-radius);
background-color: rgb(255, 255, 255);
border-style: outset;
}
#preview {
 padding: 10px 68px;
}
#download {
 padding: 10px 60px;
}
.button-text:hover {
  filter: var(--hover-effect); 
}

.Portfolio-text {
font-family: var(--font-secondary);
font-size: var(--font-size-text);
letter-spacing: var(--letter-spacing-text);
margin: 2% 18% 2% 4%;
}
@media (max-width: 700px){ 
.Portfolio-text{
display: none;
}}

.footer-box {
display: flex;
flex-direction: row; 
align-items: center;
justify-content: space-between;
margin-top: 2%;
backdrop-filter: var(--backdrop-filter);
-webkit-backdrop-filter: var(--backdrop-filter);
background-color: var(--background-color);
}
@media (max-width: 700px){ 
.footer-box {
flex-direction: column;
align-items: center;
}}

.footer-text-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-left: 5%;
gap: 15%;
}
@media (max-width: 700px){ 
.footer-text-box{
flex-direction: column;
margin: 3% 0% 0% 0%;
}}

.footer-text {
font-size: var(--font-size-footer);
font-family:  'Montserrat-Medium','Arial', sans-serif;
letter-spacing: var(--letter-spacing-footer); 
color: var(--font-color);
text-decoration: none;
transition: var(--hover-effect-transition);
white-space: nowrap;
}
@media (max-width: 700px){ 
.footer-text{
margin-top: 3%;
font-size: 0.8em;
padding: 0;
}}

.footer-text:hover {
filter: var(--hover-effect);
}

#Copyright {
font-size: 0.7em;
font-family:  var(--font-secondary);
letter-spacing: var(--letter-spacing-footer); 
color: var(--font-color);
white-space: nowrap;
margin-right: 5%;
}
@media (max-width: 700px){ 
#Copyright{
font-size: 0.6em;
margin: 3% 0 3% 0;
}}

.contact-box {
display: flex;
flex-direction: column; 
align-items: center;
gap: 80px;
border-radius: var(--border-radius);
margin: 2% 0% 10% 3%;
}
@media (max-width: 700px){ 
.contact-box{
margin: 10% 0% 10% 3%;
gap: 60px;
}}
  
.contact-icon {
width: 32px;
transition: var(--hover-effect-transition);
}
@media (max-width: 700px){ 
.contact-icon{
width: 28px;
}}
.contact-icon:hover {
filter: var(--hover-effect);
}

label {
cursor: pointer;
display: none;
padding: 0;
transition: var(--hover-effect-transition);
}
@media (max-width: 700px){ 
label{
display: block;
}}
label img {
height: 22px;
width: auto;
}
label:hover {
filter: var(--hover-effect);
}

input[type="checkbox"]:checked + div label .hamburger {
display: none;
}
.cross {
display: none;
}
input[type="checkbox"]:checked + div label .cross {
display: block;
}

input[type="checkbox"] {
display: none;
}

@media (max-width: 700px){ 
input[type="checkbox"]:checked ~ .list-box  {
display: block;
opacity: 1; }}

.check-box {
display: flex;
flex-direction: row;
justify-content: end;
align-items: center;
padding: 15px;
backdrop-filter: var(--backdrop-filter);
-webkit-backdrop-filter: var(--backdrop-filter);
background-color: var(--background-color);
display: none;
}
@media (max-width: 700px){ 
.check-box{
display: block;
}}