body {
    user-select: none;
    background-color: rgb(31, 31, 31);
    overflow-x: hidden;

}
.menu {
    display: none;
}
a {
    font-size: 3vh;
    width: min-content;
    display: inline;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 640;
    color: rgb(182, 182, 182);

    text-decoration: none;
}

.show {
    filter: blur(0%);
    opacity: 1;
    transition: all 1s;
    
}

Header {
    backdrop-filter: blur(10px);
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 2.8vh;
    background-color: rgba(108, 108, 108, 0.543);
    padding-block: 1vh;
    padding-bottom: 2vh;
    padding-left: 1vh;

}

h1 {
    font-size: 3vmin;
    width: min-content;
    margin-inline: 1vw;
    display: inline;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 640;
    color: rgb(101, 101, 101);

}

h2 {
    position: relative;
    margin-top: 40vh;
    text-align: center;
    width: 100%;
    font-size: 20vmin;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    color: rgb(101, 101, 101);
    height: 55vh;
}

h3 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(80, 80, 80);
    margin-block: 0.5vh;
    font-weight: 600;
    margin-left: 10vmin;
    font-size: 6vmin;
}

.Screen {

        height: 70vh;
        scroll-margin-top: 40vh; /* Höhe des Headers */

    
    
}

.Python {
    background-color: grey;
    height: 30vh;
    width: 30vh;
    border-radius: 100%;
    margin-left: 16vw;
    
}

.HTML {
    background-color: grey;
    height: 30vh;
    width: 30vh;
    border-radius: 100%;
    margin-left: calc(66vw - 60vh);
    margin-right: 16vw;

    display: flex;
    align-items: center;
    justify-content: center;
}
.Project {
    margin-top: 5vh;
    display: flex;
    text-align: center;
}

p {
    margin-top: 40vh;
    text-align: center;
    width: 80vw;
    margin-inline: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(80, 80, 80);
    font-weight: 500;
    font-size: 2vw;
}

.Kontakt {
    position: absolute;
    font-size: 15px;
    background-color: rgba(125, 124, 124, 0.181);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(152, 152, 152);
    font-weight: 500;
    width: 100%;
    left: 0;
    padding-block: 5vh;
    padding-left: 5vw;
    border-radius: 0;
    box-sizing: border-box;
     
    
}

.line {
    margin-right: auto;
    background-color: rgb(43, 43, 43);
    height: 0.2vh;
    width: 90vw;
    margin-block: 3vh;
}

h4 {
    margin-block: 1vh;
}

.show {
    filter: blur(0%);
    opacity: 1;
    transition: all 1s;
    
}
.hide {
    filter: blur(100%);
    opacity: 0;
    transition: all 1s;
    margin-inline: 0;
    margin-left: -50vw;
    margin-right: auto;
}

.Py {
    height: 30vh;
}
.Htm {
    height: 15vh;
}
.menu {
    opacity: 0;
}
.Projektet {
    text-align: center;
    margin-left: 0;
    font-size: 7vmin;
}

@media (max-width: 900px) and (max-aspect-ratio: 4/3), 
       (max-width: 900px) and (min-aspect-ratio: 16/9){
    
    Header {
        transition: 1s ease;
        display: none;
        height: 100vh;
        padding-top: 20vh;
        padding-left: 5vw;
    }
    h3 {
        font-size: 20px;
    }
    a {
        display: block;
    }
    p {
        font-size: 15px;
    }

    .Project {
        display:block;
        text-align: center;
    }
    .Python {
        margin-inline: auto;
    }
    .HTML {
        margin-inline: auto;
        margin-top: 2vh;
    }

    .Kontakt {
        position: absolute;
        font-size: 15px;
        background-color: rgba(125, 124, 124, 0.181);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: rgb(152, 152, 152);
        font-weight: 500;
        width: 100%;
        left: 0;
        padding-block: 5vh;
        padding-left: 5vw;
        border-radius: 0;
        box-sizing: border-box;
    }
    .menu { 
        display: block;
        transition: 1s ease;
        opacity: 1;
        position:fixed;
        top: 5vmin;
        left: 5vmin;
        height: 10vmin;
        width: 10vmin;
        border-radius: 100%;
        background-color: rgb(129, 129, 129);
    }
    .menu1 {
        transition: 1s ease;
        position:fixed;
        top: 6vmin;
        left: 6vmin;
        height: 8vmin;
        width: 8vmin;
    }
    .menu2 {
        transition: 1s ease;
        position:fixed;
        top: 6vmin;
        left: 6vmin;
        height: 8vmin;
        width: 8vmin;
    }
    .only_show {
        transition: 1s ease;
        display:block;
    }
    .only_hide {
        transition: 1s ease;
        display: none;
    }


}

body {
    padding-bottom: 3vh;
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;

    min-width: 100vw;
    /* mobile viewport bug fix */
    min-width: -webkit-fill-available;
  }
  
  html {
    height: -webkit-fill-available;
    width: -webkit-fill-available;
  }

  
body {
    --sb-track-color: #3a3a3a;
    --sb-thumb-color: #5f5f5f;
    --sb-size: 8px;
  }
  
  body::-webkit-scrollbar {
    width: var(--sb-size)
  }
  
  body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
  }
  
  body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
    
  }
  
  @supports not selector(::-webkit-scrollbar) {
    body {
      scrollbar-color: var(--sb-thumb-color)
                       var(--sb-track-color);
    }
  }