@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');

*{
    font-family: 'Source Sans Pro', sans-serif;
    letter-spacing: 4px;
    margin: 0;
    padding: 0;
   }
   
   a {
       color: rgb(255, 136, 0);
   }

   h1 {
       color: orange;
       font-size: 6rem;
       text-align: center;
       margin-top: 50px;
   }

   .fancy {
    color: white;
    font-size: 6rem;
    text-align: center;
    margin-top: 50px;
   }

   span {
       transition: all 1s ease;
       transform: translateY(50px);
       display: inline-block;
   }

   span.fade {
       transform: translateY(0px);
       color: orange;
   }

   body {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: top;
    letter-spacing: 0.02em;
     font-weight: 400;
    -webkit-font-smoothing: antialiased; 
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
   }
   
   .blurred-box {
     position: relative;
     width: 250px;
     height: 350px;
     top: calc(50% - 300px);
     border-radius: 10px;;
     overflow: hidden;
     
   }
   
   .blurred-box:after {
    content: '';
    width: 300px;
    height: 300px;
    background: inherit; 
    position: absolute;
    left: -25px;
    right: 0;
    top: -25px;  
    bottom: 0;
    box-shadow: inset 0 0 0 200px rgba(255,255,255,0.5);
    filter: blur(10px);
   }
   
   
   .user-login-box {
     position: relative;
     margin-top: 25px;
     text-align: center;
     z-index: 1;
   }
   .user-login-box > *{
     display: inline-block;
     width: 200px;
   }
   
   .user-icon {
     width: 100px;
     height: 100px;
     position: relative;
     background-repeat: no-repeat;
     border-radius: 50%;
     background-size: contain;
     background-image: url(https://yt3.ggpht.com/ytc/AAUvwngLddl9J1jmx8y_n-nZrZID1AW5_x9_mdM9xMwdog=s900-c-k-c0x00ffffff-no-rj);
   }

   .container {
       justify-content: space-evenly;
       align-items: center;
       text-align: center;
       min-height: 100vh;
   }

   .btn {
    width: 200px;
    height: 25px;
    border: none;
    color: orange;
    background-color: white;
    border-radius: 6px;
    box-shadow: inset 0 0 0 0 orange;
    transition: ease-out 0.8s;
    font-size: 1rem;
    outline: none;
   }

   .btn:hover {
       box-shadow: inset 300px 0 0 0 orange;;
       color: white;
   }

   .containerforsmooth {
       width: 100%;
       height: 100%;
       overflow-y: scroll;
       scroll-behavior: smooth;
       scroll-snap-type: y mandatory;
   }


   .navbar {
       position: fixed;
       top: 0;
       display: flex;
       width: 100%;
       height: 60px;
       background-color: white;
       opacity: 0.8;
       z-index: 100;    
    }

    .navbar ul {
        display: flex;
        list-style: none;
        justify-content: space-around;
        height: 100%;
        align-items: center;
        margin-left: auto;
    }

    .navbar ul li {
        margin: 0 1rem;
        padding: 1rem;
    }

    .navbar ul li a {
        text-decoration: none;
        text-transform: uppercase;
        color: magenta;
    }

    .navbar ul li a:hover {
        color: skyblue;
    }

    .nav-links {
        width: 35%;
    }
    
    .logo_img {
        position: absolute;
        top: 10px;
        left: 30px;
        width: 85PX;
        height: 40px;
        opacity: 10;
    }

    section {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100vh;
        scroll-snap-align: center;
    }

    section h1 {
        font-size: 6rem;
    }

    section p {
        font-size: 1.5rem;
    }

    section#home {
        background: url('bilder/Home.jpg') no-repeat center center/ 
        cover;
    }

    section#about {
        background: url('bilder/About.jpg') no-repeat center center/ 
        cover;
    }

    section#contact {
        background: url('bilder/Contact.jpg') no-repeat center center/ 
        cover;
    }

@media screen and (max-width: 1000px) {
    
    .line {
        width: 30px;
        height: 3px;
        background: magenta;
        margin: 5px;
    }
    nav {
        position: relative;
    }

    .hamburger {
        position: absolute;
        cursor: pointer;
        right: 5%;
        top: 50%;
        transform: translate(-5%, -50%);
        z-index: 29999999;
    }
    
    .nav-links {
        position: fixed;
        background: white;
        opacity: 1;
        height: 100vh;
        width: 100%;
        flex-direction: column;
        clip-path: circle(100px at 90% -10%);
        -webkit-clip-path: circle(100px at 90% -10%);
        transition: all 1s ease-out;
    }

    .nav-links.open {
        clip-path: circle(2000px at 90% -10%);
        -webkit-clip-path: circle(2000px at 90% -10%);
    }

    .nav-links li {
        opacity: 0;
    }

    .nav-links li a {
        font-size: 25px;
    }

    .nav-links li:nth-child(1){
        transition: all 0.5s ease 0.2s;
    }

    .nav-links li:nth-child(2){
        transition: all 0.5s ease 0.4s;
    }

    .nav-links li:nth-child(3){
        transition: all 0.5s ease 0.6s;
    }

    li.fade {
        opacity: 1;
    }
}