@media (max-width: 768px) {

    .noselect {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    }



    p {
        font-family: Stix;
        font-size: 1.5vmax;
    }

    body {
        background-image: url(/pictures/backgroundMobile.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        min-width:100vw;
        min-height:100vh;
    }

    /*Navi for all pages*/
    .navi_div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        width: 80vw;
        margin-left: 2em;
        margin-right: 2em;
        font-size: 4vw;
    }

    .navi_box {
        border-color: black;
        border-radius: 8px;
        border-style: solid;
        padding: 10px;
        margin: 0.8vh 0.8vw;
        text-align: center;
        min-width: 15vw;
        background: white;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .1), 0 3px 6px rgba(0, 0, 0, .05);
        box-sizing: border-box;
        background-image: linear-gradient(#464d55, #25292e);
        cursor: pointer;
    }

        .navi_box a {
        text-decoration: none;
        color: ghostwhite;
    }

/*website title box styling*/

    .title_box {
        display: flex;
        justify-content: center;
        text-align: center;
        font-family: Bilbo;
        color: #aa2520;
        min-width: 12em;
        margin-top:2%;
    }

/*--------------------------------*/

/*About Us Page*/

    .welcome_box {
        
        text-align: center;
        border-radius: 10px;
        padding: 3vw;
        border-width: 3px;
        border-color: black;
        overflow: auto;
        min-width: 12em;
        max-height: 30vh;
        max-width: 80vw;
        margin: 0 auto;
        background-image: linear-gradient(to bottom, #AACDE3 40%, #deeefb 80%)
    }

    /*Hiding ugly radio boxes*/
    input[name="aboutUsRadio"] {
        visibility: hidden;
        position: absolute;
    }

    /*surrounding div "galarySlider" is in Gallery page part further below*/

    /*event handling for gallery 1-6 -> if gallery(number)checked {change settings for specified element}*/
    #aboutus1:checked ~ .aboutUsSlider #sliderArrow1 {
        display: unset;
    }
        #aboutus1:checked ~ .aboutUsSlider #sliderArrow1 .sliderArrow {
            display: unset;
        }

    #aboutus2:checked ~ .aboutUsSlider #sliderArrow2 {
        display: unset;
    }
        #aboutus2:checked ~ .aboutUsSlider #sliderArrow2 .sliderArrow {
            display: unset;
        }

    #aboutus3:checked ~ .aboutUsSlider #sliderArrow3 {
        display: unset;
    }
        #aboutus3:checked ~ .aboutUsSlider #sliderArrow3 .sliderArrow {
            display: unset;
        }

    #aboutus4:checked ~ .aboutUsSlider #sliderArrow4 {
        display: unset;
    }
        #aboutus4:checked ~ .aboutUsSlider #sliderArrow4 .sliderArrow {
            display: unset;
        }

    #aboutus5:checked ~ .aboutUsSlider #sliderArrow5 {
        display: unset;
    }
        #aboutus5:checked ~ .aboutUsSlider #sliderArrow5 .sliderArrow {
            display: unset;
        }

    #aboutus6:checked ~ .aboutUsSlider #sliderArrow6 {
        display: unset;
    }
        #aboutus6:checked ~ .aboutUsSlider #sliderArrow6 .sliderArrow {
            display: unset;
        }

    .aboutUsSlider {
        position: relative;
        width: 80vw;
        height: 40vh;
        margin: 2% auto;
        min-width: 12em;
        overflow: hidden;
    }

    .aboutUsImage {
        width: 80vw;
        align-items: center;
        justify-content: center;
        min-width: 12em;
        height: 25vh;
        border-radius: 20px;
    }

        .aboutUsImage img {
            max-width: 100%;
            height: 25vh;
            object-fit: contain;
            border-radius: 20px;
        }

.surroundingDivAboutUs{

    display:unset;
    margin:unset;
}


/*END OF ABOUT US PAGE CSS*/

/*--------------------------------*/

/*Zimmer Page CSS*/   
/*dont question this, needed for button control*/
 #roomsBox{

 }

    /* Textbox styling */
    .dogTextbox {
        width: 100%;
        height: 100%;
        visibility: visible;
    }

    .catTextbox {
        visibility: hidden;
        width: 100%;
        
        position: absolute;
    }
    /* Animation for textbox text slide in */
    @keyframes fadeIn {
        0% {
            visibility: hidden;
            transform: translateX(100vw); /* Initial position adjustment if needed */
        }

        100% {
            visibility: visible;
            transform: translateX(0);
        }
    }
    /* Animation for textbox text slide out */
    @keyframes fadeOut {
        0% {
            visibility: visible;
            transform: translateX(0); /* Initial position adjustment if needed */
        }

        100% {
            visibility: hidden;
            transform: translateX(-100vw);
        }
    }

    /*box switch for the room sub title labels (Hunde und Katzen)*/
    .RoomSwitchBox {
        font-size: 1.5em;
        font-weight: bold;
        display: inline-flex;
        justify-content: center;
        text-align: center;
        font-family: Sofia;
        color: red;
        width: 35vw;
        min-width: 6em;
        margin: 0 auto;
    }

        .RoomSwitchBox:hover {
        }

    /*box for switching text*/
    .swapBox {
        display: flex;
        text-align: center;
        border-style: solid;
        border-radius: 10px;
        border-width: 3px;
        border-color: black;
        max-height: 40em;
        max-width: 80vw;
        min-width: 10em;
        margin: 5% auto;
        position: relative;
        min-height: 20vh;
        overflow-y: auto;
        justify-content: right;
        align-items: center;
        background-color: #EEEEEE;
    }

    /*sub title and relevant for labels / radiobutton functionality*/
    #CatLabel {
        opacity: 0.3;
        margin: 0 auto;
        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px;
    }

    #DogLabel {
        margin: 0 auto;
        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px;
    }

    /*hide ugly radio button! -_-*/
    input[name="RoomSwitch"] {
        visibility: hidden;
        position: absolute;
    }

    /*if radio button RoomSwitchCat checked then change #CatLabel CSS*/
    #RoomSwitchCat:checked ~ #CatLabel {
        opacity: 1;
        background-color: #FCFCFD;
        border-radius: 4px;
        border-width: 0;
        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
        box-sizing: border-box;
        color: #434670;
        cursor: pointer;
        text-shadow: 1px 1px 2px #00e6e6;
    }
    /*if radio button RoomSwitchCat checked then change #DogLabel CSS*/
    #RoomSwitchCat:checked ~ #DogLabel {
        opacity: 0.3;
        color: #434670;
    }
    /*if radio button RoomSwitchDog checked then change #CatLabel CSS*/
    #RoomSwitchDog:checked ~ #CatLabel {
        opacity: 0.3;
        color: #434670;
    }
    /*if radio button RoomSwitchDog checked then change #DogLabel CSS*/
    #RoomSwitchDog:checked ~ #DogLabel {
        opacity: 1;
        background-color: #FCFCFD;
        border-radius: 4px;
        border-width: 0;
        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
        box-sizing: border-box;
        color: #434670;
        cursor: pointer;
        text-shadow: 1px 1px 2px #00e6e6;
    }

    /*hiding text and showing animation if checked*/
    #RoomSwitchCat:checked ~ #roomsBox .swapBox .dogTextbox {
        visibility: hidden;
        animation: fadeOut 1s ease-in forwards;
    }
    /*hiding text and showing animation if checked*/
    #RoomSwitchCat:checked ~ #roomsBox .swapBox .catTextbox {
        visibility: visible;
        animation: fadeIn 1s ease-in forwards;
    }
    /*hiding text*/
    #RoomSwitchCat:checked ~ #roomsBox .pictureBoxRooms .catPicture {
        visibility: visible;
    }
    /*hiding text*/
    #RoomSwitchCat:checked ~ #roomsBox .pictureBoxRooms .dogPicture {
        visibility: hidden;
    }

    /*picture boxes, images and hover css for Dog and Cat*/
    .dogPicture {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        min-width: 12em;
    }

        .dogPicture img {
            width: 40vw;
            height: 20vh;
            margin: 5px auto;
            object-fit: contain;
            min-height: 10em;
            min-width: 10em;
        }

            .dogPicture img:hover {
                -webkit-transform: scale(1.2);
                -ms-transform: scale(1.2);
                transform: scale(1.2);
            }

    .catPicture {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        min-width: 12em;
        position: absolute;
        visibility: hidden;
        top: 0%;
    }

        .catPicture img {
            width: 40vw;
            height: 20vh;
            margin: 5px auto;
            object-fit: contain;
            min-height: 10em;
            min-width: 10em;
        }

            .catPicture img:hover {
                -webkit-transform: scale(1.3);
                -ms-transform: scale(1.3);
                transform: scale(1.3);
            }

    .pictureBoxRooms {
        position: relative;
        overflow: hidden;
    }

    .surroundingDivRooms {
        justify-items: center;
        text-align: center;
    }

 /* END OF ZIMMER PAGE CSS*/

 /*--------------------------------*/

/*Wichtige Infos page CSS*/

    /*Text Box prices*/
    .prices {
        justify-self: center;
        
        text-align: center;
        border-style: solid;
        border-radius: 10px;
        padding: 10px;
        border-width: 3px;
        border-color: black;
        max-height: 40vh;
        overflow: auto;
        max-width: 20em;
        min-width: 8em;
        margin: 5% auto;
        background-color:#EEEEEE;
    }
    /*Text Box contact*/
    .contact {
        justify-self: center;
        
        text-align: center;
        border-style: solid;
        border-radius: 10px;
        padding: 10px;
        border-width: 3px;
        border-color: black;
        max-height: 40vh;
        overflow: auto;
        max-width: 20em;
        min-width: 8em;
        margin: 5% auto;
        background-color: #EEEEEE;
    }

/*END OF WICHTIGE INFOS PAGE CSS*/

/*--------------------------------*/

/*Outdoor Page CSS*/


    /*Picture Box + CSS*/
    .outdoorPicture {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        min-width: 12em;
    }

        .outdoorPicture img {
        width: 40vw;
        height: 20vh;
        margin: 5px auto;
        object-fit: contain;
        min-height: 10em;
        min-width: 10em;
        }

            .outdoorPicture img:hover {
            -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
            transform: scale(1.2);
            }


    
    /*Textbox*/
    .outdoorBox {
        justify-self: center;
        
        text-align: center;
        border-style: solid;
        border-radius: 10px;
        padding: 10px;
        border-width: 3px;
        border-color: black;
        max-height: 40vh;
        overflow: auto;
        max-width: 20em;
        min-width: 8em;
        margin: 5% auto;
        background-color: #EEEEEE;
    }

/*END OF OUTDOORS PAGE CSS*/

/*--------------------------------*/

/*Gallery Page*/
    

    /*hiding the ugly radio buttons*/
    input[name="galleryRadio"] {
        visibility: hidden;
        position: absolute;
    }

    /*Gallery Surrounding Box*/
   .gallerySlider{
       position:relative;
       width:80vw;
       height:60vh;
       margin:2% auto;
       min-width:12em;
       
   }
        /*ImageBox*/
        .galleryImage {
        width: 80vw;
        min-height:20vh;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width:12em;
        height:30vh;
        }

            .galleryImage img{
            max-width:100%;
            height:30vh;
            object-fit:contain;
            }

        /*different slide settings -> has to be this way to ~ them individually*/
        #sliderArrow1, #sliderArrow2, #sliderArrow3, #sliderArrow4, #sliderArrow5, #sliderArrow6, #sliderArrow7, #sliderArrow8, #sliderArrow9, #sliderArrow10, #sliderArrow11, #sliderArrow12 {
        display:none;
        position: absolute;
        }
        /*just for centering*/
        .arrowWrapper {
            text-align: center;
        }
        
        /*Slider Arrow settings*/
    .sliderArrow {
        display: inline-flex;
        justify-content: center;
        font-size: 5em;
        font-weight: bold;
        margin: 0 5%;
        display: none;
        text-shadow: 0 0 10px grey;
    }

    .gallerySubtitle {
        text-align: center;
        align-items: center;
        height:6vh;
    }

        .gallerySubtitle p {
            color: black;
            text-shadow: 0 0 10px grey;
            
        }
        


    /*event handling for gallery 1-12 -> if gallery(number)checked {change settings for specified element}*/
    #gallery1:checked ~ .gallerySlider #sliderArrow1 {
        display: unset;
    }
    #gallery1:checked ~ .gallerySlider #sliderArrow1 .sliderArrow {
        
        display:unset;
    }

    #gallery2:checked ~ .gallerySlider #sliderArrow2 {
        display: unset;
    }
    #gallery2:checked ~ .gallerySlider #sliderArrow2 .sliderArrow {
        display: unset;
    }

    #gallery3:checked ~ .gallerySlider #sliderArrow3 {
        display: unset;
    }
    #gallery3:checked ~ .gallerySlider #sliderArrow3 .sliderArrow {
        display: unset;
    }

    #gallery4:checked ~ .gallerySlider #sliderArrow4 {
        display: unset;
    }
    #gallery4:checked ~ .gallerySlider #sliderArrow4 .sliderArrow {
        display: unset;
    }

    #gallery5:checked ~ .gallerySlider #sliderArrow5 {
        display: unset;
    }
    #gallery5:checked ~ .gallerySlider #sliderArrow5 .sliderArrow {
        display: unset;
    }

    #gallery6:checked ~ .gallerySlider #sliderArrow6 {
        display: unset;
    }
    #gallery6:checked ~ .gallerySlider #sliderArrow6 .sliderArrow {
        display: unset;
    }

    #gallery7:checked ~ .gallerySlider #sliderArrow7 {
        display: unset;
    }
    #gallery7:checked ~ .gallerySlider #sliderArrow7 .sliderArrow {
        display: unset;
    }

    #gallery8:checked ~ .gallerySlider #sliderArrow8 {
        display: unset;
    }
    #gallery8:checked ~ .gallerySlider #sliderArrow8 .sliderArrow {
        display: unset;
    }

    #gallery9:checked ~ .gallerySlider #sliderArrow9 {
        display: unset;
    }

    #gallery9:checked ~ .gallerySlider #sliderArrow9 .sliderArrow {
        display: unset;
    }

    #gallery10:checked ~ .gallerySlider #sliderArrow10 {
        display: unset;
    }
    #gallery10:checked ~ .gallerySlider #sliderArrow10 .sliderArrow {
        display: unset;
    }

    #gallery11:checked ~ .gallerySlider #sliderArrow11 {
        display: unset;
    }
    #gallery11:checked ~ .gallerySlider #sliderArrow11 .sliderArrow {
        display: unset;
    }

    #gallery12:checked ~ .gallerySlider #sliderArrow12 {
        display: unset;
    }
    #gallery12:checked ~ .gallerySlider #sliderArrow12 .sliderArrow {
        display: unset;
    }


    /*END OF Gallery PAGE CSS*/

    /*--------------------------------*/

    /*Impressum Page*/

    .impressumBox {
        justify-self: center;
        text-align: center;
        border-style: solid;
        border-radius: 10px;
        padding: 10px;
        border-width: 3px;
        border-color: black;
        min-width:12em;
        max-width:60vw;
        
        max-height:40vh;
        overflow: auto;
        margin: 20% auto;
        background-color: #EEEEEE;
        overflow:auto;
        
    }

}

@media (min-width: 769px) {


    .noselect {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    }

    h1 {
        font-size: 4.6vmax;
        margin: 0 auto;
    }

    

    p {
        font-family: Stix;
        font-size: 1.4vmax;
    }

    body {
        background-image: url(/pictures/backgroundDesktop.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        min-height:100vh;
        
    }

    .absolute{
        position:absolute;
    }

    /*Navi for all pages*/
    .navi_div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        font-size: 2.3vmax;
    }

    .navi_box {
        border-color: black;
        border-radius: 8px;
        border-style: solid;
        padding: 10px;
        margin: 0.8vh 0.8vw;
        text-align: center;
        
        background: white;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .1), 0 3px 6px rgba(0, 0, 0, .05);
        box-sizing:border-box;
        background-image: linear-gradient(#464d55, #25292e);
        cursor:pointer;
        opacity:0.7;
        transition:0.5s;
    }
    .navi_box:hover{
        opacity:1;
    }

        .navi_box a {
            text-decoration: none;
            color: ghostwhite;
        }
   

    /*website title box styling*/

    .title_box {
        display: flex;
        justify-content: center;
        text-align: center;
        font-family: Bilbo;
        color: #aa2520;
        min-width: 12em;
        margin-top:2%;
    }

    /*--------------------------------*/

    /*About Us Page*/

    .welcome_box {
        
        text-align: center;
        border-radius: 10px;
        padding: 0.5em;
        border-width: 3px;
        border-color: black;
        overflow: auto;
        border-style:solid;
        max-width: 45vw;
        background-color: #EEEEEE;
        margin: 5% 2%;
        height:max-content;
        min-height:30vh;
        max-height:60vh;
    }

    /*Hiding ugly radio boxes*/
    input[name="aboutUsRadio"] {
        visibility: hidden;
        position: absolute;
    }

    /*surrounding div "galarySlider" is in Gallery page part further below*/

    /*event handling for gallery 1-6 -> if gallery(number)checked {change settings for specified element}*/
    #aboutus1:checked ~ .aboutUsSlider #sliderArrow1 {
        display: unset;
    }

        #aboutus1:checked ~ .aboutUsSlider #sliderArrow1 .sliderArrow {
            display: unset;
        }

    #aboutus2:checked ~ .aboutUsSlider #sliderArrow2 {
        display: unset;
    }

        #aboutus2:checked ~ .aboutUsSlider #sliderArrow2 .sliderArrow {
            display: unset;
        }

    #aboutus3:checked ~ .aboutUsSlider #sliderArrow3 {
        display: unset;
    }

        #aboutus3:checked ~ .aboutUsSlider #sliderArrow3 .sliderArrow {
            display: unset;
        }

    #aboutus4:checked ~ .aboutUsSlider #sliderArrow4 {
        display: unset;
    }

        #aboutus4:checked ~ .aboutUsSlider #sliderArrow4 .sliderArrow {
            display: unset;
        }

    #aboutus5:checked ~ .aboutUsSlider #sliderArrow5 {
        display: unset;
    }

        #aboutus5:checked ~ .aboutUsSlider #sliderArrow5 .sliderArrow {
            display: unset;
        }

    #aboutus6:checked ~ .aboutUsSlider #sliderArrow6 {
        display: unset;
    }

        #aboutus6:checked ~ .aboutUsSlider #sliderArrow6 .sliderArrow {
            display: unset;
        }

    .aboutUsSlider {
        position: relative;
        width: 100%;
        margin: 0% auto;
        margin-top: 2.5%;
        display: flex;
        justify-content: center;
        max-height:80vh;
        
    }

    .aboutUsImage {
        width: 100%;
        display: contents;
        align-items: center;
        justify-content: center;
        float: right;
        min-height: 80%;
        max-height: 80%;
        border-radius: 20px;
    }


        .aboutUsImage img {
            width: 100%;
            height:25vmax;
            object-fit: contain;
            border-radius:20px;
        }

    .surroundingDivAboutUs {
        display: flex;
        margin: 0 1%;
        height:80vh;
    }


    /*END OF ABOUT US PAGE CSS*/

    /*--------------------------------*/

    /*Zimmer Page CSS*/
    /*dont question this, needed for button control*/
    #roomsBox {
    }

    /* Textbox styling */
    .dogTextbox {
        width: 100%;
        height: 100%;
        display: unset;
    }

    .catTextbox {
        display: none;
        width: 100%;
        height: 100%;
    }
    /* Animation for textbox text slide in */
    @keyframes fadeIn {
        0% {
            
            transform: translateX(10vw); /* Initial position adjustment if needed */
        }

        100% {
            
            transform: translateX(0);
        }
    }
    /* Animation for textbox text slide out */
    @keyframes fadeOut {
        0% {
            visibility: visible;
            transform: translateX(0); /* Initial position adjustment if needed */
        }

        100% {
            visibility: hidden;
            transform: translateX(-20vw);
        }
    }

    /*box switch for the room sub title labels (Hunde und Katzen)*/
    .RoomSwitchBox {
        font-size: 2.5vmax;
        font-weight: bold;
        display: inline-flex;
        justify-content: center;
        text-align: center;
        font-family: Sofia;
        color: red;
        width: 20vw;
        min-width: 6em;
    }

        .RoomSwitchBox:hover {
        }

    /*box for switching text*/
    .swapBox {
        display: flex;
        text-align: center;
        font-size: 1.5vmax;
        border-style: solid;
        border-radius: 10px;
        border-width: 3px;
        border-color: black;
        max-width: 40vw;
        margin: 2% auto;
        position: relative;
        overflow-y: auto;
        justify-content: right;
        align-items: center;
        background-color: #EEEEEE;
        float: left;
    }

    /*sub title and relevant for labels / radiobutton functionality*/
    #CatLabel {
        opacity: 0.5;
        margin: 0 auto;
        margin-bottom: 2%;
        cursor: pointer;
        box-shadow: rgba(55, 45, 65, 0.8) 0 5px 10px;
    }

    #DogLabel {
        margin: 0 auto;
        margin-bottom: 2%;
        cursor: pointer;
        box-shadow: rgba(55, 45, 65, 0.8) 0 5px 10px;
    }


    /*hide ugly radio button! -_-*/
    input[name="RoomSwitch"] {
        visibility: hidden;
        position: absolute;
    }

    /*if radio button RoomSwitchCat checked then change #CatLabel CSS*/
    #RoomSwitchCat:checked ~ #CatLabel {
        opacity: 1;
        background-color: #FCFCFD;
        border-radius: 4px;
        border-width: 0;
        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
        box-sizing: border-box;
        color: #434670;
        cursor: pointer;
        text-shadow: 1px 1px 2px #00e6e6;
    }
    /*if radio button RoomSwitchCat checked then change #DogLabel CSS*/
    #RoomSwitchCat:checked ~ #DogLabel {
        opacity: 0.5;
        color: #434670;
    }
    /*if radio button RoomSwitchDog checked then change #CatLabel CSS*/
    #RoomSwitchDog:checked ~ #CatLabel {
        opacity: 0.3;
        color: #434670;
    }
    /*if radio button RoomSwitchDog checked then change #DogLabel CSS*/
    #RoomSwitchDog:checked ~ #DogLabel {
        opacity: 1;
        background-color: #FCFCFD;
        border-radius: 4px;
        border-width: 0;
        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
        box-sizing: border-box;
        color: #434670;
        cursor: pointer;
        text-shadow: 1px 1px 2px #00e6e6;
    }

    /*hiding text and showing animation if checked*/
    #RoomSwitchCat:checked ~ #roomsBox .swapBox .dogTextbox {
        display: none;
    }
    /*hiding text and showing animation if checked*/
    #RoomSwitchCat:checked ~ #roomsBox .swapBox .catTextbox {
        display: unset;
        animation: fadeIn 0.5s ease-in forwards;
    }

    /*unhide pictures*/
    #RoomSwitchCat:checked ~ #roomsBox .pictureBoxRooms .catPicture {
        display: unset;
    }

    /*unhide pictures*/
    #RoomSwitchCat:checked ~ #roomsBox .pictureBoxRooms .catPicture img {
        animation: fadeIn 0.5s ease-in;
    }

    #RoomSwitchDog:checked ~ #roomsBox .pictureBoxRooms .dogPicture{
        display:unset;
    }
    #RoomSwitchDog:checked ~ #roomsBox .pictureBoxRooms .catPicture {
        display: none;
    }

    /*picture boxes, images and hover css for Dog and Cat*/
    .dogPicture {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        
        display:none;
    }

        .dogPicture img {
            width: 25vw;
            max-height: 14vmax;
            margin: 2%;
            object-fit: contain;
            margin-top: 0;
        }

            .dogPicture img:hover {
                -webkit-transform: scale(1.2);
                -ms-transform: scale(1.2);
                transform: scale(1.2);
            }

    .catPicture {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        display: none;
    }

        .catPicture img {
            width: 25vw;
            max-height: 14vmax;
            margin: 2%;
            object-fit: contain;
            margin-top: 0;
        }

            .catPicture img:hover {
                -webkit-transform: scale(1.2);
                -ms-transform: scale(1.2);
                transform: scale(1.2);
            }

    .pictureBoxRooms {
        position: relative;
        overflow:hidden;
        max-height:35vmax;
    }

    .surroundingDivRooms {
        
        width:100%;
        max-height:120vh;
    }

    /* END OF ZIMMER PAGE CSS*/

    /*--------------------------------*/

    /*Wichtige Infos page CSS*/

    /*Text Box prices*/
    .prices {
        justify-self: center;
        
        text-align: center;
        border-style: solid;
        border-radius: 10px;
        padding: 10px;
        border-width: 3px;
        border-color: black;
        
        overflow: auto;
        max-width:40vw;
        
        margin: 0 auto;
        background-color: #EEEEEE;
        align-items:center;
    }
    /*Text Box contact*/
    .contact {
        justify-self: center;
        text-align: center;
        border-style: solid;
        border-radius: 10px;
        padding: 10px;
        border-width: 3px;
        border-color: black;
        
        overflow: auto;
        max-width:40vw;
        
        margin: 0 auto;
        background-color: #EEEEEE;
    }
    .surroundingDivInfo{
        display:flex;
        margin:2% 5%;
        align-items:center;
    }

    /*END OF WICHTIGE INFOS PAGE CSS*/

    /*--------------------------------*/

    /*Outdoor Page CSS*/


    /*Picture Box + CSS*/
    .outdoorPicture {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        max-height:35vmax;
        overflow:hidden;
    }

        .outdoorPicture img {
            width: 25vw;
            max-height: 16vmax;
            margin: 2%;
            object-fit: contain;
            margin-top: 0;
        
        }

            .outdoorPicture img:hover {
                -webkit-transform: scale(1.2);
                -ms-transform: scale(1.2);
                transform: scale(1.2);
            }



    /*Textbox*/
    .outdoorBox {
        justify-self: center;
        text-align: center;
        border-style: solid;
        border-radius: 10px;
        padding: 10px;
        border-width: 3px;
        border-color: black;
        max-height: 40vh;
        overflow: auto;
        max-width:40vw;
        margin: 5% auto;
        background-color: #EEEEEE;
        float:left;
    }

    .surroundingDivOutdoor{
        margin-top:1%;
    }

    /*END OF OUTDOORS PAGE CSS*/

    /*--------------------------------*/

    /*Gallery Page*/


    /*hiding the ugly radio buttons*/
    input[name="galleryRadio"] {
        visibility: hidden;
        position: absolute;
    }

    /*Gallery Surrounding Box*/
    .gallerySlider {
        position: relative;
        height:80vh;
        
        margin: 2% auto;
        
        overflow: hidden;
    }
    /*ImageBox*/
    .galleryImage {
        
        display: flex;
        align-items: center;
        justify-content: center;
        
    }

        .galleryImage img {
            max-width: 100%;
            height: 40vh;
            object-fit: contain;
        }

    .gallerySubtitle{
        text-align:center;
        align-items:center;
    }
        .gallerySubtitle p {
            color: white;
            text-shadow: 0 0 10px black;
        }
        /*different slide settings -> has to be this way to ~ them individually*/
        #sliderArrow1, #sliderArrow2, #sliderArrow3, #sliderArrow4, #sliderArrow5, #sliderArrow6, #sliderArrow7, #sliderArrow8, #sliderArrow9, #sliderArrow10, #sliderArrow11, #sliderArrow12 {
            display: none;
            margin: 0 auto;
            width: 100%;
            max-height: 70vh;
        }


    /*just for centering*/
    .arrowWrapper {
        text-align: center;
    }

    /*Slider Arrow settings*/
    .sliderArrow {
        display: inline-flex;
        justify-content: center;
        font-size: 10vw;
        font-weight: bold;
        margin: 0 5%;
        margin-top: 5%;
        display: none;
        text-shadow: 0 0 10px black;
        color:white;
    }

    .sliderArrow:hover{
        cursor:pointer;
    }

 



    /*event handling for gallery 1-12 -> if gallery(number)checked {change settings for specified element}*/
    #gallery1:checked ~ .gallerySlider #sliderArrow1 {
        display: unset;
    }

        #gallery1:checked ~ .gallerySlider #sliderArrow1 .sliderArrow {
            display: unset;
        }

    #gallery2:checked ~ .gallerySlider #sliderArrow2 {
        display: unset;
    }

        #gallery2:checked ~ .gallerySlider #sliderArrow2 .sliderArrow {
            display: unset;
        }

    #gallery3:checked ~ .gallerySlider #sliderArrow3 {
        display: unset;
    }

        #gallery3:checked ~ .gallerySlider #sliderArrow3 .sliderArrow {
            display: unset;
        }

    #gallery4:checked ~ .gallerySlider #sliderArrow4 {
        display: unset;
    }

        #gallery4:checked ~ .gallerySlider #sliderArrow4 .sliderArrow {
            display: unset;
        }

    #gallery5:checked ~ .gallerySlider #sliderArrow5 {
        display: unset;
    }

        #gallery5:checked ~ .gallerySlider #sliderArrow5 .sliderArrow {
            display: unset;
        }

    #gallery6:checked ~ .gallerySlider #sliderArrow6 {
        display: unset;
    }

        #gallery6:checked ~ .gallerySlider #sliderArrow6 .sliderArrow {
            display: unset;
        }

    #gallery7:checked ~ .gallerySlider #sliderArrow7 {
        display: unset;
    }

        #gallery7:checked ~ .gallerySlider #sliderArrow7 .sliderArrow {
            display: unset;
        }

    #gallery8:checked ~ .gallerySlider #sliderArrow8 {
        display: unset;
    }

        #gallery8:checked ~ .gallerySlider #sliderArrow8 .sliderArrow {
            display: unset;
        }

    #gallery9:checked ~ .gallerySlider #sliderArrow9 {
        display: unset;
    }

        #gallery9:checked ~ .gallerySlider #sliderArrow9 .sliderArrow {
            display: unset;
        }

    #gallery10:checked ~ .gallerySlider #sliderArrow10 {
        display: unset;
    }

        #gallery10:checked ~ .gallerySlider #sliderArrow10 .sliderArrow {
            display: unset;
        }

    #gallery11:checked ~ .gallerySlider #sliderArrow11 {
        display: unset;
    }

        #gallery11:checked ~ .gallerySlider #sliderArrow11 .sliderArrow {
            display: unset;
        }

    #gallery12:checked ~ .gallerySlider #sliderArrow12 {
        display: unset;
    }

        #gallery12:checked ~ .gallerySlider #sliderArrow12 .sliderArrow {
            display: unset;
        }


    /*END OF Gallery PAGE CSS*/

    /*--------------------------------*/

    /*Impressum Page*/

    .impressumBox {
        justify-self: center;
        text-align: center;
        border-style: solid;
        border-radius: 10px;
        padding: 10px;
        border-width: 3px;
        border-color: black;
        max-width:40vw;
        max-height:60vh;
        overflow: auto;
        margin: 5% auto;
        background-color: #EEEEEE;
        
    }
}