* {
		margin: 0;
		padding: 0;
        box-sizing: border-box;
	}
#home {
		background: #E5E5E5;
		max-width: 2000px;
		background-color: rgba(255,255,255,1);
		overflow: hidden;
        
        font-family: Georgia;
		font-style: normal;
		font-weight: normal;
		font-size: 100%;
        display: flex;
        margin: auto;
	}

#left{
    background-color: #F1F9FF;
    width: 34%;
    height: 100vh;
    
    color: #2699FB;
    font-size: 3.6rem;
    position: relative;
}

header{
    padding: 5rem;
}
header p{
    padding-top: 3rem;
}
header a{
    color: #2699FB;
    text-decoration: none;
}
header a:hover{
    border-bottom: 1px solid #2699FB;
}
nav{
    font-size: 0.9rem;
    padding: 5rem;
    position: absolute;
    bottom: 0;
}
nav p{
    border:1px solid #BCE0FD;
    padding:0.8rem;
    text-align: center;
}
nav p a{
    color: #2699FB;
    text-decoration: none;
}

nav p:hover{
    border:1px solid #2699FB;
}
	


#box1{grid-area: gruen1; background-color: #4CB5AB;}
#box2{grid-area: magenta1; background-color: #FF4081;}
#box3{grid-area: blau1; background-color: #2699FB;}
#box4{grid-area: blau2; background-color: #2699FB; position: relative;}
#box5{grid-area: gruen2; background-color: #4CB5AB;}
#box6{grid-area: magenta2; background-color: #FF4081;}
#box7{grid-area: blau3; background-color: #2699FB; position: relative;}


#right{
    width: 66%;
    height: 100vh;
    
    display: grid;
    grid-template-areas:
    'gruen1 magenta1 magenta1'
    'blau1 blau2 gruen2 '
    'blau1 magenta2 blau3';
  grid-gap: 5px;
  background-color: #fff;
}

.copyright{
    position: absolute;
    color: #fff;
    bottom: 5rem;
    left:20%;
}
.email{
    position: absolute; 
    bottom: 5rem;
    left:20%;
    font-size: 1.5rem;
}
.email a{
    color:#fff;
    text-decoration: none;
    border-bottom: 1px solid #2699FB;
    padding-bottom: 0.5rem;
}
.email a:hover{  
    border-bottom: 1px solid #BCE0FD; 
}

/**********Impressum**********/
h2{
    color: #2699FB;
    font-size: 2.2rem;
    padding: 2.8rem 0 3rem 0;
    font-weight: 300;
}
h3{
    padding: 1rem 0;
}
/*****************************/


@media (max-width: 70em) {
    #home {		
        display: block;
        margin: auto;
	}
    #left, #right{
        width: 100%;
    }
}
@media (max-width: 50em) {
    #right{
         grid-template-areas:  
        'blau2' 'gruen2 ''magenta2' 'blau3';
    }
    #box3, #box2, #box1{display: none;}
}


@media (orientation: landscape)and (max-width: 64em) {
    header {
        padding: 0 0 0 25rem;
    }
    .copyright{
        bottom: 2rem;
        left:12%;
    }
    .email{
        bottom: 2rem;
        left:12%;
    }
}