@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
*{
    margin: 0;
    padding: 0;
    
}
body{
    display: flex;
    justify-content: center;
    /* background-color: #ebe9ff; */
    background-color: #111;

    --primary-bg: #eee;
    --pr-padding-x: 0 4%;
    --pl-padding-x: 0 4%;
}
#page{
    width: 210mm;
    height: 297mm;
    background-color: #eef;
    font-size: 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    font-family: "Alata", serif;
    font-weight: lighter;
    font-style: normal;
    position: relative;
    overflow: hidden;
}
#partLeft{
    font-size: 1rem;
    width: 40%;
    background-color: #fff;
}
#partRight{
    font-size: 3.4mm;
    width: 60%;
    background-color: var(--primary-bg);
}

section{
    padding: 8% 0;
}
h2{
    font-size: 300%;
    font-weight: lighter;
    padding: var(--pr-padding-x);
    line-height: 100%;
    letter-spacing: 1mm;
}
h2 .line{
    display: block;
}
h2 .line2{
    padding-left: 15%;
}
h3{
    font-size: 4.5mm;
    font-weight: lighter;
    letter-spacing: 1mm;
    text-transform: uppercase;
}
h4{
    font-size: 4mm;
    letter-spacing: 0.5mm;
    font-weight: lighter;
}
h5{
    text-transform: uppercase;
    letter-spacing: 1mm;
    font-weight: lighter;
}
.title{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 5.6%;
}

.title .decorationBlock{
    display: inline-block;
    background-color: var(--primary-bg);
    width: 22%;
    height: 2rem;
}
.title .text{
    display: inline-block;
    padding-left: 3%;
    font-size: 5mm;
    font-weight: lighter;
    line-height: 100%;
}
.description{
    padding-right:36%;
    text-align: right;
    font-size: 3.4mm;
}
#infos{
    padding: var(--pl-padding-x);
    margin-top: 12.7%;
    height: 39mm;
}
#infos .line{
    margin-bottom: 3%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#infos .line .text{
    font-size: 80%;
    margin-right: 5%;
}
#infos .line .icon{
    height: 8mm;
    width: 8mm;
    border-radius: 50%;
    background-color: var(--primary-bg);
    display: flex;
    justify-content: center;
    align-items: center;
}
#infos .line .icon svg{
    height: 60%;
    width: 60%;
}

#summary{
    padding: var(--pr-padding-x);
    margin-top: 5%;
    text-align: justify;
    letter-spacing: 0.5mm;
    height: 30mm;
}
#experiences{
    margin: var(--pr-padding-x);
    margin-top: 8%;
}
#experiences h3{
    margin-bottom: 5mm;
}
#experiences h4{
    margin-bottom: 1%;
}
#experiences .unit{
    margin-bottom: 5mm;
}
#experiences .unit h5{
    display: flex;
    justify-content: space-between;
}
#experiences .unit li{
    margin-left: 4%;
}
#activities{
    padding: var(--pr-padding-x);
    margin-top: 8%;
    line-height: 100%;
}
#activities b{
    font-weight: bolder;
    font-size: 4mm;
    margin-top: 4mm;
    display: block;
}
#activities p{
}
#education{
    padding: var(--pl-padding-x);
    text-align: right;
    margin-top: 10.5%;
}
#education h3{
    margin-bottom: 5mm;
}
#education .unit{
    margin-bottom: 15%;
}
#education .unit .sub{
    font-size: 3mm;
    margin-top: 1%;
}
#education .unit .period{
    font-size: 3.5mm;
    letter-spacing: 0.5mm;
    margin-top: 1%;
}
#skills{
    margin-top: 18.5%;
    padding: var(--pl-padding-x);
    text-align: right;
}
#skills .icons{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    justify-items: end;
    margin-top: 5%;
}
#skills .icons svg{
    height: 13mm;
    width: 13mm;
    margin: 5% 0;
    filter: grayscale(100%);
}
#skills .language{
    letter-spacing: .5mm;
    font-size: 3.5mm;
    margin-top: 3%;
}
@media print{
    body{
        margin: 0;
        padding: 0;
    }
    @page {
        size: 210mm 297mm;
        margin: 0;
      }
}