*{
    margin: 0;
    padding: 0;
}
body{
    background-image: url(../pics/pexels-photo-136419.jpeg);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "header"
        "nav"
        "aside"
        "Text1"
        "Bild1"
        "main"
        "footer";
}

/*-----------------------Header------------------------------*/

#logo{
    grid-area: logo;
    background-image: url(../pics/Laptop.png);
    background-color: rgba(124, 205, 255, 0.5);
    height: 70px;
}
header{
    grid-area: header;
    height: 70px;
    font-size: 25px;
    background-color: rgba(124, 205, 255, 0.5);
    border-radius: 0px 0px 0px 0px;
}

/*--------------------------Navigation------------------------*/

nav{
    height: 30px;
    padding-top: 0px;
    grid-area: nav;
    font-size: 20px;
    background-color: rgba(124, 205, 255, 0.5);
    display: grid;
    grid-template: 20px 1fr 1fr 1fr 20px;
    grid-template-areas: 
        ". nav1 nav2 nav3 .";
}
nav a{
    text-decoration: none;
    color: black;
}
#nav1{
    grid-area: nav1;
    justify-self: start;
    transition: transform 300ms ease-in-out;
}
#nav1:hover{
    transform: translateY(-5px);
    border-bottom: solid 3px black;
}
#nav2{
    grid-area: nav2;
    justify-self: center;
    transition: transform 300ms ease-in-out;
}
#nav2:hover{
    transform: translateY(-5px);
    border-bottom: solid 3px black;
}
#nav3{
    grid-area: nav3;
    justify-self: end;
    transition: transform 300ms ease-in-out;
}
#nav3:hover{
    transform: translateY(-5px);
    border-bottom: solid 3px black;
}

/*--------------------------------Main1------------------------------*/

#Text1{
    padding-top: 10px;
    grid-area: Text1;
    border-top: solid 5px black;
}
#Bild1{
    border-top: solid 5px black;
    border-right: solid 5px black;
    border-radius: 0px 0px 0px 0px;
    grid-area: Bild1;
    height: 200px;
    background-image: url(../pics/computer-767781_1920.jpg);
    background-size: cover;
    background-position: center;
}

/*---------------------------------Main2------------------------------------*/

main{
    grid-area: main;
    height: 800px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
        "eins zwei"
        "fünf zwei"
        "drei vier"
        "sechs sechs";
}
#eins{
    grid-area: eins;
    border-top: solid 5px black;
    border-left: solid 5px black;
    border-bottom: solid 5px black;
    height: 195px;
}
#objekt1{
    width: 50px;
    height: 50px;
    background-color: #4988ff;
    margin: 20px;
    transition: transform 1s ease-in-out;
}
#objekt1:hover{
    transform: translate(50px, 100px);
}
#zwei{
    grid-area: zwei;
    border: solid 5px black;
}
#objekt2{
    width: 50px;
    height: 50px;
    background-color: #59dfff;

}
#objekt2:hover{
    animation: objekt2 2s ease-in-out 0s infinite alternate forwards running;
}
@keyframes objekt2{
    0%{
    }
    30%{
        width: 100%;
    }
    90%{
        height: 100%;
        width: 100%;
    }
    100%{
        height: 100%;
        width: 100%;
    }
}
#drei{
    grid-area: drei;
    border-left: solid 5px black;
    height: 195px;
}
#vier{
    grid-area: vier;
    border-left: solid 5px black;
    border-right: solid 5px black;
}
#fünf{
    grid-area: fünf;
    border-left: solid 5px black;
    border-bottom: solid 5px black;
    height: 195px;
}
#objekt5{
    width: 50px;
    height: 50px;
    margin: auto;
    margin-top: 65px;
    background-color: aqua;
    transition: transform 10s ease-in-out;
}
#objekt5:hover{
    transform: rotate(9720deg);
}
#sechs{
    grid-area: sechs;
    border: solid 5px black;
    height: 190px;
}

/*---------------------------------Seitenzeile------------------------------*/

aside{
    border-radius: 0px 0px 0px 0px;
    border-top: solid 5px black;
    background-color: rgba(213, 224, 255, 0.5);
    grid-area: aside;
    height: 100px
}
aside h1{
    text-align: center;
    font-size: 20px;
}
aside ul{
    list-style: none;
}
aside li{
    text-align: center;
}

/*---------------------------------Footer-------------------------*/

footer{
    grid-area: footer;
    height: 100px;
}
footer p{
    color:#2f7a96;
}
#YouTube{
    background-image: url(../pics/Youtube1.png);
}
#Twitter{
    background-image: url(../pics/Twitter1.png);
}
#Facebook{
    background-image: url(../pics/Facebook1.png);
}
.Button{
    float:left;
    width: 50px;
    height: 50px;
    background-size: contain;
    margin-right: 10px;
    background-repeat: no-repeat;
    font-size: 70px;
}
.Button:hover{
    border: solid 5px rgba(96, 169, 255, 0.3);
}
.Button:active{
    border: solid 5px rgba(96, 169, 255, 1.0);
}

/*-----------------------Responsive---------------------*/

@media screen and (min-width: 600px){
    body{
        background-image: url(../pics/pexels-photo-136419.jpeg);
        background-size: auto;
        background-position: center;
        background-repeat: no-repeat;
        display:grid;
        grid-template-columns: 70px 1fr 1fr;
        grid-template-areas: 
            "logo header header"
            "nav nav nav"
            "Text1 Text1 Bild1"
            "aside aside aside"
            "main main main"
            "footer footer footer";
    }
    main{
        grid-area: main;
        height: 400px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas: 
            "eins zwei drei vier"
            "fünf zwei sechs sechs";
    }
    header{
        grid-area: header;
        height: 70px;
        font-size: 25px;
        background-color: rgba(124, 205, 255, 0.5);
        border-radius: 0px 50px 0px 0px;
    }
    #Bild1{
        border-top: solid 5px black;
        border-right: solid 5px black;
        border-radius: 0px 0px 0px 50px;
        grid-area: Bild1;
        height: 200px;
        background-image: url(../pics/computer-767781_1920.jpg);
        background-size: cover;
        background-position: center;
    }
    #drei{
        grid-area: drei;
        border-left: solid 0px black;
        border-right: solid 0px black;
        border-top: solid 5px black;
        border-bottom: solid 5px black;
        height: 195px;
    }
    #vier{
        grid-area: vier;
        border: solid 5px black;
    }
    #fünf{
        grid-area: fünf;
        border-left: solid 5px black;
        border-bottom: solid 5px black;
        height: 190px;
    }
    #sechs{
        grid-area: sechs;
        border: solid 0px black;
        border-right: solid 5px black;
        border-bottom: solid 5px black;
        height: 190px;
    }
    aside{
        border-radius: 0px 0px 0px 0px;
        border-top: solid 5px black;
        background-color: rgba(213, 224, 255, 0.5);
        grid-area: aside;
        height: 100px
    }
    aside h1{
        text-align: center;
        font-size: 20px;
    }
}
@media screen and (min-width: 768px){
    body{
        background-image: url(../pics/pexels-photo-136419.jpeg);
        background-size: auto;
        background-position: center;
        background-repeat: no-repeat;
        display: grid;
        grid-template-columns: 1fr 70px 250px 250px 198px 1fr;
        grid-template-areas: 
            ". logo header header header ."
            ". nav nav nav nav ."
            ". Text1 Text1 Bild1 aside ."
            ". main main main aside ."
            ". footer footer footer footer .";
    }
    aside{
        perspective: 1000px;
        border-radius: 0px 0px 50px 0px;
        border-top: solid 5px black;
        background-color: rgba(213, 224, 255, 0.5);
        grid-area: aside;
        height: 600px
    }
    aside h1{
        text-align: center;
        font-size: 20px;
        border-bottom: solid 2px black;
    }
    aside li{
        opacity: 0;
        border-bottom: solid 2px black;
        border-right: solid 2px black;
        transform-origin: top center;
    }
    aside:hover li:nth-child(1){
        animation: li 200ms ease-in-out 0s 1 normal forwards;
    }
    aside:hover li:nth-child(2){
        animation: li 200ms ease-in-out 100ms 1 normal forwards;
    }
    aside:hover li:nth-child(3){
        animation: li 200ms ease-in-out 200ms 1 normal forwards;
    }
    aside:hover li:nth-child(4){
        animation: li 200ms ease-in-out 300ms 1 normal forwards;
    }
    @keyframes li{
        0%{
            opacity: 0;
            transform: rotateX(-90deg);
        }
        70%{
            transform: rotateX(30deg);
        }
        100%{
            opacity: 1;
            transform: rotateX(0deg);
        }
    }
}
@media screen and (min-width: 1020px){
    body{
        background-image: url(../pics/pexels-photo-136419.jpeg);
        background-size: auto;
        background-position: center;
        background-repeat: no-repeat;
        display: grid;
        grid-template-columns: 1fr 70px 250px 180px 250px 250px 1fr;
        grid-template-areas: 
            ". logo header nav nav nav ."
            ". Text1 Text1 Text1 Bild1 aside ."
            ". main main main main aside ."
            ". footer footer footer footer footer .";
    }
    header{
        border-radius: 0px 0px 0px 0px;
        grid-area: header;
        height: 70px;
        font-size: 25px;
        background-color: rgba(124, 205, 255, 0.5);
    }
    nav{
        height: 30px;
        border-radius: 0px 50px 0px 0px;
        padding-top: 40px;
        grid-area: nav;
        font-size: 20px;
        background-color: rgba(124, 205, 255, 0.5);
        display: grid;
        grid-template: 20px 1fr 1fr 1fr 20px;
        grid-template-areas: 
            ". nav1 nav2 nav3 .";
    }
    #objekt1:hover{
        transform: translate(100px, 100px);
    }
    aside{
        border-radius: 0px 0px 50px 0px;
        border-top: solid 5px black;
        background-color: rgba(213, 224, 255, 0.5);
        grid-area: aside;
        height: 600px
    }
}