@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    src: url('./caveat-v18-latin-regular.woff2') format('woff2'), 
         url('./caveat-v18-latin-regular.ttf') format('truetype'); 
  }

.header {
    position: fixed;
    width: 100vw;
    height: 125px;
    top: 0%;
    left: 0%;
    z-index: 10;
    background-color: #6b6969; /* remove later */
}


/* secton for the logo of the page */

/* change the size and position of the logo */
.h-logo {
    position: relative;
    left: 90vw;
    top: 10%;
}

.h-logo-content {   
    width: 100px;
    height: 100px;
}

.WIP {
    position: absolute;
    left: 20%;
    top: 1%;
    font-size: 16;
}

/* section for the menu-button of the page */

.h-sidebar {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    top: 15%;
    left: 2vw;    
}

.bar1, .bar2, .bar3 {
    width: 45px;
    height: 7px;
    background-color: #333;
    margin: 7px 0;
    transition: 0.4s;
}
  
/* translate zu einem späteren Zeitpunkt anpassen, sodass das "X" symetrisch ist */
.change .bar1 {
    transform: translate(0, 13.5px) rotate(-45deg);
}
  
.change .bar2 {
    opacity: 0;
}
  
.change .bar3 {
    transform: translate(0, -13.5px) rotate(45deg);
}


/* section for the menu-content */
.sidebar {
    display: none;
    position: absolute;
    background-color: #331b1b;      /* working color */
    width: 20vw;
    height: 100vh; /* warum passt die höhe nicht? xD */
    top: 125px;
    left: 0%;
    z-index: 5;
}

.sidebar-content {
    display: none;   
    position: absolute;
    top: 10%;
    left: 10%;
}

.sidebar-list {
    list-style-type: none;
}

.sidebar-button {
    font-family: "Caveat", cursive;
    background: none;
    background-color: none;
    border: none;
    color: white;
    font-size: 28px;
    
}

/* section for the Main-page */
.main {
    position: absolute;
    width: 100vw;
    top: 125px;
    left: 0%;
    background-color: #6b6969;      /* working color */
}

.m-content-2 {
    position: relative;
    width: 100vw;
    height: 600px;
    background-image: url(../img/Achtsamkeit_BG.png);   /* Bild bitte noch bearbeiten */
}

.m-content-1 {
    position: relative;
    width: 100vw;
    height: 500px;
    background-image: url(../img/Kochbuck_BG.png);      /* Bild bitte noch bearbeiten */
}


/* link section */
.page-link {
    text-decoration: none;
    color: white;
}


/* btton section */
.download-button:hover, .read-button:hover{
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24);
}

.download-button, .read-button {
    background-color: #5f5d5d;      /* working color */
    border-radius: 20px;
    border: solid 3px;
    border-color: #333;
    color: rgb(48, 47, 47);
    text-align: center;
    padding: 12px;
    width: 130px;
    cursor: pointer;
    font-size: 18 px;
    text-decoration: none;
    float: left;
    margin-right: 20px;
}

.m-content-2-buttons {
    position: absolute;
    top: 90%;
    left: 41%;
}

.m-content-1-buttons {
    position: absolute;
    top: 90%;
    left: 41%;
}

.footer {
    position: absolute;
    top: 1225px;            /* number is added from all top-px from above */
    left: 0;
    width: 100vw;
    height: 100px;
    background-color: #4d4c4c; /* working color */
} 

.info-links {
    position: absolute;
    left: 40%;
    top: 10%;
    list-style-type: none;
}

.media-links {
    position: absolute;
    left: 50%;
    top: 10%;
    list-style-type: none;
}

.footer-link {
    text-decoration: none;
    color: black;       
}

.footer-link:hover {
    color: white;       /* working color */
}