@import"https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap";*{margin:0;padding:0;border:0;box-sizing:border-box}body{font-family:Arial,sans-serif;color:#fff;background:linear-gradient(90deg,rgb(63,91,155) 0%,rgba(2,0,36,1) 30%);text-shadow:0px 0px 3px rgb(0,0,0)}#root{max-width:1280px;margin:0 auto}header{background:#589efc36;padding:20px}nav{display:flex;justify-content:space-between;align-items:center}nav ul{list-style:none;padding:0;margin:0}nav ul li{display:inline}nav ul li a{color:#fff;text-decoration:none;margin-right:20px;font-size:larger;font-family:Arial,sans-serif;letter-spacing:1px;transition:.5s ease}nav ul li a:hover{color:#589efc}nav img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 2px #000;object-fit:cover}.App-logo{height:40vmin;pointer-events:none;width:40px;height:40px;filter:hue-rotate(20deg)}@media (prefers-reduced-motion: no-preference){.App-logo{animation:App-logo-spin infinite 15s linear}}#about{height:100vh;background:rgba(28,19,61,.116);border-top:1px solid white;border-bottom:1px solid white;position:relative;display:flex;justify-content:space-between;align-items:center;padding:5% 10% 10%;animation:slideRight 2s ease forwards}#about:before{content:"";background-image:url(/portfolio-react/assets/Bild3-05deaec3.png);background-repeat:no-repeat;background-size:60% auto;background-position:calc(100% + 150px) bottom;position:absolute;top:0;left:0;bottom:0;right:0;opacity:.65;z-index:-1}.about-content{max-width:600px}.about-content h3{font-size:32px;font-weight:700}.about-content h3:nth-of-type(2){margin-bottom:30px}.about-content h3 span{color:#589efc}.about-content h1{font-size:56px;font-weight:700;margin:5px 0}.about-content p{margin-bottom:30px;font-size:.9rem;letter-spacing:1px}.social-media a{display:inline-flex;justify-content:center;align-items:center;width:40px;height:40px;background:transparent;border:2px solid #589efc;border-radius:50%;font-size:20px;color:#589efc;text-decoration:none;margin:0 15px 30px 0;transition:.5s ease}.social-media a:hover{text-shadow:none;background:#589efc;color:#000;box-shadow:0 0 20px #589efc}.btn{display:inline-block;padding:12px 28px;background-color:#589efc;border-radius:20px;box-shadow:0 0 10px #589efc;color:#fff;letter-spacing:1px;text-decoration:none;font-weight:600;transition:.5s ease}.btn:hover{text-shadow:none;color:#000}.home-image{max-width:570px;display:none;opacity:.8}.home-image img{width:100%}.section-header{color:#fff;font-size:30px;border-bottom:2px solid white;padding:10px 0;text-align:center;font-family:Manrope,Arial,"sans-serif"}#studies{background:rgba(28,19,61,.116);border-top:1px solid white;border-bottom:1px solid white;height:100vh;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:0 50px}.cards{display:flex;justify-content:center;gap:30px;max-width:100%;margin-top:10px;margin-bottom:10px}.card{background-color:#1c1b29;border-radius:20px;box-shadow:0 0 30px #0000002e;max-width:400px}.container{position:relative;clip-path:polygon(0 0,100% 0,100% 85%,0 100%)}.card-img{width:100%;display:block;border-radius:20px 20px 0 0}.container:after{content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:20px 20px 0 0;opacity:.6}.card1>.container:after{background-image:linear-gradient(135deg,#0100EC,#FB36F4)}.card2>.container:after{background-image:linear-gradient(135deg,#2BDCE3,#42FFDB)}.details{padding:20px}.details>h3{font-family:Open Sans,Arial,"sans-serif";font-size:18px;margin:10px 0 15px}.details>p{color:#a0a0a0;font-size:15px;line-height:20px}.header-span{color:#589efc}#projects{min-height:100vh;max-height:fit-content;background:rgba(28,19,61,.116);border-top:1px solid white;border-bottom:1px solid white;display:flex;align-items:center;justify-content:space-evenly;flex-direction:column}#projectcards-container{display:flex;flex-wrap:wrap;justify-content:center;max-width:80%}#projectcards-container>div{background-color:#1c1b29;margin:10px}#projects h5{font-size:100%;font-family:Manrope,Arial,"sans-serif";text-align:center;color:#fff}#skills{min-height:100vh;background:rgba(28,19,61,.116);border-top:1px solid white;border-bottom:1px solid white;display:flex;align-items:center;justify-content:space-evenly;flex-direction:column;width:100%;padding:30px 10%}#skills .row{width:100%;display:flex;justify-content:space-between;margin-top:70px}.row .col{flex-basis:46%}.row .sub-title h2{position:relative;color:#589efc;font-size:22px;font-family:Helvetica,sans-serif;display:inline-block;margin-bottom:30px}.row .sub-title h2:before{content:"";position:absolute;width:50%;height:1px;top:125%;left:0;background-color:gray}.row .sub-title h2:after{content:"";position:absolute;width:25%;height:3px;top:calc(125% - 1px);left:0;background-color:#fff}.subject{font-size:18px;color:#fff;padding-bottom:15px;text-transform:uppercase}.progress-bar{position:relative;width:100%;height:5px;background-color:gray;border-radius:15px;margin-bottom:20px}.progress-bar:after{position:absolute;content:attr(value);top:-35px;right:0;color:#fff;font-size:18px}.progress-line{position:absolute;width:100%;height:7px;background-color:#589efc;border-radius:15px;top:-1px}.progress-line:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;top:50%;left:100%;transform:translate(-50%,-50%);background-color:#589efc}footer{background:#589efc36;padding:20px;text-align:center;font-family:math,Arial,"sans-serif"}@keyframes slideRight{0%{transform:translate(-100px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media screen and (max-width: 950px){#about{height:fit-content;display:flex;flex-direction:column-reverse}.home-image{max-width:400px;margin-right:unset;margin-bottom:10px;display:block}.about-content{display:flex;flex-direction:column;align-items:center;text-align:center}#studies{height:fit-content}.section-header{margin-top:10px;margin-bottom:10px}#about:before{background-image:none}}@media screen and (max-width: 500px){nav ul li a{margin-right:15px;font-size:smaller;font-weight:600}.about-content h1{font-size:10vw}#studies p{font-size:.75rem}.cards{flex-direction:column}#skills{max-height:fit-content;padding:30px 8%}#skills .row{flex-direction:column}#skills .row .col:first-of-type{margin-bottom:30px}}