.profile-container { /*margin-left: calc(10% - 10px);*/ height: 170px; width: 170px; z-index: 2; left: 10%; } .title { position: absolute; margin-left: calc(100px); width: calc(100% - 100px); padding: 1em; margin-top: -225px; z-index: 0; } .title > * { width: 100%; margin-bottom: 0px; } img.profile { left: 10px; width: 150px; position: absolute; aspect-ratio: 1; transform: scale(1); transition: .5s; z-index: 2; } img.background2 { left: 0px; width: 170px !important; margin-top: -10px; pointer-events: none; z-index: 1; } img.foreground { border-radius: 50%; pointer-events: none; z-index: 3; } img.background:hover { filter: blur(5px); } .spacer { height: 100px; } /* For small screens */ img.profilesml { width: 150px; position: absolute; left: 50%; margin-left: -75px; aspect-ratio: 1; padding-top: calc(var(--s)/5); transform: scale(1); transition: .5s; } img.foregroundsml { border-radius: 50%; pointer-events: none; } img.backgroundsml:hover { filter: blur(5px); } img.background2sml { width: 170px !important; left: calc(50% - 10px); margin-top: -10px; pointer-events: none; z-index: 0; } /* For printing set colour to black */ @media print { div { color: black !important; } } @media print { .noprintbreak { page-break-inside: avoid; } } @media print { .edu-main { page-break-before: always; } }