.navbar{display:flex;justify-content:space-between;align-items:center;padding:20px}.logo-container{display:flex;align-items:center;text-decoration:none;color:var(--orange-color)}.logo-container h2{margin-left:10px;font-size:24px;font-weight:100}.logo{margin-left:20px;width:200px;height:auto}nav ul{list-style:none;display:flex;gap:30px}nav ul li button{text-decoration:none;color:var(--text-color);border:none;background:none;font-size:18px;cursor:pointer}nav ul li button:active,.select{color:var(--orange-color)}nav ul li button:hover{width:max-content;color:var(--orange-color);transition:color .3s ease}.hero-content{display:flex;align-items:center;justify-content:flex-start;width:100%;height:80%}.hero-content img{border-radius:20px;object-fit:cover}.hero-text{padding-left:50px;width:50%;display:flex;flex-direction:column;justify-content:left;align-items:flex-start}.hero-text h1{color:var(--text-color);font-size:35px;margin-bottom:20px}.hero-text h2{color:var(--orange-color);font-size:30px;margin-bottom:20px}.hero-text p{color:var(--text-color);font-size:20px;margin-bottom:30px}.hero-buttons{width:100%;display:flex;justify-content:space-evenly}.hero-button{position:relative;padding:10px 20px;background:transparent;color:var(--text-color);border:3px solid var(--text-color);border-radius:10px;cursor:pointer;gap:50px;z-index:1}.hero-button-hover-effect{z-index:0;position:absolute;left:0;top:0;height:100%;border-radius:10px;width:0%;background:var(--orange-color-transparent);transition:width .3s ease}.hero-button:hover .hero-button-hover-effect{width:100%}.hero-button:active{color:var(--orange-color)}.hero-image{height:70vh;margin-right:50px;margin-left:100px}.skills-container{width:100%;display:flex;align-items:center;flex-wrap:wrap;flex-direction:row;margin-top:30px}.skill{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:200px;gap:10px;margin:1rem}.skill-bar{width:100%;height:20px;background-color:#f5f5f54d;border-radius:10px;overflow:hidden}.skill-percentage{height:100%;background:linear-gradient(270deg,#ffa24b,#ec5a3a);box-shadow:2px 2px 2px 2px #ffffff94 inset;border-radius:10px}.impressum_container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-left:50px;padding:20px}h1,h2,p{margin-bottom:20px}.footer_bar{width:100%;position:fixed;bottom:0;display:flex;height:40px;flex-direction:row;justify-content:space-around;color:var(--text-color);background-color:var(--background-color);z-index:5}.footer_bar div{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:20px}.footer_bar div a{margin-bottom:5px}.footer_bar div a img{width:40px;height:40px;border:2px solid #000;padding:5px;margin-left:10px;margin-bottom:5px;border-radius:50%;color:var(--text-color);filter:invert(100%) sepia(4%) saturate(1335%) hue-rotate(210deg) brightness(113%) contrast(92%)}.footer_bar div a img:hover{transition:filter .3s ease;transform:scale(1);filter:invert(50%) sepia(50%) saturate(4214%) hue-rotate(338deg) brightness(96%) contrast(93%)}.footer_bar p{margin-top:10px;font-size:18px}button{text-decoration:none;color:var(--text-color);border:none;background:none;font-size:18px;cursor:pointer}button:active,.select{color:var(--orange-color)}button:hover{width:max-content;color:var(--orange-color);transition:color .3s ease}:root{--background-color: #000;--text-color: #f5f5f5;--background-color-lightmode: #f5f5f5;--text-color-lightmode: #000;--orange-color: #EC593A;--orange-color-transparent: #ec583a71}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body{background-color:var(--background-color);color:var(--text-color)}