*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-size: 20%;
}

#header{
    width: 100%;
    padding: 10px;
    grid-area: header;
    text-align: center;
    border: 10px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    background-image: url("../bilder/olivegreenpaper.png");
    border-image: url("../bilder/darkgreenpaper.png") 100 repeat;
}

#topHeader, #bottomHeader{
    font-family: 'Ubuntu', sans-serif;
}

#topHeader{
    height: 100%;
    width: 80%;
    font-size: 170%;
}

#bottomHeader{
    height: 80%;
    width: 80%;
    font-size: 120%;
}

.bodyText{
    margin-top: 50px;
    margin-bottom: 50px;
    width: 85%;
    border: 10px solid;
    background-image: url("../bilder/cyanpaper.png");
    border-image: url("../bilder/bluepaper.png") 100 repeat;
    background-repeat: repeat;
}

#textContainerHolder{
    grid-area: textContainerHolder;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

#bodyTextContainer{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.bodyHeader{
    font-size: 120%;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

.textParagraf{
    padding-top: 5px;
    padding: 10px;
    font-size: 120%;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

#topSlider{
    grid-area: topSlider;
}

#bottomSlider{
    grid-area: bottomSlider;
}

#bottomSlider, #topSlider{
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: 100%;
    z-index: 100;
    position: relative;
}

#menuHolder{
    position: fixed;
    z-index: 100;
    top: 30%;
    display: grid;
    grid-template-rows: 25px 1fr 25px;
    transition: left 400ms ease-in-out;
    grid-template-areas: "topSlider slider"
                         "menuTabs ."
                         "bottomSlider .";
                         
                         
}

.tabs{
    width: 100%;
    text-align: center;
    border: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
}

.tabs, .subTabs{
    background-color: rgb(160, 160, 160);
}

.tabHeader, .subTabs{
    font-family: 'Lato', sans-serif;
}

.tabHeader{
    width: 100%;
    z-index: 100;
    font-size: 150%;
    border: 1px solid black;
    background-color: rgb(255, 255, 255);
}

.subTabs{
    font-size: 110%;
    width: 100%;
    border: none;
    border-top: 3px black solid;
    position: absolute;
}

#menuTabs{
    width: 130px;
    height: 100%;
    grid-area: menuTabs;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: center;
    border: 3px black solid;
    border-left: none;
    border-top: none;
}

#menuSlider{
    width: 25px;
    height: 100%;
    font-size: 150%;
    border: 2px solid black;
    grid-area: slider;
    background-image: url("../bilder/arrowforward.png");
    background-size: cover;
}

.borderBottomTab{
    border-bottom: 3px solid black;
}

.borderTopTab{
    border-top: 3px solid black;
}

.bottomSubTab{
    border-bottom: 3px black solid;
}

.selectedSubTab{
    border-top: none;
    border-left: 6px blue solid
}

.selectedTab{
    border-left: 6px #585858 solid
}

.slideShowContainer{
    width: 250px;
    position: relative;
    z-index: 0;
    border: 10px solid;
    height: 150px;
    border-image: url("../bilder/blackpaper.png") 100 repeat;
}

.slideShow{
    height: 100%;
    width: 100%;
}

.slideShowText{
    position: absolute;
    top: 0;
    text-align: right;
    padding-right: 5px;
    width: 100%;
    color: rgb(201, 200, 200);
    background-color: rgba(0, 0, 0, 0.436);
    font-family: "Vollkorn", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 80%;
}

.slidShowButtonContainer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.roundButtonContainer{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 60%;
    gap: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
    justify-content: center
}

.roundSlideShowButton{
    background-color: rgba(255, 255, 255, 0);
}

.selectedRoundSlideShowButton{
    background-color: black;
}

.roundSlideShowButton, .selectedRoundSlideShowButton{
    border-radius: 100%;
    width: 18px;
    height: 18px;
    border: 3px solid black;
}

.arrowSlideShowButton{
    width: 24px;
    height: 24px;
    font-size: 150%;
    border: 3px solid black;
}

main{
    min-height: 100vh;
    max-height: 100%;
    width: 100%;
    display: grid;
    background-image: url("../bilder/whitepaper.png");
    background-repeat: repeat;
    grid-template-rows: 93px 1fr;
    grid-template-areas: "header"
                         "textContainerHolder";
}

picture{
    margin-top: 50px;
    margin-bottom: 50px;
    border: 8px solid;
    border-image: url("../bilder/blackpaper.png") 100 repeat;
}

img{
    display: block;
}

#gruppBild{
    background-image: url("../bilder/lightgreenpaper.png");
    background-repeat: repeat;
}

@media only screen and (min-width: 600px){
    .bodyText{
        width: 50%;
    }

    .bodyHeader{
        font-size: 160%;
    }

    .textParagraf{
        font-size: 130%;
    }

    #topHeader{
        font-size: 230%;
    }
    
    #bottomHeader{
        font-size: 160%;
    }

    main{
        grid-template-rows: 100px 1fr;
    }

    .slideShowContainer{
        width: 300px;
        height: 200px;
    }

    .slideShowText{
        font-size: 100%;
    }
    
    .roundSlideShowButton, .selectedRoundSlideShowButton{
        width: 22px;
        height: 22px;
    }
    
    .arrowSlideShowButton{
        width: 26.4px;
        height: 26.4px;
    }

    picture{
        border: 12px solid;
        border-image: url("../bilder/blackpaper.png") 100 repeat;
    }
}

@media only screen and (min-width: 769px){
    .bodyText{
        width: 50%;
        max-width: 650px;
    }

    .bodyHeader{
        font-size: 200%;
    }

    .textParagraf{
        font-size: 160%;
    }

    #menuTabs{
        width: 181px;
    }

    .tabHeader{
        font-size: 200%;
    }

    .subTabs{
        font-size: 150%;
    }

    #topHeader{
        font-size: 260%;
    }
    
    #bottomHeader{
        font-size: 190%;
    }

    #menuHolder{
        grid-template-rows: 30px 1fr 30px;

    }

    main{
        grid-template-rows: 125px 1fr;
    }
    
    .slideShowContainer{
        width: 350px;
        height: 250px;
    }

    .slideShowText{
        font-size: 130%;
    }

    .roundSlideShowButton, .selectedRoundSlideShowButton{
        width: 26px;
        height: 26px;
    }
    
    .arrowSlideShowButton{
        width: 31.2px;
        height: 31.2px;
    }
}

@media only screen and (min-width: 1150px){
    #bodyTextContainer{
        height: 100%;
        width: 100%;
        padding: 50px;
        padding-left: 0px;
        padding-right: 50px;
        row-gap: 50px;
        margin-right: 30px;
        background-repeat: repeat;
        display: unset;
        justify-content: unset;
        align-items: unset;
        flex-direction: unset;
        flex-wrap: unset;
        justify-items: center;
        align-items: center;
    }

    picture{
        margin: 0;
        border: 18px solid;
    }

    
    .bodyText{
        max-width: none;
        width: 80%;
        height: fit-content;
        margin: 0;
    }
}