@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@600&display=swap"); * { /* Resets */ margin: 0; padding: 0; box-sizing: border-box; } :root { /* Defaults */ font-family: "Poppins", sans-serif; font-size: 16px; font-weight: var(--medium); /* Vars */ --medium: 500; --border-rad: 10px; --notifs-size: 316px; --setting-links-space: 30px; --settings-btn-border: 32px; --settings-btn-col: #fcfcfc; --gen-black: #202142; --user-av-size: 38px; /* offset-x | offset-y | blur-radius | spread-radius | color */ --big-av-frame: 0 0px 0px 1px #efefef; /* --big-av-blur: 0px 0px 0px +2px(for space) - doesn't matter black; */ --big-av-blur: 0px 16px 45px -15px hsl(239, 97%, 26%, 0.2); } body { /* Body init */ width: 1440px; height: 1775px; } /* */ .header { /* init */ width: 100%; height: 120px; background-color: #fcfcff; padding: 0 50px; /* separate menu */ display: grid; grid-template-columns: auto var(--notifs-size); column-gap: 69px; } .logo { /* init */ width: 140px; height: 40px; } .nav { /* split nav */ display: grid; grid-template-columns: repeat(2, auto); align-items: center; } .nav_links { /* space links out */ display: flex; color: var(--gen-black); justify-content: space-between; } .nav_link { /* init */ list-style-type: none; } .link { /* resets */ text-decoration: none; color: inherit; } .btn { /* init */ width: 184px; height: 54px; color: white; background-color: var(--gen-black); cursor: pointer; /* topography */ font-family: inherit; font-size: 1rem; font-weight: var(--medium); /* rounding */ border-radius: var(--border-rad); border: 0px solid transparent; } .user-avatar { /* init */ overflow: hidden; /* circle */ width: var(--user-av-size); height: var(--user-av-size); border-radius: 50%; /* center image */ display: flex; align-items: center; justify-content: center; } .btn_upload { /* image init */ background-image: url(./media/upload.svg); background-repeat: no-repeat; background-position: calc(50% - 5ch) 50%; } .notif-icons { /* space notifs */ display: flex; align-items: center; justify-content: space-between; } /* */ /* */ .settings-wrap { /* unique, not so centered position */ margin: 90px 297px 0 216px; } .setting-pane { /* init */ width: 265px; /* line on the right */ border-right: 1px solid #efefef; /* space at end */ padding-bottom: var(--setting-links-space); } .nav_links--vertical { /* init */ flex-direction: column; } .nav_links--vertical > *:not(:last-child) { /* btn spacing - refactor to grid */ margin-bottom: var(--setting-links-space); } .setting-title { /* init */ color: var(--gen-black); /* sep from btns */ margin-bottom: 40px; /* topography */ font-family: "Merriweather", serif; font-size: 2rem; font-weight: var(--medium); } .btn_side-nav { /* init */ width: fit-content; height: fit-content; background-color: transparent; /* lighten when not selected */ color: hsla(238, 35%, 19%, 0.815); /* align text with title */ margin-left: -9.5px; padding: 9.5px; /* rounding */ border-radius: var(--settings-btn-border); } .btn_side-nav:focus, .btn_side-nav:hover { /* highlight */ color: var(--gen-black); background-color: var(--settings-btn-col); /* enhance highlight */ border: 1px solid #efefef; } .form { /* init */ margin-top: 84px; color: var(--gen-black); } .user-avatar_big { /* init */ width: 200px; height: 200px; /* inner frame */ border: 15px solid white; /* outer frame */ box-shadow: var(--big-av-blur), var(--big-av-frame); /* make space for outer frame */ margin: 1px; } .btn_white { /* invert color and border */ background-color: white; color: var(--gen-black); border: 1px solid #a4a4cb; } .input { /* init */ width: 100%; height: 74px; /* rounding */ border: 1px solid #c3c3e4; border-radius: var(--border-rad); /* Topography */ font-size: 18px; } .input-container > label { /* topography */ font-family: "Mulish", sans-serif; text-transform: capitalize; } /* */ /*Extra! Responsivity */ /* Start with removing body cap */