*{
                font-family: Arial, Helvetica, sans-serif;
                --color-blue: rgb(0, 140, 255);
                --color-green: darkgreen;
                --switch-size: 30px;
            }
            
            
            
            .page{
                
                margin: auto;
                position: relative;;
                height: 29.7cm;
                width: 21cm;
                outline: gray 1px solid;
            }
            
            /* ####################################################### */
            /*                    Defining Sections                    */
            /* ####################################################### */

            section{
                position: relative;
                width: 100%;
                display: inline-block;
                margin: 0 auto;
                
            }
            .header{
                margin: 0;
                width: 100%;
                max-width: 100%;
                border-bottom-right-radius: 1rem;
                border-bottom-left-radius: 1rem;
                background: radial-gradient(circle at right bottom,rgb(100, 100, 100) 10%, lightgray 60%);
            }
            .header>table{
                margin: 1rem;
                width: fit-content;
            }
            .header td{
                font-weight: 600;
            }
            .header th{
                font-weight: 600;
                text-align: end;
            }
            
            .software{

                grid-row-start: 1;
                grid-row-end: 3;
                grid-column-start: 3;
                grid-column-end: 3;
            }
            .work{
                
                grid-row-start: 2;
                grid-row-end: 2;
                grid-column-start: 1;
                grid-column-end: 3;
            }

            .skills{
                
                grid-row-start: 3;
                grid-row-end: 3;
                grid-column-start: 1;
                grid-column-end: 4;
            }
            .hobbys{
                
                grid-row-start: 4;
                grid-row-end: 4;
                grid-column-start: 1;
                grid-column-end: 4;
            }

            .dokuments{
                width: 100%;
                grid-row-start: 5;
                grid-row-end: 5;
                grid-column-start: 1;
                grid-column-end: 4;
            }
            .social{
                position: absolute;
                width: 100%;
                text-align: center;
                bottom: 0;
                margin: 1rem auto;
            }
            .logo{
                display: inline;
                width: 30px;
                height: 30px;
                
                & svg{
                    display: inherit;
                    width: inherit;
                    height: inherit;
                }
            }
            .social a+a{
                margin-left: 15px;
            }


            /* ####################################################### */
            /*                    Defining Elements                    */
            /* ####################################################### */
            .title{
                color: var(--color-green);
                border-bottom: 1px solid var(--color-green);
            }
            .content{
                margin: 1rem;
                display: grid;
                gap: 1rem;
                grid-template-columns: 1fr 1fr 33%;
            }
            h4{
                margin: 0;
            }
            
            h1{
                padding: 0 1rem 0;
                font-weight: 900;
                font-size: 30pt;
                margin: 1rem 0;
                background-image: url("/media/Lebenslauf/bg.jpg");
                /* background-size: cover; */
                background-position: 10px;
                background-clip: text;
                color: transparent;

                animation-name: animate-bg;
                animation-duration: 200s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }
            #name-bg{
                width: 21cm;
                aspect-ratio: calc(1095/616);
                position: absolute;
                display: none;

            }

            table{
                margin-top: 1rem;
                border-collapse: collapse;
                width: 100%;
                
            }
            li:has(a){
                margin-top: .2rem;
            }
            a{
                color: var(--color-blue);
                text-decoration: none;
                font-size: small;

            }
            .svg-externalLink{
                width: .7rem;
                fill: var(--color-blue);
            }
            .blank-line{
                opacity: 0%;
            }
            th,td{
                text-align: left;
                vertical-align: top;
                text-wrap: pretty;
            }
            
            th{
                padding-right: 1rem;
                text-wrap: pretty;
            }
            section:not(.header) td{
                color: var(--color-blue);
                
            }
            .td-title{
                font-weight: 700;
            }
            
            P,th,td{
                font-size: 10pt;
            }
            li>p{
                margin: 0;
                color: var(--color-blue);
            }
            
            li h5{
                margin-bottom: 0;
            }
            li > ul >li{
                list-style: none;
            }
            img:not(#name-bg){
                width: 25px;
                max-height: 25px;
                /* position: absolute;          */
                
               
            }
            .flag{
                position: absolute;
                top: 10%;
                right: 5%;
                height: 15px;
                width: 25px;

            }
            
            .en{
                display: inline-block;
            }
            .de{
                display: none;
            }

            .page:has(input:checked){
                & .en{
                    display: none;
                }
                & .de{
                    display: inline-block;
                }
            }
            .page:has(input:checked:not()){
                & .en{
                    display: inline-block;
                }
                & .de{
                    display: none;
                }
            }
            
            .tooltip:has(input){
                z-index: 2;
                position: absolute;
                top: 10%;
                right: 5%;
                height: 15px;
                width: 25px;

                & input{

                    height: 15px;
                    width: 25px;
                    opacity: 0%;
                    margin: 0;
                }
            }
            

            
            /* ####################################################### */
            /*                   Dif. Screen and Print                 */
            /* ####################################################### */
            @media screen{
                
                .tooltip .tooltiptext {
                    visibility: hidden;
                    min-width: 30px;
                    width: fit-content;
                    text-wrap: balance;
                    background-color: black;
                    color: #fff;
                    text-align: center;
                    border-radius: 6px;
                    padding: 5px 8px;
                    top: 50%;
                    position: absolute;
                    right: inherit;
                    z-index: 1;
                }
                .tooltip {
                    position: relative;
                    display: inline-block;
                }
                .tooltip:hover .tooltiptext {
                  visibility: visible;
                }
                .software{     
                    &>ul>li{
                        position: relative;
                        width: 160px;
                        & ul{
                            list-style: none;
                            padding: 0;
                        }                        
                        & ul>li{
                            width: 25px;
                            margin: 2px;
                            left: 0;
                            height: 25px;
                            display: inline-block;
                        }
                        
                    }       

                } 

                    @keyframes animate-bg {
                       

                        0% {
                            background-position: 0% 20%;
                        }
                        20% {
                            background-position: 50% 60%;
                        }
                        40% {
                            background-position: 100% 50%;
                        }
                        60% {
                            background-position: 70% 80%;
                        }
                        80% {
                            background-position: 25% 95%;
                        }
                        100% {
                            background-position: 0% 20%;
                        }
                    }
            }
            @media screen and (max-width: 21cm) and (min-width: 360px){
                
                body{
                    margin: 8px 0;
                }
                .page{
                    margin: 0;
                    position: relative;
                    width: 100%;
                    height: auto;
                    padding: 0;
                    outline: none;
                }
                .header{
                    margin: 0;
                    border-bottom-right-radius: 1rem;
                    border-bottom-left-radius: 1rem;
                    background: radial-gradient(circle at right bottom,rgb(100, 100, 100) 10%, lightgray 60%);
                    
                }
                
                .header>table{
                    position: relative;;
                    right: 1rem;
                    left: 1rem;
                    margin: 1rem 0;
                    max-width: 80%;
                }
                .content{
                    margin: 1rem;
                    display: flex;
                    flex-wrap: wrap;
                    height: auto;
                    
                }
                .about table, .school table{
                    max-width: 250px;
                }
                .software>ul>li{
                    width: 80%;
                } 
                .social{
                    display: block;
                    width: 100%;
                    position: relative;
                }
            }
            @media screen and (max-width: 360px){
                body{
                    margin: 8px 0;
                }
                .page{
                    margin: 0;
                    position: relative;
                    width: 100%;
                    height: auto;
                    padding: 0;
                    outline: none;
                }
                .header{
                    margin: 0;
                    border-bottom-right-radius: 1rem;
                    border-bottom-left-radius: 1rem;
                    background: radial-gradient(circle at right bottom,rgb(100, 100, 100) 10%, lightgray 60%);
                    
                }
                
                .header>table{
                    position: relative;;
                    right: 1rem;
                    left: 1rem;
                    margin: 1rem 0;
                    max-width: 80%;
                }
                .content{
                    margin: 1rem;
                    display: flex;
                    flex-wrap: wrap;
                    height: auto;
                    
                }
                .about table, .school table{
                    max-width: 250px;
                }
                .software>ul>li{
                    width: 80%;
                } 
                .work td+td{
                    display: none;
                }
                .social{
                    display: block;
                    width: 100%;
                    position: relative;
                }
            }
            @media print{
                
                .tooltip, .tooltiptext {
                    visibility: visible;
                    color: var(--color-blue);
                    width: fit-content;
                    text-align: left;
                    border: none;
                    padding: 0;
                    position: static;
                    margin: 0;
                }
                .tooltip:has(input[type="checkbox"]) .tooltiptext{
                    display: none;
                }

                .page{
                    margin: auto;
                    position: relative;
                    width: 100%;
                    height: 100%;
                    outline: none;
                }
                img, .social{
                    display: none;
                }
                h1{
                    color: black;
                }
                .dokuments{
                    display: none;
                }
            }