/* ALLGEMEINES */
 
* {	padding:0;
		margin: 0;
		border: none;
		font-family: 'ubuntu', sans-serif;
		cursor: url(cursor.cur) 25 25 , url(cursor.png) 21.5 21.5 ,crosshair !important;
		box-sizing:border-box;
		font-size:100%;
		} 
 
/* //////////////////////////////////// Defining FONTS //////////////////////////////////// */

/* Gudea Font */
@font-face {
    font-family: 'Gudea';
    src: url('../Fonts/Gudea/Gudea-Bold.ttf') format('truetype'),
    	 url('../Fonts/Gudea/gudea-bold-webfont.woff2') format('woff2'),
         url('../Fonts/Gudea/Gudea-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;}

@font-face {
    font-family: 'Gudea';
    src: url('../Fonts/Gudea/Gudea-Regular.ttf') format('truetype'),
    	 url('../Fonts/Gudea/gudea-regular-webfont.woff2') format('woff2'),
         url('../Fonts/Gudea/Gudea-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

/* PT Serif Font */
@font-face {
    font-family: 'PT Serif';
    src: url('../Fonts/PT_Serif/PTSerif-Bold.ttf') format('truetype'),
    	 url('../Fonts/PT_Serif/ptserif-bold-webfont.woff2') format('woff2'),
         url('../Fonts/PT_Serif/ptserif-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;}

@font-face {
    font-family: 'PT Serif';
    src: url('../Fonts/PT_Serif/PTSerif-Regular.ttf') format('truetype'),
    	 url('../Fonts/PT_Serif/ptserif-bold-webfont.woff2') format('woff2'),
         url('../Fonts/PT_Serif/ptserif-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

/* Ubuntu Font */
@font-face {
    font-family: 'Ubuntu';
    src: url('../Fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype'),
         url('../Fonts/Ubuntu/ubuntu-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'Ubuntu';
    src: url('../Fonts/Ubuntu/Ubuntu-Medium.ttf') format('truetype'),
         url('../Fonts/Ubuntu/ubuntu-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;}

@font-face {
    font-family: 'Ubuntu';
    src: url('../Fonts/Ubuntu/Ubuntu-Light.ttf') format('truetype'),
         url('../Fonts/Ubuntu/ubuntu-light-webfont.woff') format('woff');
    font-weight:lighter;
    font-style: normal;}

@font-face {
    font-family: 'Ubuntu';
    src: url('../Fonts/Ubuntu/Ubuntu-Bold.ttf') format('truetype'),
         url('../Fonts/Ubuntu/ubuntu-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;}


/* Defining Headline & Font styles */
h1{	font-family: 'Ubuntu', sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 1.35rem;
		color: black;}
 
		h1 :link{text-decoration: none; color: black;}
		h1 :visited{text-decoration: none; color: black;}
		h1 :hover{text-decoration: none; color: black;
							font-family: 'PT Serif', serif; font-weight: normal; font-style: normal; font-size: 1.45rem;line-height: 0.5}
		h1 :active{text-decoration: none; color: black;}
 
h2{ color: black; font-family: 'Ubuntu', sans-serif; font-weight: 500; font-style: normal; font-size: 1.35rem; line-height: 1.5;}
h3{ color: black; font-family: 'Gudea', sans-serif; font-weight: normal; font-style: normal; font-size: 1rem;}
h4{ color: black; font-family: 'Ubuntu', sans-serif; font-weight: normal; font-style: normal; font-size: 1.35rem; line-height: 1.5;}
p{	color: black; font-family: 'Gudea', sans-serif; font-weight: normal; font-style: normal; font-size: 1rem;}

a :link{text-decoration: none !important; color: black;}
a :visited{text-decoration: none !important; color: black;}
a :hover{text-decoration: none !important; color: black;}
a :active{text-decoration: none !important; color: black;}

.highlight_text { font-family: 'PT Serif', serif; font-weight: bold; font-style: normal; font-size: 1.45rem;line-height: 1, text-decoration:none;}
.button-text {color: black; font-family: 'Gudea', sans-serif; font-weight: normal; font-style: normal; font-size: 1rem; text-decoration: none;}


/* //////////////////////////////////// Header / Footer //////////////////////////////////// */
#titel_li{	margin-top: 3vh;
						margin-left: 3vw;
						text-align: left;
						float: left;
						color: green;}
#titel_re{	margin-top: 3vh;
						margin-right: 3vw;
						text-align: right;
						float: right;
						}
#titel_re a {margin-left: 3vw;}
#footer #titel_re {margin-right: 3vw;}
 
#titel {position: fixed; width: 100vw;}
#footer { padding-bottom: 8vh; display: inline-block; height: 8vh; width:100vw;}

/* Define a media query for smaller screen widths */
@media (max-device-width: 767px) {
    /* Adjust the layout for smaller screens */
    #titel_re {
        margin-top: 0vh; /* Reduce top margin for spacing */
    }
    #titel_re a {
        display: block; /* Display the links as block elements */
        margin-top: 1vh; /* Add margin for spacing */
    }
}







 
/* //////////////////////////////////// alle Seiten //////////////////////////////////// */
 
#body{ padding-top: 10vh;
				margin-left: 0vw;
				margin-right: 0vw;
				min-height: 90vh; height: auto;
				}
  
/* //////////////////////////////////// Tablets (projects.php) //////////////////////////////////// */
 
.tablet{ 	width: 100vw;
					height: calc((100vw)/2);
					margin-top: 0vh;
					overflow: hidden;}
 
					@media (min-width: 900px) and (min-device-width: 767px){
 
							.tablet{width:50vw;
											height: calc((50vw)/2);
											float:left;}}
				
 
.preview {width: 100%;
						height: 100%;
						text-align: center;}
 
 
						.tablet img:last-child {
						  display: none;
						}
						.tablet:hover img:last-child {
						  display: block;
						}
						.tablet:hover img:first-child {
						  display: none;
						}

.colorblock {height: auto; width: 100vw; display: inline-block; background-color:#F7F7F7;}
 
/* //////////////////////////////////// About me//////////////////////////////////// */


#aboutme-container {width: 100%; padding: 0; padding-top: 4vw; min-height: 90vh; height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}

#aboutme-box1 {padding: 3vw; width: 50%;}

#aboutme-box2 {padding: 3vw; width: 50%; max-width: 600px; display: flex; justify-content: space-between; align-items: flex-start; }
#aboutme-box2 img {order: 2; width: 70%; height: 100%; object-fit: contain; /* Hält das Seitenverhältnis bei und passt das Bild in den Container */}

#contact-button {order: 1; width: 25%;}
#contact-button img {width: 100%;}
#contact-button img:hover { animation: shake 1s; animation-iteration-count: 3;}

@keyframes shake {
  0% { transform:   rotate(0deg); }
  10% { transform:  rotate(-2deg); }
  10% { transform:  rotate(2deg); }
  30% { transform:  rotate(0deg); }
  40% { transform:  rotate(0deg); }
  50% { transform:  rotate(-2deg); }
  60% { transform:  rotate(2deg); }
  70% { transform:  rotate(-2deg); }
  80% { transform:  rotate(2deg); }
  90% { transform:  rotate(0deg); }
  100% { transform: rotate(0deg); }
}


/* Für Desktop schmaler & für Mobile devices  */
@media (max-width: 900px), {
	#aboutme-container {padding-top: 0vw;}
    #aboutme-box1 { width: 80%; order:2;}
    #aboutme-box2 {width: 70%; order:1;align-items: flex-end;}
    #aboutme-box2 img {order:1;}
	#contact-button {order: 2;}
}
@media(max-device-width: 767px) {
	#aboutme-container {padding-top: 0vw; }
    #aboutme-box1 {width: 80%; order:2;}
    #aboutme-box2 {width: 100%; order:1;align-items: flex-end;}
    #aboutme-box2 img {order:1;}
	#contact-button {order: 2;}
}
 
/* //////////////////////////////////// Infotexte //////////////////////////////////// */

.infos-container {width: 100%; padding:3vw; display: inline-block; }
 
.infos_li p {max-width: 350px;}
.infos_re p {max-width: 350px;}
 
@media (min-width: 500px) and (max-width: 1200px){
		.infos_li {width: 50%;float: left;}
		.infos_re {width: 40%;float: right;}
}

@media (min-width: 1200px){	
	.infos-container{width: calc(100vw - 123vh); height: 82vh; float: right; overflow: scroll;}
}

/* Apply styles when the device has a touch interface */
@media (pointer: coarse) {
.infos-container {margin-top: calc(43px + 6vw);}
}
 
 
/* //////////////////////////////////// Slideshow //////////////////////////////////// */


 
/* Slideshow container */
.slideshow-container {
  width: 100vw; height: calc(200vw/3);
}
 
/* Hide the images by default */
.mySlides {
  display: none;
}
 
 
 
/* Next & previous area */

.nav{ top: 0; margin-top: 10vh; position: absolute;
			width: inherit; height: inherit;}
 
#prev, #next{
	position: absolute;
	display: inline-block;
	width: 50%; height: inherit;
	background-color: rgba(0, 255, 0, 0); 
	user-select: none;
	} 

#next{ right: 0; cursor: url(url(cursornachrechts.png) 37 25 ,pointer !important;}
#prev{ left: 0; cursor: url(url(cursornachlinks.png) 0 25 ,pointer !important;}

#next img {display: none;}
#prev img {display: none; float: left; margin: 3vw;}


/* Apply styles when the device has a touch interface */
@media (pointer: coarse) {
.nav{ margin-top: 0; position: relative; height: calc(43px + 6vw);}

#next img {display: initial	; float: right; margin: 3vw;}
#prev img {display: initial	; float: left; margin: 3vw;}
}



 
	@media (min-width: 1200px),{
 
								.slideshow-container {width: 123vh;
																			height: 82vh;
																			float:left;}
	}