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

:root {
   --on-background: lightgray;
}

body {
   height: 100vh;
   width: 100vw;
   /* background-color: #f8f8ff; */
   font-family: "Open Sans", sans-serif;
   background-image: url("/img/bg.jpg");
   background-size: cover;
}

.header {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.logo {
   height: 4.5rem;
}
.logo_html {
   margin-top: 40px;
   width: 50%;
   filter: grayscale();
}

.textbox {
   top: 40%;
   text-align: center;
}

.textbox_inhalt {
   color: #000;
   margin-bottom: 6rem;
}

.titel_main {
   display: block;
   font-size: 4rem;
   font-weight: 400;
   letter-spacing: 1.6rem;
}
.titel_sub {
   display: block;
   font-size: 1.5rem;
   letter-spacing: 0.5rem;
   font-weight: 700;
}

.fab {
   font-size: 80px;
   margin: 40px 10px;
   /* color: var(--on-background); */
}

.icon-html:hover {
   color: orange;
}
.icon-css:hover {
   color: lightgreen;
}
.icon-php:hover {
   color: blue;
}
.icon-js:hover {
   color: yellow;
}
.footer {
   position: fixed;
   left: 25%;
   bottom: 5rem;
   width: 50%;
   border-top: 1px solid #000;
}