/*schema.org
W3 School
Stack Overflow*/

body{
    width:99%;
    background-image: linear-gradient(to right,#000000, #2A007F, #6610f2, #2A007F, #000000);
    color: #E1EFFF;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient( red, yellow, deepskyblue, blue, blueviolet, fuchsia);
    border-radius: 20px;
}

::-webkit-scrollbar-track {
    background-color: #230141;
}

.hintergrund{
    position: absolute;
    top: 6.5%;
    left: 18%;
    width: 68%;
    height: 238%;
    opacity: 0.1;
}

.grid-container-homepage {
    display: grid;
    grid-gap:  10px;
    grid-template-areas: "header header header" ". main ." "footer footer footer";
}

.grid-container-training{
    display: grid;
    grid-gap: 10px;
    grid-template-areas: "header header header"  "sidebar main ." "footer footer footer";
}

.grid-container-me{
    display: grid;
    grid-gap: 10px;
    grid-template-areas: "header header header" "sidebar main ." ". mainTwo ." ". mainThree ." "footer footer footer";
}

.grid-container-contact{
    display: grid;
    grid-gap: 10px;
    grid-template-areas: "header header header" ". main ." ". sidebar ." "footer footer footer";
}

.header{ grid-area: header; }

.sidebar { grid-area: sidebar; }

.main{ grid-area: main; }

.mainTwo { grid-area: mainTwo; }

.mainThree { grid-area: mainThree; }

.footer{ grid-area: footer; }

.wrapper{
    width: 99%;
    position:fixed;
    z-index:10;
    background:inherit;
}

.bottom-wrapper{
    width: 99%;
    padding-top:92px;
    z-index:5;
    overflow:auto;
}

.Kopfzeile{
    width: 99%;
    height: 6.5%;
    position: fixed;
    top: 0;
    border-radius: 10px;
}

.Logo{
    position: fixed;
    top: -1.2%;
    left: 0.5%;
    width: 12%;
    height: 9%;
}

.Header{
    position: fixed;
    top: 2.8%;
    left: 28%;
    right: 28%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    filter: drop-shadow(0 0 1rem #0E0139);
}

.menu-link{
    color: black;
    font-family: "Microsoft Himalaya", serif;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 6px 0 6px;
    font-size: 180%;
}

.menu-link:hover{
    text-decoration: underline;
    text-decoration-color: #CB95F7;
}

.Welcome{
    position: absolute;
    top: 8.5%;
    left: 32%;
    right: 25%;
}

.Selfie{
    width: 30%;
    height: 40%;
    border-radius: 50%;
    object-fit: cover;
    float: right;
}

#Hi{
    font-size: 42px;
    color: #94faff;
    font-family: "Book Antiqua", fantasy;
}

.infos{
    position: absolute;
    top: 32%;
    left: 34%;
    right: 10%;
    font-size: 24px;
    font-family: "Book Antiqua", fantasy;
}

.comment{
    position: absolute;
    top: 81.5%;
    font-size: 17px;
    font-family: "Book Antiqua", fantasy;
}

.Introduction{
    text-decoration: none;
    color: #94faff;
}

.Introduction:hover{ color: #CB95F7; }

h4{
    font-size: 30px;
    color: #94faff;
    font-family: "Book Antiqua", fantasy;
    margin-bottom: -0.5%;
}

.projectspages{
    position: absolute;
    top: 85%;
    font-size: 34px;
    left: 20px;
    right: 20px;
    text-align: center;
    color: #94faff;
    font-family: "Book Antiqua", fantasy;
}

.projectspages:hover{
    text-decoration: underline;
    text-decoration-color: #CB95F7;
}

.OnePage-container{
    position: absolute;
    top: 95%;
    left: 15%;
    padding-top: 2%;
    align-items: center;
    display: flex;
    justify-content: center;
}

.Nova{
    margin: 2% -6% 0 15%;
    width: 70%;
    height: 70%;
    border-radius: 2%;
}

.Nova:hover{ filter: drop-shadow(0 0 0.5rem #CB95F7); }

.Raven{
    position: relative;
    top: 1.5%;
    left: 30%;
    right: 2%;
    bottom: 4%;
    width: 40%;
    height: 98%;
}

.Back{
    position: absolute;
    top: 80%;
    left: 80%;
    right: 2%;
    bottom: 2%;
    height: 3%;
    width: 5%;
    border-radius: 15%;
    font-size: 80%;
    font-family: "Book Antiqua", fantasy;
    background-color: #CB95F7;
}

.Smilla{
    margin: 2% 0 0 -12%;
    width: 70%;
    height: 70%;
    border-radius: 2%;
}

.Smilla:hover{ filter: drop-shadow(0 0 0.5rem #CB95F7); }

.Slime{
    position: relative;
    top: 1.5%;
    left: 30%;
    right: 2%;
    bottom: 4%;
    width: 40%;
    height: 98%;
}

.TrainingPrivate{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    padding-bottom: 2%;
    top: 220%;
    left: 14%;
    right: 14%;
}

#Training{
    width: 120%;
    border-radius: 10px;
    margin: 0 2% 0 6%;
    padding: 0 2% 0 2%;
    font-size: 24px;
    font-family: "Book Antiqua", fantasy;
    background-color: #CB95F7;
    filter: drop-shadow(0 0 0.2rem #6610f2);
}

#Training:hover{
    background-color: #FF0101;
    filter: drop-shadow(0 0 0.5rem #94faff);
}

#Private{
    width: 120%;
    margin: 0 6% 0 2%;
    padding: 0 2% 0 2%;
    font-size: 24px;
    border-radius: 10px;
    font-family: "Book Antiqua", fantasy;
    background-color: #CB95F7;
    filter: drop-shadow(0 0 0.2rem #6610f2);
}

#Private:hover{
    background-color: #FF0101;
    filter: drop-shadow(0 0 0.5rem #94faff);
}

.End{
    width: 99%;
    height: 20%;
    position: absolute;
    opacity: 0.6;
    top: 232%;
}

.Pages{
    position: absolute;
    bottom: 0.5%;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    top: 244%;
    left: 12%;
    right: 12%;
    font-size: 25px;
}

.Link{
    padding: 2%;
    color: #94faff;
    text-decoration: none;
}

.Link:hover{ color: chartreuse; }

.SocialsEnd{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20%;
    top: 230%;
    right: 10%;
    left: 15%;
    width: 25%;
}

.LinkedinEnd{
    margin-left: 180%;
    width: 20%;
    height: 10%;
}

.GithubEnd{
    margin-left: 1080%;
    width: 100%;
    height: 90%;
}

.InstagramEnd{ 
    margin-top: 5%;
    width: 160%;
    height: 150%;
}

.Training{
    position: relative;
    top: 12%;
    left: 18.5%;
    width: 64%;
    height: 100%;
}

.Training-title{
    position: relative;
    margin-top: 5%;
    width: 62%;
    left: 33%;
    right: 33%;
    font-size: 31.5px;
    margin-bottom: 12%;
    font-family: "Book Antiqua", fantasy;
    color: #CB95F7;
    Text-decoration: underline;
    Text-decoration-color: #94faff;
    justify-content: center;
}

.Container0ne{
    position: relative;
    top: 8%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 90%;
    height: 60%;
    padding: 0 5% 0 5%;
    margin-bottom: 14%;
}

.Container0ne img{
    width: 96%;
    height: 96%;
}

.Styx{
    margin-right: 2%;
    width: 95%;
    height: 70%;
}

.SAP6{
    position: relative;
    left: 12%;
    font-size: 140%;
    font-family: "Book Antiqua", fantasy;
    color: #94faff;
    text-decoration: none;
}

.Runa{
    margin-left: 2%;
    width: 95%;
    height: 65%;
}

.SAP5{
    position: relative;
    left: 32%;
    font-size: 140%;
    font-family: "Book Antiqua", fantasy;
    color: #94faff;
    text-decoration: none;
}

.ContainerTwo{
    position: relative;
    top: 4%;
    left: 3%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 90%;
    height: 60%;
    padding: 0 5% 0 5%;
    margin-bottom: 12%;
}

.ContainerTwo img{
    width: 96%;
    height: 96%;
}

#Storytelling{
    border-radius: 50%;
    margin-right: 2%;
    width: 80%;
    height: 90%;
}

.HeAirNa{
    position: relative;
    left: 9%;
    font-size: 140%;
    font-family: "Book Antiqua", fantasy;
    color: black;
    text-decoration: none;
}

#SAP3{
    border-radius: 2%;
    margin-left: 4%;
    width: 90%;
    height: 90%;
}

.ContainerThree{
    position: relative;
    top: 7%;
    left: 2%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 90%;
    height: 60%;
    padding: 0 5% 0 2%;
}

.ContainerThree img{
    width: 92%;
    height: 92%;
}

.SAP4{
    width: 50%;
    height: 70%;
    margin-left: 10%;
}

.Private-title {
    position: relative;
    margin-top: 3%;
    width: 62%;
    left: 36%;
    right: 33%;
    font-size: 34.5px;
    margin-bottom: 12%;
    font-family: "Book Antiqua", fantasy;
    color: #CB95F7;
    Text-decoration: underline;
    Text-decoration-color: #94faff;
    justify-content: center; 
}

.Let´sTalk{
    position: absolute;
    left: 22%;
    right: 14%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2A007F;
    font-size: 24px;
    font-family: "Book Antiqua", fantasy;
}

.Let´sTalk:hover{
    color: #94faff;
}

.Smiley{
    width: 6%;
    height: 6%;
    filter: drop-shadow(0 0 0.5rem #000000);
    opacity: 0.1;
}

.Smiley:hover{
    opacity: 1;
}

.AboutMe{
    position: absolute;
    top: 24%;
    width: 85%;
    left: 15%;
    bottom: 0.5%;
    right: 15%;
    font-size: 20px;
    font-family: "Book Antiqua", fantasy;
    color: #94faff;
    display: grid;
    grid-template-columns: 90% 95%;
}

.MyInfos{
    position: absolute;
    left: 8%;
}

.MeElias{
    position: absolute;
    top: 42%;
    left: 55%;
    right: 12%;
    width: 22%;
    height: 38%;
    border-radius: 20%;
    border: 3.5px solid slategrey;
}

.LikeDiary{
    font-family: "Book Antiqua", cursive;
    color: #C9005B;
}

.myPictures{
    position: absolute;
    top: 98%;
    left: 42%;
    font-size: 36px;
    font-family: "Book Antiqua", fantasy;
    color: #94faff;
}

.myPictures:hover{
    text-decoration: underline;
    text-decoration-color: #CB95F7;
}

.Slider-Container{
    position: absolute;
    top: 110%;
    left: 21%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25015A;
    border-radius: 6%;
}

.slider{
    width: 1100px;
    height: 700px;
    border-radius: 6%;
    overflow: hidden;
}

.slides{
    width: 500%;
    height: 700px;
    display: flex;
}

.slides input{
    display: none;
}

.slide{
    width: 20%;
    transition: 2s;
    align-items: center;
    justify-content: center;
    display: flex;
    filter: drop-shadow(0 0 0.5rem #8e3fff);
}

.slide img{
    width: 55%;
    height: 100%;
    object-fit: cover;
    border-radius: 20%;
}

.navigation-manual{
    position: absolute;
    width: 1100px;
    margin-top: -40px;
    display: flex;
    justify-content: center;
}

.manual-button{
    border: 2px solid #6610f2;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-button:not(:last-child){
    margin-right: 40px;
}

.manual-button:hover{
    background: #6610f2;
}

#radio1:checked ~ .first{
    margin-left: 0;
}

#radio2:checked ~ .first{
    margin-left: -20%;
}

#radio3:checked ~ .first{
    margin-left: -40%;
}

#radio4:checked ~ .first{
    margin-left: -60%;
}

#radio5:checked ~ .first{
    margin-left: -80%;
}

#radio6:checked ~ .first{
    margin-left: -100%;
}

.navigation-auto{
    position: absolute;
    display: flex;
    width: 1100px;
    justify-content: center;
    margin-top: 660px;
}

.navigation-auto div{
    border: 2px solid #2A007F;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}

.navigation-auto div:not(:last-child){
    margin-right: 40px;
}

#radio1:checked ~ .navigation-auto .auto-button1{
    background: #2A007F;
}

#radio2:checked ~ .navigation-auto .auto-button2{
    background: #2A007F;
}

#radio3:checked ~ .navigation-auto .auto-button3{
    background: #2A007F;
}

#radio4:checked ~ .navigation-auto .auto-button4{
    background: #2A007F;
}

#radio5:checked ~ .navigation-auto .auto-button5{
    background: #2A007F;
}

#radio6:checked ~ .navigation-auto .auto-button6{
    background: #2A007F;
}

.ResumeLebenslauf{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 190%;
    left: 18%;
    right: 16%;
    padding-bottom: 2%;
}

#Resume{
    margin: 0 2% 0 6%;
    padding: 0 2% 0 2%;
    width: 120%;
    border-radius: 10px;
    font-size: 24px;
    font-family: "Book Antiqua", fantasy;
    background-color: #CB95F7;
    filter: drop-shadow(0 0 0.3rem #6610f2);
}

#Resume:hover{
    background-color: #FE0241;
    filter: drop-shadow(0 0 0.4rem #CB95F7);
}

#Lebenslauf{
    margin: 0 2% 0 6%;
    padding: 0 2% 0 2%;
    width: 120%;
    border-radius: 10px;
    font-size: 24px;
    font-family: "Book Antiqua", fantasy;
    background-color: #CB95F7;
    filter: drop-shadow(0 0 0.3rem #6610f2);
}

#Lebenslauf:hover{
    background-color: #FE0241;
    filter: drop-shadow(0 0 0.4rem #CB95F7);
}

.Contact-area{
    position: absolute;
    top: 28%;
    left: 18.5%;
    width: 67%;
    height: 80%;
    background-color: black;
    opacity: 0.4;
    border-radius: 2%;
}

.Contact-form{
    position: absolute;
    top: 28%;
    left: 25%;
    bottom: 0.5%;
    right: 14.5%;
    font-size: 24px;
    font-family: "Book Antiqua", fantasy;
    color: #CB95F7;
}

#contact{
    position: relative;
    left: -6.5%;
    display: flex;
    align-content: center;
    justify-content: center;
    color: #6610f2;
    text-decoration: none;
}

#contact:hover{
    color: #c66eff;
    text-decoration: underline;
    text-decoration-color: #CB95F7;
}

form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

label{
    font-size: 28px;
    font-family: "Book Antiqua", fantasy;
    color: #CB95F7;
}

.together{
    margin-top: -2%;
    padding: 10px;
    width: 50%;
    border-radius: 10px;
    border: 3px solid #6610f2;
    font-size: 20px;
    background-color: #CB95F7;
    color: black;
    font-family: "Book Antiqua", fantasy;
}

#message{
    height: 150px;
}

.send{
    position: relative;
    left: 53%;
    bottom: 25px;
    font-size: 18px;
    font-family: arial, sans-serif;
    background-color: #CB95F7;
    border: 2px solid #6610f2;
    border-radius: 15%;
}

.Socials{
    position: relative;
    bottom: 110%;
    left: 70%;
    width: 20%;
    height: 30%;
}

.Linkedin{
    width: 70%;
    height: 80%;
    margin: -20% 0 10% 10%;
    border-radius: 50%;
}

.Github{
    width: 90%;
    height: 100%;
    border-radius: 50%;
}

.Instagram{
    margin-left: -70%;
    width: 230%;
    height: 190%;
    border-radius: 50%;
}

.OC-Link{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    top: 130%;
    width: 60%;
    height: 80%;
    left: 20%;
}

#Aubrey{
    width: 100%;
    height: 100%;
}

#finished{
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 60px) and (max-width: 540px){
    body{ width: 98%; }

    .hintergrund{
        position: absolute;
        top: 6.5%;
        height: 150%;
    }

    .wrapper{ width: 98%; }

    .bottom-wrapper{ width: 98%; }

    .Kopfzeile{
        position: fixed;
        width: 98%;
        height: 7.5%;
    }

    .Logo{
        position: fixed;
        top: -0.2%;
        left: 0.8%;
        width: 14%;
        height: 8%;
    }

    .Header{
        position: fixed;
        top: 2.8%;
        left: 15%;
        right: 15%;
    }

    .menu-link{
        padding: 0 2px 0 2px;
        font-size: 50%;
    }

    .menu-link:hover{
        text-decoration: underline;
        text-decoration-color: #CB95F7;
    }

    .Welcome{
        position: absolute;
        top: 9.5%;
        left: 28%;
        right: 22%;
    }

    .Selfie{
        width: 30%;
        height: 40%;
    }

    #Hi{ font-size: 20px; }

    .infos{
        position: absolute;
        top: 28%;
        left: 24%;
        right: 15%;
        font-size: 18px;
    }

    .comment{
        position: absolute;
        top: 90%;
        font-size: 12px;
    }

    h4{ font-size: 20px; }

    .projectspages{
        position: absolute;
        top: 100%;
        font-size: 19px;
    }

    .OnePage-container{
        position: absolute;
        top: 110%;
    }

    .TrainingPrivate{
        position: absolute;
        top: 145%;
        left: 12%;
        right: 12%;
    }

    #Training{
        margin: 0 0 0 1%;
        padding: 0 1% 0 1%;
        font-size: 10px;
    }

    #Private{
        margin: 0 8% 0 -1%;
        padding: 0 1% 0 1%;
        font-size: 10px;
    }

    .End{
        position: absolute;
        top: 150%;
        width: 98%;
        height: 20%;
    }

    .Pages{
        position: absolute;
        top: 163%;
        left: 10%;
        right: 6%;
        font-size: 10px;
    }

    .Link{ padding-right: 2%; }
    
    .SocialsEnd{
        position: absolute;
        top: 147%;
        right: 14%;
        left: 10%;
        width: 30%;
    }

    .LinkedinEnd{
        margin-left: 180%;
        width: 30%;
        height: 20%;
    }

    .GithubEnd{
        margin-left: 940%;
        width: 140%;
        height: 130%;
    }

    .InstagramEnd{
        width: 260%;
        height: 250%;
    }

    .Raven{
        top: 20%;
        left: 20%;
        right: 2%;
        bottom: 4%;
        width: 50%;
        height: 108%;
    }

    .Back{
        position: absolute;
        top: 80%;
        left: 80%;
        right: 2%;
        bottom: 2%;
        height: 6%;
        width: 10%;
        border-radius: 15%;
        font-size: 80%;
    }
    
    .Slime{
        top: 20%;
        left: 20%;
        right: 2%;
        bottom: 4%;
        width: 50%;
        height: 108%;
    }
    
    .Training-title{
        left: 25%;
        font-size: 20px;
        margin-bottom: 2%;
    }

    .Container0ne{
        display: grid;
        grid-template-columns: 1fr;
        width: 72%;
        margin-left: 21%;
        height: 40%;
        margin-bottom: 2%;
    }
    
    .Styx{
        width: 85%;
        height: 60%;
    }

    .SAP6{
        left: 18%;
        top: 46%;
        font-size: 110%;
    }

    .Runa{
        margin-top: -16%;
        width: 95%;
        height: 75%;
    }

    .SAP5{
        left: 28%;
        top: 26%;
        font-size: 110%;
    }

    .ContainerTwo{
        left: 21%;
        display: grid;
        grid-template-columns: 1fr;
        width: 72%;
        height: 40%;
    }

    #Storytelling{
        width: 70%;
        height: 80%;
        margin-bottom: 14%;
        margin-left: 6%;
    }

    .HeAirNa{
        left: 19%;
        font-size: 110%;
        color:  #94faff;
    }

    #SAP3{
        margin-left: 8%;
        width: 90%;
        height: 90%;
    }

    .Let´sTalk{
        top: 8%;
        left: 22%;
        right: 14%;
        font-size: 8px;
    }

    .Smiley{
        width: 8%;
        height: 8%;
    }

    .AboutMe{
        top: 18%;
        width: 62%;
        left: 15%;
        bottom: 0.5%;
        right: 15%;
        font-size: 10px;
        grid-template-columns: 70% 75%;
    }

    .MyInfos{ 
        left: 9%; }

    .MeElias{
        top: 56%;
        left: 100%;
        right: 12%;
        width: 26%;
        height: 10%;
        border: 1.5px solid slategrey;
    }

    .myPictures{
        top: 100%;
        left: 24%;
        font-size: 20px;
    }
    
    .Slider-Container{
        top: 110%;
        left: 20%;
        border-radius: 6%;
    }

    .slider{
        width: 250px;
        height: 150px;
        border-radius: 6%;
    }

    .slides{
        width: 550%;
        height: 150px;
    }

    .navigation-manual{
        width: 250px;
        margin-top: -32px;
    }

    .manual-button{
        border: 1px solid #6610f2;
        padding: 4px;
        border-radius: 5px;
    }

    .manual-button:not(:last-child){
        margin-right: 15px;
    }

    .navigation-auto{
        width: 250px;
        margin-top: 118px;
    }

    .navigation-auto div{
        border: 1px solid #2A007F;
        padding: 4px;
        border-radius: 5px;
    }

    .navigation-auto div:not(:last-child){
        margin-right: 15px;
    }

    .ResumeLebenslauf{
        top: 140%;
        left: 20%;
        right: 20%;
        padding-bottom: 2%;
    }

    #Resume{
        margin: 0 2% 0 4%;
        padding: 0 2% 0 2%;
        width: 120%;
        border-radius: 8px;
        font-size: 10px;
    }

    #Lebenslauf{
        margin: 0 2% 0 4%;
        padding: 0 2% 0 2%;
        width: 120%;
        border-radius: 8px;
        font-size: 10px;
    }
    
    .Contact-area{
        top: 15%;
        left: 18.5%;
        width: 67%;
        height: 70%;
    }

    .Contact-form{
        top: 15%;
        left: 25%;
        bottom: 0.5%;
        right: 14.5%;
        font-size: 14px;
    }

    #contact{
        left: -6.5%;
    }
    
    label{
        font-size: 12px;
    }

    .together{
        margin-top: -4%;
        padding: 5px;
        width: 45%;
        border-radius: 10px;
        font-size: 8px;
    }

    #message{
        height: 100px;
    }

    .send{
        left: 54%;
        bottom: 25px;
        font-size: 10px;
    }

    .Socials{
        bottom: 65%;
        left: 75%;
        width: 12%;
        height: 10%;
    }

    .Linkedin{
        width: 70%;
        height: 70%;
        margin: -20% 0 60% 10%;
    }

    .Github{
        width: 90%;
        height: 70%;
    }

    .Instagram{
        margin-left: -100%;
        width: 290%;
        height: 130%;
    }

    .OC-Link{
        top: 95%;
        width: 35%;
        height: 40%;
        left: 16%;
    }
    
    .Private-title {
        margin-top: -2%;
        width: 62%;
        left: 24%;
        right: 33%;
        font-size: 16px;
        margin-bottom: 14%;
    } 
}

@media screen and (min-width: 541px) and (max-width: 1112px){
    body{ width: 98%; }

    .hintergrund{
        position: absolute;
        top: 6.5%;
        height: 160%;
    }

    .wrapper{ width: 99%; }

    .bottom-wrapper{ width: 99%; }

    .Kopfzeile{
        position: fixed;
        width: 98%;
        height: 6.5%;
    }

    .Logo{
        position: fixed;
        top: -1.2%;
        left: 0.8%;
        width: 12%;
        height: 8.5%;
    }

    .Header{
        top: 2.8%;
        left: 14%;
        right: 14%;
    }

    .menu-link{
        padding: 0 2px 0 2px;
        font-size: 150%;
    }
    
    .Welcome{
        position: absolute;
        top: 8.5%;
        left: 28%;
        right: 23%;
    }

    .Selfie{
        width: 40%;
        height: 50%;
    }

    #Hi{ font-size: 32px; }

    .infos{
        position: absolute;
        top: 28%;
        left: 20%;
        right: 10%;
        font-size: 19px;
    }

    .comment{
        position: absolute;
        top: 89.5%;
        font-size: 17px;
    }
    
    h4{ font-size: 26px; }

    .projectspages{
        position: absolute;
        top: 80%;
        font-size: 34px;
    }
    
    .OnePage-container{
        position: absolute;
        top: 90%;
    }

    .TrainingPrivate{
        position: absolute;
        top: 148%;
        left: 14%;
        right: 14%;
    }

    #Training{
        margin: 0 2% 0 1%;
        padding: 0 2% 0 2%;
        font-size: 22px;
    }
    
    #Private{
        margin: 0 6% 0 2%;
        padding: 0 2% 0 2%;
        font-size: 22px;
    }

    .End{
        position: absolute;
        top: 165%;
        width: 98%;
        height: 20%;
    }

    .Pages{
        position: absolute;
        top: 178%;
        left: 12%;
        right: 12%;
        font-size: 18px;
    }

    .Link{ padding-right: 4%; }

    .SocialsEnd{
        position: absolute;
        top: 160%;
        right: 10%;
        left: 12%;
        width: 30%;
    }

    .LinkedinEnd{
        margin-left: 160%;
        width: 20%;
        height: 10%;
    }

    .GithubEnd{
        margin-left: 960%;
        width: 100%;
        height: 90%;
    }

    .InstagramEnd{
        width: 160%;
        height: 150%;
    }

    .Training-title{
        margin-top: 2%;
        left: 28%;
        font-size: 24.5px;
        margin-bottom: 2%;
    }

    .Container0ne{
        display: grid;
        grid-template-columns: 1fr;
        width: 62%;
        margin-left: 21%;
        height: 30%;
        margin-bottom: 0;
    }

    .Styx{
        width: 65%;
        height: 55%;
        margin-left: 12%;
    }

    .SAP6{
        left: 29%;
        top: 46%;
        font-size: 110%;
    }

    .Runa{
        margin-top: -25%;
        margin-left: 16%;
        width: 75%;
        height: 95%;
    }

    .SAP5{
        left: 35%;
        top: -68%;
        font-size: 110%;
    }

    .ContainerTwo{
        left: 21%;
        display: grid;
        grid-template-columns: 1fr;
        width: 62%;
        height: 30%;
        margin-bottom: 6%;
    }

    #Storytelling{
        width: 50%;
        height: 50%;
        margin-bottom: 14%;
        margin-left: 14%;
    }

    .HeAirNa{
        left: 30%;
        font-size: 110%;
        color:  #94faff;
    }

    #SAP3{
        margin-left: 2%;
        width: 80%;
        height: 80%;
    }

    .Let´sTalk{
        top: 8%;
        left: 22%;
        right: 14%;
        font-size: 16px;
    }

    .Smiley{
        width: 12%;
        height: 12%;
    }

    .AboutMe{
        top: 18%;
        width: 72%;
        left: 15%;
        bottom: 0.5%;
        right: 15%;
        font-size: 15px;
        grid-template-columns: 70% 75%;
    }

    .MyInfos{
        left: 8%; }

    .MeElias{
        top: 70%;
        left: 80%;
        right: 12%;
        width: 32%;
        height: 18%;
        border: 1.5px solid slategrey;
    }

    .myPictures{
        top: 86%;
        left: 34%;
        font-size: 28px;
    }
    .Slider-Container{
        top: 98%;
        left: 25%;
        border-radius: 6%;
    }

    .slider{
        width: 450px;
        height: 350px;
        border-radius: 6%;
    }

    .slides{
        width: 550%;
        height: 350px;
    }

    .navigation-manual{
        width: 450px;
        margin-top: -32px;
    }

    .manual-button{
        border: 2px solid #6610f2;
        padding: 5px;
        border-radius: 10px;
    }

    .manual-button:not(:last-child){
        margin-right: 30px;
    }

    .navigation-auto{
        width: 450px;
        margin-top: 318px;
    }

    .navigation-auto div{
        border: 2px solid #2A007F;
        padding: 5px;
        border-radius: 10px;
    }

    .navigation-auto div:not(:last-child){
        margin-right: 30px;
    }

    .ResumeLebenslauf{
        top: 142%;
        left: 22%;
        right: 22%;
        padding-bottom: 2%;
    }

    #Resume{
        margin: 0 2% 0 6%;
        padding: 0 2% 0 2%;
        width: 120%;
        border-radius: 8px;
        font-size: 16px;
    }

    #Lebenslauf{
        margin: 0 2% 0 6%;
        padding: 0 2% 0 2%;
        width: 120%;
        border-radius: 8px;
        font-size: 16px;
    }

    .Contact-area{
        top: 15%;
        left: 18.5%;
        width: 67%;
        height: 70%;
    }

    .Contact-form{
        top: 15%;
        left: 25%;
        bottom: 0.5%;
        right: 14.5%;
        font-size: 20px;
    }

    #contact{
        left: -6.5%;
    }

    label{
        font-size: 20px;
    }

    .together{
        margin-top: -2%;
        padding: 5px;
        width: 45%;
        border-radius: 10px;
        font-size: 16px;
    }

    #message{
        height: 130px;
    }

    .send{
        left: 50%;
        bottom: 25px;
        font-size: 16px;
    }

    .Socials{
        bottom: 65%;
        left: 75%;
        width: 12%;
        height: 20%;
    }

    .Linkedin{
        width: 70%;
        height: 70%;
        margin: -40% 0 90% 10%;
    }

    .Github{
        width: 90%;
        height: 70%;
    }

    .Instagram{
        margin-left: -100%;
        width: 290%;
        height: 130%;
    }

    .OC-Link{
        top: 100%;
        width: 40%;
        height: 50%;
        left: 15%;
    }

    .Private-title {
        margin-top: 1%;
        width: 62%;
        left: 30%;
        right: 33%;
        font-size: 24px;
        margin-bottom: 10%;
    }
}

@media screen and (min-width: 1113px) and (max-width: 1720px) {
    body{ width: 99%; }

    .hintergrund{
        position: absolute;
        top: 6.5%;
        height: 198%;
    }

    .wrapper{ width: 99%; }

    .bottom-wrapper{ width: 99%; }

    .Kopfzeile{
        position: fixed;
        width: 99%;
        height: 6.5%;
    }

    .Logo{
        position: fixed;
        top: -1.2%;
        left: 0.5%;
        width: 12%;
        height: 9%;
    }

    .Header{
        top: 2.8%;
        left: 26%;
        right: 26%;
    }

    .menu-link{
        padding: 0 6px 0 6px;
        font-size: 180%;
    }
    
    .Welcome{
        position: absolute;
        top: 7.5%;
        left: 30%;
        right: 25%;
    }

    .Selfie{
        width: 35%;
        height: 45%;
        border-radius: 50%;
    }

    #Hi{ font-size: 40px; }

    .infos{
        position: absolute;
        top: 32%;
        left: 28%;
        right: 10%;
        font-size: 20px;
    }

    .comment{
        position: absolute;
        top: 81.5%;
        font-size: 17px;
    }
    
    h4{ font-size: 28px; }

    .projectspages{
        position: absolute;
        top: 80%;
        font-size: 34px;
    }
    
    .OnePage-container{
        position: absolute;
        top: 90%;
    }

    .TrainingPrivate{
        position: absolute;
        top: 185%;
        left: 14%;
        right: 14%;
    }

    #Training{
        margin: 0 2% 0 6%;
        padding: 0 2% 0 2%;
        font-size: 24px;
    }
    
    #Private{
        margin: 0 6% 0 2%;
        padding: 0 2% 0 2%;
        font-size: 24px;
    }

    .End{
        position: absolute;
        top: 202%;
        width: 99%;
        height: 20%;
    }

    .Pages{
        position: absolute;
        top: 216%;
        left: 12%;
        right: 12%;
        font-size: 20px;
    }

    .Link{ padding-right: 26px; }

    .SocialsEnd{
        position: absolute;
        top: 200%;
        right: 10%;
        left: 12%;
        width: 30%;
        height: 20%;
    }

    .LinkedinEnd{
        margin-left: 160%;
        width: 20%;
        height: 10%;
    }

    .GithubEnd{
        margin-left: 960%;
        width: 100%;
        height: 90%;
    }

    .InstagramEnd{
        width: 160%;
        height: 150%;
    }

    .Training-title{
        left: 30%;
        font-size: 32.5px;
        margin-bottom: 12%;
    }

    .Styx{
        width: 95%;
        height: 80%;
        margin-left: 6%;
    }

    .SAP6{
        left: 14%;
        font-size: 110%;
    }

    .Runa{
        margin-left: 8%;
        width: 95%;
        height: 85%;
    }

    .SAP5{
        left: 40%;
        font-size: 110%;
    }

    .ContainerTwo{
        display: flex;
        width: 72%;
        height: 40%;
    }

    #Storytelling{
        width: 90%;
        height: 100%;
        margin-left: 5%;
    }

    .HeAirNa{
        left: 12%;
        font-size: 110%;
        color:  Black;
    }

    #SAP3{
        width: 90%;
        height: 90%;
        margin-left: 10%;
    }

    .Let´sTalk{
        top: 8%;
        left: 22%;
        right: 14%;
        font-size: 26px;
    }

    .Smiley{
        width: 10%;
        height: 10%;
    }

    .AboutMe{
        top: 24%;
        width: 78%;
        left: 15%;
        bottom: 0.5%;
        right: 15%;
        font-size: 24px;
        grid-template-columns: 70% 75%;
    }

    .MyInfos{
        left: 9%; }

    .MeElias{
        top: 68%;
        left: 75%;
        right: 12%;
        width: 24%;
        height: 30%;
        border: 3.5px solid slategrey;
    }

    .myPictures{
        top: 115%;
        left: 40%;
        font-size: 34px;
    }
    
    .Slider-Container{
        top: 125%;
        left: 22%;
        border-radius: 6%;
    }

    .slider{
        width: 900px;
        height: 600px;
        border-radius: 6%;
    }

    .slides{
        width: 560%;
        height: 600px;
    }

    .navigation-manual{
        width: 850px;
        margin-top: -32px;
    }

    .manual-button{
        border: 2px solid #6610f2;
        padding: 8px;
        border-radius: 10px;
    }

    .manual-button:not(:last-child){
        margin-right: 50px;
    }

    .navigation-auto{
        width: 850px;
        margin-top: 568px;
    }

    .navigation-auto div{
        border: 2px solid #2A007F;
        padding: 8px;
        border-radius: 10px;
    }

    .navigation-auto div:not(:last-child){
        margin-right: 50px;
    }

    .ResumeLebenslauf{
        top: 196%;
        left: 22%;
        right: 22%;
        padding-bottom: 2%;
    }

    #Resume{
        margin: 0 2% 0 6%;
        padding: 0 2% 0 2%;
        width: 120%;
        border-radius: 10px;
        font-size: 22px;
    }

    #Lebenslauf{
        margin: 0 2% 0 6%;
        padding: 0 2% 0 2%;
        width: 120%;
        border-radius: 10px;
        font-size: 22px;
    }

    .Contact-area{
        top: 20%;
        left: 18.5%;
        width: 67%;
        height: 80%;
    }

    .Contact-form{
        top: 20%;
        left: 25%;
        bottom: 0.5%;
        right: 14.5%;
        font-size: 22px;
    }

    #contact{
        left: -6.5%;
    }

    label{
        font-size: 22px;
    }

    .together{
        margin-top: -2%;
        padding: 10px;
        width: 45%;
        border-radius: 10px;
        font-size: 18px;
    }

    #message{
        height: 140px;
    }

    .send{
        left: 50%;
        bottom: 25px;
        font-size: 18px;
    }

    .Socials{
        bottom: 80%;
        left: 75%;
        width: 18%;
        height: 25%;
    }

    .Linkedin{
        width: 70%;
        height: 60%;
        margin: -10% 0 50% 10%;
    }

    .Github{
        width: 90%;
        height: 70%;
    }

    .Instagram{
        margin-left: -100%;
        width: 290%;
        height: 130%;
    }

    .OC-Link{
        top: 120%;
        width: 50%;
        height: 60%;
        left: 23%;
    }

    .Private-title {
        margin-top: 2%;
        width: 62%;
        left: 36%;
        right: 33%;
        font-size: 32px;
        margin-bottom: 10%;
    }
}

@media screen and (min-width: 2371px) and (max-width: 3070px) {
    body{ width: 99%; }

    .hintergrund{
        position: absolute;
        top: 6%;
        height: 245%;
    }
    
    .wrapper{ width: 99%; }

    .bottom-wrapper{ width: 99%; }

    .Kopfzeile{
        position: fixed;
        width: 99%;
        height: 8.5%;
    }

    .Logo{
        position: fixed;
        top: -0.2%;
        left: 0.5%;
        width: 12%;
        height: 9%;
    }

    .Header{
        position: fixed;
        top: 2.5%;
        left: 22%;
        right: 22%;
    }

    .menu-link{
        padding: 0 16px 0 16px;
        font-size: 225%;
    }
    
    .Welcome{
        position: absolute;
        top: 15.5%;
        left: 28%;
        right: 25%;
    }

    .Selfie{
        width: 30%;
        height: 40%;
    }

    #Hi{ font-size: 54px; }

    .infos{
        position: absolute;
        top: 54%;
        left: 28%;
        right: 16%;
        font-size: 38px;
    }

    .comment{
        position: absolute;
        top: 89.5%;
        font-size: 28px;
    }
    
    h4{ font-size: 41px; }

    .projectspages{
        position: absolute;
        top: 135%;
        font-size: 44px;
    }
    
    .OnePage-container{
        position: absolute;
        top: 145%;
    }
    
    .TrainingPrivate{
        display: flex;
        top: 300%;
        left: 14%;
        right: 14%;
    }

    #Training{
        margin: 0 2% 0 6%;
        padding: 0 2% 0 2%;
        font-size: 24px;
    }
    
    #Private{
        margin: 0 6% 0 2%;
        padding: 0 2% 0 2%;
        font-size: 24px;
    }

    .Pages{
        position: absolute;
        top: 245%;
        left: 12%;
        right: 12%;
        font-size: 30px;
    }

    .Link{ padding: 26px; }
    
    .SocialsEnd{
        position: absolute;
        top: 228%;
        right: 10%;
        left: 20%;
        width: 26%;
    }

    .LinkedinEnd{
        margin-left: 160%;
        width: 20%;
        height: 10%;
    }

    .GithubEnd{
        margin-left: 960%;
        width: 100%;
        height: 90%;
    }

    .InstagramEnd{
        width: 160%;
        height: 150%;
    }

    .Training-title{
        left: 30%;
        font-size: 24.5px;
        margin-bottom: 16%;
    }

    .Training-title{
        left: 34%;
        font-size: 39.5px;
        margin-bottom: 14%;
    }

    .Container0ne{
        display: flex;
        width: 120%;
        height: 120%;
        margin-left: -12%;
        margin-bottom: 10%;
    }

    .Styx{
        width: 95%;
        height: 100%;
    }

    .SAP6{
        left: 12%;
        font-size: 160%;
    }

    .Runa{
        width: 95%;
        height: 85%;
    }

    .SAP5{
        left: 32%;
        font-size: 160%;
    }

    .ContainerTwo{
        display: flex;
        width: 120%;
        height: 120%;
        margin-left: -12%;
        margin-bottom: 14%;
    }

    #Storytelling{
        width: 90%;
        height: 100%;
        margin-bottom: 14%;
        margin-left: 0;
    }

    .HeAirNa{
        left: 14%;
        margin-top: -2%;
        font-size: 160%;
        color:  black;
    }

    #SAP3{
        margin-top: -12%;
        margin-left: 2%;
        width: 80%;
        height: 90%;
    }

    .Let´sTalk{
        top: 16%;
        left: 22%;
        right: 14%;
        font-size: 28px;
    }

    .Smiley{
        width: 8%;
        height: 8%;
    }

    .AboutMe{
        top: 32%;
        width: 62%;
        left: 20%;
        bottom: 0.5%;
        right: 20%;
        font-size: 24px;
        grid-template-columns: 80% 85%;
    }

    .MyInfos{
        left: 12%; }

    .MeElias{
        top: 58%;
        left: 70%;
        right: 12%;
        width: 24%;
        height: 42%;
        border: 3.5px solid slategrey;
    }

    .myPictures{
        top: 118%;
        left: 43%;
        font-size: 32px;
    }
    
    .Slider-Container{
        top: 135%;
        left: 30%;
        border-radius: 6%;
    }

    .slider{
        width: 1050px;
        height: 600px;
        border-radius: 6%;
    }

    .slides{
        width: 550%;
        height: 600px;
    }

    .navigation-manual{
        width: 950px;
        margin-top: -32px;
    }

    .manual-button{
        border: 2px solid #6610f2;
        padding: 8px;
        border-radius: 10px;
    }

    .manual-button:not(:last-child){
        margin-right: 50px;
    }

    .navigation-auto{
        width: 950px;
        margin-top: 568px;
    }

    .navigation-auto div{
        border: 2px solid #2A007F;
        padding: 8px;
        border-radius: 10px;
    }

    .navigation-auto div:not(:last-child){
        margin-right: 50px;
    }

    .ResumeLebenslauf{
        top: 206%;
        left: 22%;
        right: 22%;
        padding-bottom: 2%;
    }

    #Resume{
        margin: 0 2% 0 6%;
        padding: 0 2% 0 2%;
        width: 120%;
        border-radius: 8px;
        font-size: 28px;
    }

    #Lebenslauf{
        margin: 0 2% 0 6%;
        padding: 0 2% 0 2%;
        width: 120%;
        border-radius: 8px;
        font-size: 28px;
    }

    .Contact-area{
        top: 20%;
        left: 18.5%;
        width: 67%;
        height: 85%;
    }

    .Contact-form{
        top: 20%;
        left: 30%;
        bottom: 0.5%;
        right: 14.5%;
        font-size: 24px;
    }

    #contact{
        left: -6.5%;
    }

    label{
        font-size: 22px;
    }

    .together{
        margin-top: -1%;
        padding: 10px;
        width: 35%;
        border-radius: 10px;
        font-size: 20px;
    }

    #message{
        height: 140px;
    }

    .send{
        left: 40%;
        bottom: 25px;
        font-size: 18px;
    }

    .Socials{
        bottom: 90%;
        left: 60%;
        width: 15%;
        height: 30%;
    }

    .Linkedin{
        width: 70%;
        height: 60%;
        margin: -5% 0 15% 10%;
    }

    .Github{
        width: 90%;
        height: 70%;
    }

    .Instagram{
        margin-left: -100%;
        width: 290%;
        height: 130%;
    }

    .OC-Link{
        top: 130%;
        width: 45%;
        height: 75%;
        left: 30%;
    }

    .Private-title {
        margin-top: 3%;
        width: 62%;
        left: 36%;
        right: 33%;
        font-size: 36px;
        margin-bottom: 10%;
    }
}

@media screen and (min-width: 3071px) and (max-width: 3840px){
    body{ width: 99%; }

    .hintergrund{
        position: absolute;
        top: 6%;
        height: 360%;
    }

    .wrapper{ width: 99%; }

    .bottom-wrapper{ width: 99%; }

    .Kopfzeile{
        position: fixed;
        width: 99%;
        height: 8.5%;
    }

    .Logo{
        position: fixed;
        top: -0.2%;
        left: 0.5%;
        width: 12%;
        height: 9%;
    }

    .Header{
        position: fixed;
        top: 2.5%;
        left: 22%;
        right: 22%;
    }

    .menu-link{
        padding: 0 16px 0 16px;
        font-size: 225%;
    }
    
    .Welcome{
        position: absolute;
        top: 15.5%;
        left: 28%;
        right: 25%;
    }

    .Selfie{
        width: 30%;
        height: 40%;
    }

    #Hi{ font-size: 54px; }

    .infos{
        position: absolute;
        top: 54%;
        left: 28%;
        right: 16%;
        font-size: 38px;
    }

    .comment{
        position: absolute;
        top: 89.5%;
        font-size: 28px;
    }
    
    h4{ font-size: 41px; }

    .projectspages{
        position: absolute;
        top: 135%;
        font-size: 44px;
    }

    .OnePage-container{
        position: absolute;
        top: 145%;
    }
    
    .TrainingPrivate{
        position: absolute;
        top: 330%;
        left: 14%;
        right: 14%;
    }

    #Training{
        margin: 0 2% 0 6%;
        padding: 0 2% 0 2%;
        font-size: 30px;
    }

    #Private{
        margin: 0 6% 0 2%;
        padding: 0 2% 0 2%;
        font-size: 30px;
    }

    .End{
        position: absolute;
        top: 365%;
        width: 99%;
        height: 38%;
    }

    .Pages{
        position: absolute;
        top: 385%;
        left: 12%;
        right: 12%;
        font-size: 30px;
    }

    .Link{ padding: 26px; }
    
    .SocialsEnd{
        position: absolute;
        top: 368%;
        right: 10%;
        left: 12%;
        width: 30%;
    }

    .LinkedinEnd{
        margin-left: 160%;
        width: 20%;
        height: 10%;
    }

    .GithubEnd{
        margin-left: 960%;
        width: 100%;
        height: 90%;
    }

    .InstagramEnd{
        width: 160%;
        height: 150%;
    }

    .Training-title{
        margin-top: 2%;
        left: 34%;
        font-size: 48.5px;
        margin-bottom: 6%;
    }

    .Container0ne{
        display: flex;
        width: 120%;
        margin-left: -14%;
        height: 120%;
        margin-bottom: 6%;
    }

    .Styx{
        width: 100%;
        height: 100%;
    }

    .SAP6{
        left: 18%;
        font-size: 160%;
    }

    .Runa{
        margin-left: -16%;
        width: 100%;
        height: 100%;
    }

    .SAP5{
        left: 16%;
        font-size: 160%;
    }

    .ContainerTwo{
        left: -12%;
        display: flex;
        width: 100%;
        height: 100%;
        margin-bottom: 6%;
    }

    #Storytelling{
        width: 100%;
        height: 100%;
        margin-left: 6%;
    }

    .HeAirNa{
        left: 14%;
        font-size: 160%;
        color:  black;
    }

    #SAP3{
        margin-left: 22%;
        width: 90%;
        height: 90%;
    }

    .Let´sTalk{
        top: 16%;
        left: 20%;
        right: 14%;
        font-size: 28px;
    }

    .Smiley{
        width: 8%;
        height: 8%;
    }

    .AboutMe{
        top: 38%;
        width: 62%;
        left: 20%;
        bottom: 0.5%;
        right: 20%;
        font-size: 24px;
        grid-template-columns: 80% 85%;
    }

    .MyInfos{
        left: 12%; }

    .MeElias{
        top: 64%;
        left: 55%;
        right: 12%;
        width: 20%;
        height: 44%;
        border: 3.5px solid slategrey;
    }

    .myPictures{
        top: 136%;
        left: 46%;
        font-size: 36px;
    }
    .Slider-Container{
        top: 165%;
        left: 30%;
        border-radius: 6%;
    }

    .slider{
        width: 1450px;
        height: 900px;
        border-radius: 6%;
    }

    .slides{
        width: 550%;
        height: 900px;
    }

    .navigation-manual{
        width: 1350px;
        margin-top: -32px;
    }

    .manual-button{
        border: 3px solid #6610f2;
        padding: 8px;
        border-radius: 10px;
    }

    .manual-button:not(:last-child){
        margin-right: 60px;
    }

    .navigation-auto{
        width: 1350px;
        margin-top: 868px;
    }

    .navigation-auto div{
        border: 3px solid #2A007F;
        padding: 8px;
        border-radius: 10px;
    }

    .navigation-auto div:not(:last-child){
        margin-right: 60px;
    }

    .ResumeLebenslauf{
        top: 286%;
        left: 22%;
        right: 22%;
        padding-bottom: 2%;
    }

    #Resume{
        margin: 0 2% 0 6%;
        padding: 0 2% 0 2%;
        width: 120%;
        border-radius: 10px;
        font-size: 28px;
    }

    #Lebenslauf{
        margin: 0 2% 0 6%;
        padding: 0 2% 0 2%;
        width: 120%;
        border-radius: 10px;
        font-size: 28px;
    }

    .Contact-area{
        top: 20%;
        left: 18.5%;
        width: 67%;
        height: 90%;
    }

    .Contact-form{
        top: 20%;
        left: 30%;
        bottom: 0.5%;
        right: 14.5%;
        font-size: 24px;
    }

    #contact{
        left: -6.5%;
    }

    label{
        font-size: 22px;
    }

    .together{
        margin-top: -1%;
        padding: 10px;
        width: 35%;
        border-radius: 10px;
        font-size: 20px;
    }

    #message{
        height: 140px;
    }

    .send{
        left: 40%;
        bottom: 25px;
        font-size: 18px;
    }

    .Socials{
        bottom: 90%;
        left: 60%;
        width: 15%;
        height: 35%;
    }

    .Linkedin{
        width: 70%;
        height: 60%;
        margin: 0 0 20% 10%;
    }

    .Github{
        width: 90%;
        height: 70%;
    }

    .Instagram{
        margin-left: -100%;
        width: 290%;
        height: 130%;
    }

    .OC-Link{
        top: 150%;
        width: 65%;
        height: 155%;
        left: 20%;
    }

    .Private-title {
        margin-top: 3%;
        width: 62%;
        left: 36%;
        right: 33%;
        font-size: 36px;
        margin-bottom: 10%;
    }
}