@font-face{

	font-family: 'Fredoka';
	src: url('Fonts/Fredoka_One/FredokaOne-Regular.ttf');

}

@font-face{

	font-family: 'Readex';
	src: url('Fonts/Readex_Pro/ReadexPro-VariableFont_wght.ttf');

}

/*Handy*/
@media (max-width: 700px){

	:root {

	--breite: 300px;
	--h1_f_size: 17.5px;
	--p_f_size: 8px;
	--main_b_radius: 5px;
	--main_bo_shadow1: 6px;
	--main_bo_shadow2: 1.5px;
	--h1_margin_top: 13px;
	--pUl_margin_left: 10px;
	--pic_margin_top: 12.5px;

	}

}

/*Webseite*/
@media (min-width: 701px){

	:root {

	--breite: 600px;
	--h1_f_size: 35px;
	--p_f_size: 16px;
	--main_b_radius: 10px;
	--main_bo_shadow1: 12px;
	--main_bo_shadow2: 3px;
	--h1_margin_top: 26px;
	--pUl_margin_left: 20px;
	--pic_margin_top: 25px;

	}

}

body{

	background-color: #f8f5f2;

	margin: 0;

	display: flex;
	justify-content: center;

}

main{

	width: var(--breite);
	aspect-ratio: 1.618 / 1;
	background-color: #222;
	border-radius: var(--main_b_radius);

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);

	box-shadow: var(--main_bo_shadow1) var(--main_bo_shadow1) var(--main_bo_shadow2) silver;

	display: grid;
	grid-template-columns: 1.5fr 3fr 3fr;
	grid-template-rows: 6fr 3fr 0.3fr 5fr 0.3fr 5fr 0.3fr 5fr 0.3fr 2fr;

}

h1{

	font-family: "Fredoka";
	color: #519a52;
	font-size: var(--h1_f_size);

	grid-column: 1/4;
	grid-row: 1/2;

	text-align: center;

	margin-top: var(--h1_margin_top);
	margin-bottom: 0px;

}

p{

	font-family: "Readex";
	font-weight: 500;
	font-size: var(--p_f_size);
	color: #f8f5f2;

	margin: 0;

	display: flex;
	align-items: flex-end;

	margin-left: var(--pUl_margin_left);

}

.l{

	grid-column: 1/2;
	background-color: #519a52;
	border-radius: var(--main_bo_shadow2);

	margin-left: var(--pUl_margin_left);

}

.ph1{

	grid-row: 3/4;

}

.ph2{

	grid-row: 6/7;

}

.ph3{

	grid-row: 7/8;

}

.ph4{

	grid-row: 10/11;

}

.name{

	grid-column: 1/2;
	grid-row: 2/3;

}

.name_t{

	grid-column: 2/3;
	grid-row: 2/3;

}

.title{

	grid-column: 1/2;
	grid-row: 4/5;

}

.title_t{

	grid-column: 2/3;
	grid-row: 4/5;

}

.adress{

	grid-column: 1/2;
	grid-row: 6/7;

}

.adress_t{

	grid-column: 2/3;
	grid-row: 6/7;

}

.contact{

	grid-column: 1/2;
	grid-row: 8/9;

}

.contact_t{

	grid-column: 2/3;
	grid-row: 8/9;

}

.picture{

	grid-column: 3/4;
	grid-row: 2/9;

	margin-top: var(--pic_margin_top);
	margin-left: var(--main_b_radius);

	width: 88%;
	height: 90%;

	border-radius: var(--main_b_radius);

}