/* ----------------- welcome to my homepage :)  ----------------- */
@media screen and (min-width: 20em) {
         body {
                 display: grid;
                 gap: 0;
                 max-width: 100%;
                 margin: 0 auto;
                 font-family: calibri, sans-serif;
                 grid-template-columns: 1fr 8fr 1fr;
                 grid-template-rows: auto 1fr;
                 background-color: #191919;
                 background-image: url("/pics/bg.jpg");
                 background-image: url("/pics/bg.jpg"), linear-gradient(#202020, #000000);
                 background-image: url("/pics/bg.jpg"), -webkit-gradient(linear, left top, left bottom, from(#202020), to(#000000));
                 background-image: url("/pics/bg.jpg"), -moz-linear-gradient(top, #202020, #000000);
                 background-repeat: no-repeat;
                 background-attachment: fixed;
                 background-position: bottom;
                 background-size: 100% auto;
                 color: #D0D0D0;
                 box-sizing: border-box;
          }
}
@media screen and (orientation: portrait) {
    width: 100%;
}
html {
         scroll-behavior: smooth;
}
/* ----------------- Start screen ----------------- */
start {
         display: inline-flex;
         border: none;
         background-color: #000000;
         width: 100vw;
         height: 100vh;
         margin: 0 auto;
         opacity: .7;
         flex-wrap: wrap;
         box-sizing: border-box;
         justify-content: center;
         align-items: center;
}
.box {
         border: none;
         width: 70vw;
         height: 10vh;
         margin: 0 auto;
}
.imgstart {
         border: 3px solid #060606;
         border-radius: 20%;
}
.fly-in {
         animation: fly-in 1.5s;
         -moz-animation: fly-in 1.5s; /* Firefox */
         -webkit-animation: fly-in 1.5s; /* Safari and Chrome */
         -o-animation: fly-in 1.5s; /* Opera */
}

.blend-in {
         animation: blend 3s;
         -moz-animation: blend 3s; /* Firefox */
         -webkit-animation: blend 3s; /* Safari and Chrome */
         -o-animation: blend 3s; /* Opera */
}

@keyframes fly-in {
         0% {
                 transform: scale(0.1);
                 opacity: 0;
         }
         20% {
                 transform: scale(0.1);
                 opacity: 0;
         }
         70% {
                 transform: scale(1.1);
                 opacity: 1;
         }
         100% {
                 transform: scale(1);
                 opacity: 1;
         }
}
@keyframes blend {
         0% {
                 transform: scale(1);
                 opacity: 0;
         }
         70% {
                 transform: scale(1);
                 opacity: 0;
         }
         100% {
                 transform: scale(1);
                 opacity: 1;
         }
}
/* ----------------------------------- Start screen - */
header,
footer {
         display: inline-flex;
         border-radius: 0.2em;
         border: none;
         background: #060606;
         padding: 1%;
         margin: calc(2px + 0.2%);
         grid-column: 1 / -1;
         box-sizing: border-box;
}
/* ----------------- header content ----------------- */
.flex-container-1 {
         max-width: auto;
         height: auto;
         border: none;
         display: flex;
         flex-wrap: wrap;
         grid-template-rows: auto 3fr;
         grid-gap: 0;
         justify-content: space-between;
         box-sizing: border-box;
}
/* style links nav */
.nav {
         position: relative;
}
.nav:hover {
         color: #5CB3FF;
         transition: transform .3s ease-in-out;
         transform-origin: center;
         transform: scaleX(1);
}
.nav::before {
         content: '';
         position: absolute;
         width: 100%;
         height: 2px;
         border-radius: 2px;
         background-color: #5CB3FF;
         bottom: 0;
         left: 0;
         transform-origin: center;
         transform: scaleX(0);
         transition: transform .3s ease-in-out;
}
.nav:hover::before {
         transform-origin: center;
         transform: scaleX(1.28);
}
/* visited link nav */
.visit {
    	 position: relative;
    	 color: #5CB3FF;
}
.visit:before {
    	 content: '';
    	 position: absolute;
    	 display: block;
    	 left: -14%;
    	 bottom: -1%;
    	 width: 128%;
    	 border-bottom: 2px solid #5CB3FF;
    	 border-radius: 2px;
}
/* logo box */
.flex-item-1 {
         border: none;
         flex-basis: 310px;
         flex-grow: 0.2;
         flex-shrink: 0.5;
}
/* nav box */
.flex-item-2 {
         border: none;
         min-height: 35px;
         font-size: calc(10px + 1vw);
         flex-basis: 358px;
         flex-grow: 0.5;
         flex-shrink: 0;
}
/* lang box */
.flex-container-2 {
         display: flex;
         border: none;
         max-width: auto;
         min-width: 35px;
         height: auto;
         margin-left: auto;
         flex-wrap: no-wrap;
         grid-template-rows: auto 3fr;
         grid-gap: 0;
         justify-content: flex-end;
         box-sizing: border-box;
}
.flex-item-3 {
         border: none;
         max-width: 40px;
         min-width: 35px;
         flex-basis: 100%;
         flex-grow: 0;
         flex-shrink: 0;
}
/* ----------------- footer content ----------------- */
footer {
         justify-content: space-between;
}
/* footer links */
.flex-item-4 {
         border: none;
         flex-basis: auto;
         flex-grow: auto;
         flex-shrink: auto;
         font-size: calc(6px + 0.8vw);
}
/* footer address */
.flex-item-5 {
         border: none;
         flex-basis: auto;
         flex-grow: auto;
         flex-shrink: auto;
         font-size: calc(6px + 0.8vw);
}
/* footer socials */
.flex-item-6 {
         border: none;
         flex-basis: auto;
         flex-grow: auto;
         flex-shrink: 0;
}
/* -------------------------------- footer content - */
privacy,
about,
guitar,
home {
         border-radius: 0.2em;
         border: none;
         background: #060606;
         padding: 4%;
         margin: calc(2px + 0.2%);
         margin-top: 0;
         margin-bottom: 43%;
         min-width: 90vw;
         max-width: 100%;
         box-sizing: border-box;
         min-height: 53vh;
}
about {
	 padding: 2% 8% 4%;
}
/* img about */
.image {
         border-radius: 8px;
         margin-left: calc(7px + 1%);
         margin-top: 1%;
         width: calc(8em + 10%);
         height: auto;
}
/* ----------------- process guitar ----------------- */
.flex-container-4 {
         display: inline-flex;
         border: none;
         background-position-x: center;
         padding: 0;
         margin: 0 auto;
         flex-basis: auto;
         flex-grow: 0;
         flex-shrink: 0;
         flex-wrap: wrap;
         width: 100%;
         height: auto;
         box-sizing: border-box;
}
.flex-item-12 {
         display: inline-flex;
         border: none;
         width: 30%;
         min-width: 19em;
         height: auto;
         margin: 2% auto;
         justify-content: start;
         box-sizing: border-box;
}
/* ----------------- home content ----------------- */
.flex-container-3 {
         display: inline-flex;
         border: none;
         background: url("/pics/bghome.jpg") no-repeat;
         background-position-x: center;
         background-position-y: center;
         border-radius: 0.2em;
         padding: calc(8px + 2.1%);
         margin: auto;
         flex-basis: auto;
         flex-grow: 1;
         flex-shrink: 1;
         flex-wrap: wrap;
         height: auto;
         min-height: 53vh;
}
.flex-item-10 {
         border: none;
         font-size: calc(12px + 0.5vw);
         text-shadow: 0 0 10px #000000;
         height: auto;
         min-height: calc(40% + 15vh);
         margin: 0 auto;
         width: 90%;
}
/* ----------------- contact content ----------------- */
contact {
         display: inline-flex;
         border-radius: 0.2em;
         border: none;
         background: #060606;
         padding: 1% 5% 1.3%;
         margin: calc(2px + 0.2%);
         margin-top: 0;
         margin-bottom: 43%;
         min-width: 90vw;
         max-width: 100%;
         flex-wrap: wrap;
         grid-template-rows: auto 1fr;
         justify-content: space-around;
         box-sizing: border-box;
}
.flex-item-8 {
         border: none;
         padding: 1%;
         flex-basis: 61%;
         flex-grow: 1;
         flex-shrink: 0;       
}
.flex-item-9 {
         border: none;
         padding: 0.6%;
         flex-basis: auto;
         flex-grow: 0;
         flex-shrink: 1;
         min-width: 300px;
         max-width: 400px;
}
/* ----------------- projects content ----------------- */
projects {
         display: flex;
         height: auto;
         border: none;
         background: none;
         margin: calc(2px + 0.2%);
         margin-top: 0;
         margin-bottom: 41%;
         min-width: 90vw;
         max-width: 100%;
         justify-content: space-between;
         flex-wrap: wrap;
         grid-template-rows: auto 1fr;
         box-sizing: border-box;
}
/* projects box */
.flex-item-7 {
         border-radius: 0.2em;
         border: none;
         background: #060606;
         max-width: 100%;
         min-width: 334px;
         height: 680px;
         padding: 1%;
         margin: 0 auto;
         margin-bottom: 10px;
         flex-basis: 31%;
         flex-grow: 0;
         flex-shrink: 0.8;
         box-sizing: border-box;
         text-align: center;
}
/* img projects */
.imgchange-1 {
         background: url("/pics/navagio.jpg") no-repeat;
         border-radius: 8px;
         border: none;
         background-size: contain;
         background-position-x: center;
         width: 250px;
         margin: auto;
         margin-bottom: 2%;
         height: 554px;
}
.imgchange-1:hover {
         background: url("/pics/navagio_b.jpg") no-repeat;
         background-size: contain;
         background-position-x: center;
}
.imgchange-2 {
         background: url("/pics/willi.jpg") no-repeat;
         border-radius: 8px;
         border: none;
         background-size: contain;
         background-position-x: center;
         width: auto;
         margin-bottom: 2%;
         height: 554px;
}
.imgchange-2:hover {
         background: url("/pics/willi_b.jpg") no-repeat;
         background-size: contain;
         background-position-x: center;
}
.imgchange-3 {
         background: url("/pics/amazona.jpg") no-repeat;
         border-radius: 8px;
         border: none;
         background-size: contain;
         background-position-x: center;
         width: auto;
         margin-bottom: 2%;
         height: 554px;
}
.imgchange-3:hover {
         background: url("/pics/amazona_b.jpg") no-repeat;
         background-size: contain;
         background-position-x: center;
}
.imglink {
         display: flex;
         border: none;
         width: 60%;
         margin: 0 auto;
         height: 554px;
}
aside {
         border-radius: none;
         border: none;
         background: none;
         margin: 0;
}
/* ----------------------- hope to see you some time! - */