@media (max-width: 1024px) {
    html {
        width: 100%;
    }

    .desktop_only {
        display: none;
    }

    .mobile_only {
        display: block; 
    } 
    
    * {
        margin: 0;
        padding: 0;
    }

    body {
        
        font-family: 'Courier New', monospace;
        max-width: 100%;

        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        
        /* border: 8px solid rgb(43, 255, 0); */
        margin: 0;
        padding: 0;
    }

    .logo_mobile {
        position: absolute;
        width : 80%;
        top: 0%
    }

    #logo {
        width: 320px;
        height: 140px;
    }

    #line_upper {
        width: 100%;
    }

    #line_lower {
        width: 100%;
    }

    .services_mobile {
        top: 190%;
        width: 70%;
    }

    .bg_services_mobile_position {
        top: 98%;
        height: 178%;
    }

    .btn {
        width: 30%;
        top: 3%;
        left: 68%;
        height: auto;
        margin: 0px;

        font-size: 24px;
    }

    #software {
        position: absolute;
        top: 44%;
        left:50%;    
        transform: translate(-50%, -50%); 
        
        width: 160px;
        height: auto;
    }

    #websites {
        position: absolute;
        top: 54%;
        left:50%;    
        transform: translate(-50%, -50%); 
        
        width: 160px;
        height: auto;
    }

    #downloads {
        position: absolute;
        top: 64%;
        left:50%;    
        transform: translate(-50%, -50%); 
        
        width: 160px;
        height: auto;
    }

    #consulting {
        position: absolute;
        top: 74%;
        left:50%;    
        transform: translate(-50%, -50%); 

        width: 160px;
        height: auto;
    }

    .p_services {
        top: 89%;
        font-size: 20px;

        color: white;
    }

    .s_1 {
        position: absolute;
        top: 122%;
        height: 42%;
    }

    .s_2 {
        position: absolute;
        top: 170%;
        height: 24%;
    }

    .s_3 {
        position: absolute;
        top: 192%;
        height: 36%;
    }

    .s_4 {
        position: absolute;
        top: 224%;
        height: 32%;
    }
    
    .placeholder {
        display: flex;
        width: 100%;
        height: 260vh;
    }

    @keyframes line-anim {
        to { stroke-dashoffset: 0; }
    }


    #line_upper {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%); 

        
        width: 400px;
        height: 2px;
    }


    #line_upper path:nth-child(1) {
        stroke-dasharray: 2308.01px;
        stroke-dashoffset: 2308.01px;
        animation: line-anim 2.0s ease infinite;
    }

    #line_lower {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        width: 400px;
    }

    #line_lower path:nth-child(1) {
        stroke-dasharray: 2308.01px;
        stroke-dashoffset: 2308.01px;
        animation: line-anim 2.0s ease infinite;
    }

    .btn_start {
        width: 30%;
        height: auto;
    }

    .btn_reload {
        width: 30%;
        height: auto;
        top: 80%;
    }

    .footer {
        position: absolute;

        top: 294%;
        height: 10%;

    }

    .copyright {
        position: absolute;

        left: 4%;
        top: 30%;

        color: #00ff99;
    }


    .rechte {
        position: absolute;

        left: 4%;
        top: 60%;

        color: #00ff99;
    }

    .green_line_bottom {
        top: 240vh;
    }

    .copyright {
        left: 4%;
        top: 243vh;
    }


    .rechte {
        left: 83%;
        top: 243vh;
    }

}