.content { position: absolute; overflow: hidden; } .content__left { float: left; width: 70%; height: 100%; padding: 3rem 4rem; } .content__right { position: absolute; float: right; width: 29%; background-color: #f5f5f5; height: 100%; padding: 2rem 3rem; right: 1rem; -webkit-box-shadow: 0.5rem 1rem 1.5rem rgba(102, 102, 102, 0.15); -moz-box-shadow: 0.5rem 1rem 1.5rem rgba(102, 102, 102, 0.15); box-shadow: 0.5rem 1rem 1.5rem rgba(102, 102, 102, 0.15); } *, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; } html { font-size: 62.5%; background-color: #ddd; } @media print { html { background-color: #fff; } } .content { width: 80rem; min-height: 113.16129rem; background-color: #fff; } @media screen and (min-width: 60rem) { .content { margin: 6rem 0; -webkit-box-shadow: 1rem 2rem 3rem rgba(102, 102, 102, 0.3); -moz-box-shadow: 1rem 2rem 3rem rgba(102, 102, 102, 0.3); box-shadow: 1rem 2rem 3rem rgba(102, 102, 102, 0.3); position: absolute; left: 50%; transform: translateX(-50%); } } @media print { .content { margin: 0; } } body { box-sizing: border-box; } @media print { @page { margin: 0; size: A4; } } ::selection { color: #fff; background-color: rgba(213, 158, 147, 0.6); } body { font-family: "Roboto", sans-serif; font-weight: 300; line-height: 1.7; font-size: 1.12rem; color: #666; } .mainHeading { text-transform: uppercase; font-size: 5rem; color: #aaa; } .mainHeading span { color: #e3bfb8; } .section__title { font-size: 2.1rem; color: #aaa; } h1, h2 { text-transform: uppercase; font-family: "Oswald", sans-serif; } .section { display: block; margin-bottom: 2rem; } .section__heading { width: 100%; overflow: hidden; } .section__title { position: relative; } .section__title::after { content: ""; position: absolute; border-top: 1px solid; border-bottom: 1px solid; border-color: #aaa; width: 50rem; height: 4px; margin-left: 1.5rem; margin-top: 1.5rem; transition: all 0.5s ease-in-out; } .section__title:hover::after { border-color: #e3bfb8; } .sideSection { display: block; margin-bottom: 3rem; } .sideSection__heading { width: 100%; overflow: hidden; text-align: center; margin-bottom: 1rem; } .sideSection__title { position: relative; } .sideSection__title::after, .sideSection__title::before { content: ""; position: absolute; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; width: 10rem; height: 4px; margin-top: 1.1rem; } .sideSection__title::after { margin-left: 1rem; } .sideSection__title::before { margin-left: -11rem; } .sideSection li { list-style: none; } .experience__item { display: block; margin-bottom: 1.5rem; } .experience__header, .experience__subheader { display: block; width: 100%; height: 2.4rem; } .experience__job { position: relative; transition: transform 0.2s ease-in-out; } .experience__job:hover { transform: translateX(0.5rem); } .experience__company, .experience__position { text-align: left; width: 70%; float: left; } .experience__company { color: #999; } .experience__position { text-transform: uppercase; font-size: 1.3rem; color: #666; } .experience__date, .experience__place { float: right; text-align: right; width: 30%; color: #aaa; } .experience__date { font-weight: 400; } .experience__place::before { font-family: 'Material Icons'; color: #e3bfb8; font-size: 1.4rem; content: "place"; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: 900; } .experience__bullet { list-style-position: inside; } .experience__badges { display: block; text-align: right; margin-top: 0.5rem; margin-bottom: 0.5rem; } .experience__badge { font-size: 0.9rem; font-weight: 400; display: inline-block; background-color: #e3bfb8; color: white; border-radius: 1rem; padding: 0.1rem 0.6rem; } .contact { line-height: 2rem; } .contact__item { position: relative; font-size: 1rem; } .contact__item > i { background-color: #e3bfb8; font-size: 1rem; color: white; text-align: center; border-radius: 50%; padding-top: 0.5rem; width: 2rem; height: 2rem; margin-right: 0.5rem; margin-bottom: 0.5rem; } .contact__item > span { position: absolute; top: 50%; transform: translateY(-50%); } .avatar { display: block; } .avatar__img { object-fit: cover; width: 100%; overflow: hidden; border-radius: 50%; } .avatar__img:hover { size: 110%; } .skills__group span { font-weight: 700; display: inline-block; } .skills__group span::after { content: ":"; } .skills__group span:hover ~ li { background-color: #e3bfb8; color: #fff; } .skills__group li { display: inline-block; font-weight: 400; transition: all 0.2s ease-in-out; padding: 0 1px; border-radius: 2px; } .skills__group li:not(:last-child)::after { content: ", "; } .skills__group li:hover { background-color: #e3bfb8; color: #fff; } .language__item { display: table; width: 100%; } .language__name, .language__level { display: table-cell; width: 50%; } .language__level { text-align: right; } .interests { display: block; -moz-column-count: 2; column-count: 2; width: 100%; text-align: right; } .interests__item:nth-child(n+4) { text-align: left; }