html{scroll-behavior:smooth}body{margin:0;font-family:sans-serif}nav{width:100%;height:50px;background:rgba(0,0,0,.8);border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);position:sticky;top:0}nav ul{display:flex;margin:0;padding:0 100px;float:right}nav ul li{list-style:none}nav ul li a{display:block;color:#fff;padding:0 20px;text-decoration:none;text-transform:uppercase;font-weight:700;line-height:50px}nav ul li a:hover,nav ul li a.active{background:beige;color:#000}.hamburger{display:none}.bar{display:block;width:25px;height:3px;margin:5px auto;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;background-color:#fff}footer{width:100%;height:50px;background:rgba(0,0,0,.8);border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);line-height:50px;font-style:italic;color:#fff;text-align:center}.sectionContainer{height:calc(100vh - 50px);width:100%;background-color:beige;border-color:red;border-width:5px;padding-top:50px}.personal{background-color:#f5f5f5;text-decoration:none;display:flex;align-items:center;justify-content:center}.personal-title{text-align:center;color:#555}.personal-container{width:100%;padding:0 clamp(10px,10vw,100px) 0 clamp(10px,10vw,100px)}.summary{grid-template-columns:auto clamp(250px,20%,400px);display:grid;font-size:1.5rem;text-align:center;color:#555}.experience h2:before{background-color:#ff0;border:50px solid yellow;width:0;height:0}.experience h2{color:#555;width:6rem;height:6rem;text-align:center;font-size:6rem;margin:auto;vertical-align:bottom}.experience p{color:#555;margin:auto}.general-data{display:flex;justify-content:space-evenly;flex-wrap:wrap}.general-data div{column-gap:50px;width:clamp(180px,20%,400px);margin:0 1em}.general-data h3{color:#555;margin-bottom:0;font-size:.9rem}.general-data p{margin-top:0;font-weight:700}.contact{background-color:#ff0;height:calc(100vh - 100px);text-decoration:none;display:flex;align-items:center;justify-content:center}.contact div{padding:0 clamp(10px,10vw,100px) 0 clamp(10px,10vw,100px)}.contact div p{font-size:1.5rem;text-align:center}.social-icons{fill:#000;display:flex;gap:30px;justify-content:center;font-size:3rem}.social-icons span{font-size:3rem}.social-icons ion-icon{color:#000}@media only screen and (max-width: 768px){html{font-size:75%}.summary{grid-template-columns:auto}}