/*@import url('https://fonts.googleapis.com/css2?family=Anton&family=Chelsea+Market&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Hind+Siliguri&family=Open+Sans&display=swap');

        body{
            margin: 1% 5% 1% 5%;
            padding: 0;
            font-family: 'Hind Siliguri', sans-serif;
        }
		
		h1{
            text-align: center;
            font-size: 3.5rem;
			font-family: 'Fjalla One', sans-serif;
        }
		
		p{
			font-size: 1rem;
			text-align: left;
		}
		
		a{
			font-family:'Hind Siliguri', sans-serif;
		}
		
		
        .myButton {
            box-shadow: 0px 10px 14px -7px #3e7327;
            background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
            background-color:#77b55a;
            border-radius:4px;
            border:1px solid #4b8f29;
            display:inline-block;
            cursor:pointer;
            color:#ffffff;
            font-family:'Hind Siliguri', sans-serif;
            font-size:20px;
            font-weight:bold;
            padding:6px 12px;
            text-decoration:none;
            text-shadow:0px 1px 0px #5b8a3c;
            text-align: center;
        }
        .myButton:hover {
            background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
            background-color:#72b352;
        }
        .myButton:active {
            position:relative;
            top:1px;
        }
		
		#header_img{
			display: block;
            margin-left: auto;
            margin-right: auto;
            width: 95%;
		}
		
		.footer{
		    margin-top: 2.5rem;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
			text-align: center;
		}
		
		.content{
			text-align: center;
		}
		
		.book iframe{
			margin-top: 2rem;
			height:30rem;
			width: 100%;
		}
		
		/*Große Bildschirme*/
		@media only screen and (min-width: 768px){

        .wrapper{

            display: grid;
            grid-template-columns: 60% 40%;
            grid-template-rows:auto auto auto;
            grid-template-areas:
                'title title'
                'head book'
                'main book'
				'main book'
                'footer footer';
			
            grid-gap: 1rem;

        }

        .title{
            grid-area: title;
            grid-column: 1 span 1;
       }

        .fotorama{
            grid-area: head;
            grid-row: span 1;
        }

        .content{
            grid-area: main;
            grid-row: span 2;

        }

        .book{
            grid-area: book;
            grid-row: 2 / span 3;
        }
			
		
	 	.book iframe{
			margin-top: 0;
			height:100%;
			width: 100%;
		}


        .footer{
            grid-area: footer;
            grid-row: span 2;
            grid-column: span 2;
        }
		}