index.css

:root{--bg-clr:#fbfbff;--text-clr:#1b2021;--text-clr-sub:#2e2e3a;--text-clr-light:#f34213;--text-clr-sub-light:#de9151;--ff--header:"Oswald",sans-serif;--ff--normal:"Montserrat",sans-serif}*,:after,:before{box-sizing:border-box}body{color:var(--text-clr);font-family:var(--ff--normal);left:0;margin:0;padding:0;text-align:center;top:0}@media only screen and (min-width:2560px){body{font-size:150%}}@media only screen and (min-width:3840px){body{font-size:200%}}.section{box-shadow:0 0 10px 0 rgba(0,0,0,.75);display:grid;grid-template-columns:minmax(10em,1fr) minmax(230px,auto) minmax(10em,1fr);grid-template-rows:auto auto 1fr;min-height:100vh;position:relative;z-index:1}@media only screen and (max-width:768px){.section{grid-template-columns:minmax(.5em,1fr) minmax(230px,auto) minmax(.5em,1fr)}}.section__title{font-family:var(--ff--header);font-size:3em;font-weight:700;grid-column:1/4;line-height:1em;margin:.5em 0}.information{align-items:flex-start;display:flex;flex-flow:row wrap;grid-column:2/3;justify-content:space-evenly;margin-bottom:1em;position:relative}.information__portion{margin:0 0 0 3em;position:relative}.information__portion:after,.information__portion:before{content:"";position:absolute}.information__portion:before{background:var(--text-clr-light);border-radius:5px;height:100%;left:calc(-1.5em - 1px);top:.5em;width:3px}.information__portion:last-child:before{height:calc(100% - 1em)}.information__portion:after{background:var(--text-clr-light);border-radius:50%;box-shadow:0 0 0 6px rgba(243,66,190,.1);height:1em;left:-2em;top:.5em;width:1em}.portion__title{color:var(--text-clr-light);font-family:var(--ff--header);font-size:2em;font-weight:700;margin:0}.portion__title a{color:inherit}.portion__subtitle{color:var(--text-clr-light);font-family:var(--ff--header);font-size:1.25em;font-weight:700;margin:0 0 .5rem}.portion__subtitle a{color:inherit}.portion__list ul{border-bottom:1px dashed var(--text-clr-sub-light)}.information__portion ul{list-style:none;margin:0;padding:0}.information__portion li{font-weight:700;padding:.3em;position:relative}.exp__wrapper{align-items:unset;flex-flow:column}.exp__portion{text-align:start}.exp__portion li{font-size:.8em;font-weight:400;padding:.1em}@media only screen and (max-width:768px){.information{align-items:stretch;flex-direction:column}.information__portion{margin:3em 0 0}.information__portion:before{height:3px!important;left:0;top:calc(-1.5em - 1px);width:100%}.information__portion:after{border-radius:50%;box-shadow:0 0 0 6px rgba(243,66,190,.1);height:1em;left:calc(50% - .5em);top:-2em;width:1em}.exp__portion{text-align:center}}.list__subtitle{font-size:1.2em;text-decoration:underline}.list__info{cursor:pointer;text-decoration:none}.list__info:after{content:"info";font-size:1.2em;vertical-align:text-bottom}.list__info:before{background-color:var(--bg-clr);border-radius:.5em;bottom:100%;content:attr(data-info);left:-1em;padding:.5em;position:absolute;right:-1em;transform:scaleY(0);transform-origin:bottom;transition:transform .3s ease-in-out}.list__info:hover:before{box-shadow:0 0 20px 0 rgba(0,0,0,.5);transform:scaleY(1);z-index:1}.separator{box-shadow:inset 0 0 10px 0 rgba(0,0,0,.75);min-height:40vh}.section--intro,.separator{background-attachment:fixed;background-position:50%;background-repeat:no-repeat;background-size:cover}.section--intro{background-image:url(images/DSC_0036.jpg)}.intro__info{align-self:end;background-color:var(--bg-clr);border-radius:25px 25px 0 0;box-shadow:0 0 10px 0 rgba(0,0,0,.75);grid-column:2/3;grid-row:2/4;padding:0 1em 5px;position:relative;width:100%}.info__picture{border-radius:50%;box-shadow:0 0 10px 0 rgba(0,0,0,.5);display:block;margin:0 auto -6em;position:relative;top:-6em;width:12em}.info__name{font-family:var(--ff--header);font-size:2.5em;font-weight:700;line-height:1em;margin-top:0}.info__mail,.info__phone,.info__place{font-family:var(--ff--normal);font-size:1.5em;font-weight:700;word-break:break-word}.info__place:before{content:"room";vertical-align:middle}.info__mail:before{content:"mail";vertical-align:middle}.info__phone:before{content:"phone";vertical-align:middle}.info__mail a,.info__phone a{color:var(--text-clr-sub)}.intro__info .material-icons{font-size:1.5em;vertical-align:bottom}@media only screen and (max-width:768px){.info .material-icons{display:block}.info__mail,.info__name,.info__phone,.info__place{margin:0}.info__picture{margin:0 auto -5em;top:-5em;width:10em}}.intro__links{display:grid;grid-column:1/2;grid-row:1/4;grid-template-columns:1fr;justify-items:start;z-index:100}.intro__links a{align-self:center;background-color:var(--bg-clr);border-radius:50%;box-shadow:0 0 10px 0 rgba(0,0,0,.75);color:var(--text-clr);font-size:2em;height:1.5em;line-height:1.5em;margin:1em;position:relative;width:1.5em;z-index:100}.intro__links a:hover:before{transform:scale(1)}.intro__links a:before{background:var(--text-clr);border-radius:50%;bottom:-1px;content:"";left:-1px;position:absolute;right:-1px;top:-1px;transform:scale(0);transition:transform .2s ease-in-out;z-index:-1}@media only screen and (max-width:768px){.intro__links{display:grid;grid-column:1/4;grid-row:1/2;grid-template-columns:1fr 1fr 1fr 1fr;justify-items:center;z-index:100}.intro__links a{margin:.5em 0 0}}.intro__links .fa-linkedin{color:#0077b5}.intro__links .fa-instagram{color:#f73108}.intro__links .fa-facebook{color:#3b579d}.intro__links .fa-twitter-square{color:#28aae1}.intro__languages{background:var(--bg-clr);border-radius:1em;box-shadow:0 0 20px 0 rgba(0,0,0,.5);color:var(--text-clr);display:none;grid-column:2/4;grid-row:1/2;justify-self:end;margin:1em}.intro__languages ul{font-family:var(--ff--normal);font-weight:700;list-style:none;margin:1em;padding:0}.intro__languages a{text-decoration:none}.section--about{background:var(--bg-clr);justify-content:center}.about__text{grid-column:2/3;margin-top:0;padding:0 1em}.about__img{background-image:url(images/DSC_0016.jpg);grid-column:1/4;grid-row:3/4}.section--skills{min-height:100vh}.skills__img{background-image:url(images/DSC_0002.jpg)}.exp__img,.skills__img{grid-column:1/4;grid-row:3/4}.exp__img{background-image:url(images/DSC_0047.jpg)}.education__img{background-image:url(images/DSC_0041-2.jpg);grid-column:1/4;grid-row:3/4}.info__mail:before,.info__phone:before,.info__place:before,.list__info:after{word-wrap:normal;direction:ltr;display:inline-block;font-family:Material Icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}