* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* ------------------------------ TEMPORARY styles ------------------------------*/
/* * {
    padding: 0.5rem;
    border: 1px solid rgb(220,220,220);
} */

/* html, body {
    border: none;
} */

/* text elements are in a different color */
/* h1, h2, h3, h4, h5, h6, p, a { */
    /* border: 1px solid purple; 
}*/

/* images are in a different color */
/* .bg-image {
    background-color: rgb(243, 213, 65);
} */
/* ----- end of temporary styles -------------------------------------------------*/


/* -------------------- general typography styles --------------------------------*/body {
    font-family: 'Raleway', sans-serif;
}

h1 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 8rem;
}

h2 {
    text-transform: uppercase;
    font-weight: 850;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

h3 {
    font-weight: 750;
    font-size: 1.6rem;
}

p {
    line-height: 1.6;
}

p:last-child, 
li:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: #4e91ad;
}

/* ---------------------- general utility classes --------------------------------*/
.center {text-align: center;}
.right {text-align: right;}

.notbold {font-weight: 400;}

.copyright {
    opacity: 0.8;
    font-style: italic;
    font-size: 0.9rem;
}
 
.logo {
    font-size: 3.6rem;
    margin-bottom: 0;
}

/* ------------------------------ sizing and padding -----------------------------*/
.tall {min-height: 70vh;}
.vh30 {min-height: 30vh;}
.vh50 {min-height: 50vh;}

.padded1rem {padding: 1rem;}
.padded2rem {padding: 2rem;}
.padded4rem {padding: 4rem;}
.padded1 {padding:1%}
.padded5 {padding:5%}
.bg-padded {
    padding-bottom: 30%;
} /* just to ajust the position of the image */

.fa-brands {
    font-size: 2rem;
    padding-left: 0.8rem;
}

/* ------------------------------ background images ------------------------------*/
.bg-map {
    background-image: url("/images/the-bunker-6.png");
}

.bg-bed {
    background-image: url("images/the-bunker-1.jpg");
}

.bg-lounge {
    background-image: url("images/the-bunker-2.jpg");
}

.bg-hallway {
    background-image: url("images/the-bunker-3.jpg");
}

.bg-lobby {
    background-image: url("images/the-bunker-4.jpg");
}

.bg-roof {
    background-image: url("images/the-bunker-5.jpg");
}

.bg-sheets {
    background-image: url("images/the-bunker-7.jpg");
}

/* ------------ background styles ----------- */
.bg-image {
    color: white;
    background-color:rgb(228, 228, 228);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-dark {
    background-color: rgb(53, 53, 54);
    color: white;
}

.bg-pos-roof {
    background-position: 50% 23%;
}

/* ------------ media queries and styles ---------------- */
@media(max-width: 48em) {
    /* .bg-sheets {display: none;} ODER -> */
    .hide-sm {display:none;}

    .flex-flip-sm { 
        flex-direction: column-reverse;
    }

    .socialbanner {
        background-image: none;
        background-color: rgb(53, 53, 54);
        text-align: left;
        padding: 8%;
    }

    h1 {font-size: 4.5rem;} /* needed because the text on smaller devices breaks its container (leaves big white frame on the right) and therefore breaks the page -> same in footer "the bunker" also needs to be smaller to not break */

    .logo {
        font-size: 3rem;
        text-align: center;
    }

    footer h4,
    footer a {
        text-align: center;
        display: block; /* für links benötigt damit sie sich zentrieren lassen */
    }

    .tall {min-height: 35vh;}
    .vh50 {min-height: 25vh;}
    .padded5 {padding: 8%;}
    /* .padded4rem {padding-right: 1rem;} */
}