:root
{
    --primary: #404040ff;
    --secondary: #bfbfbf;
    --background: hsl(0, 0%, 100%);
}

[class*='devicon']:hover, [class*='icon']:hover
{
    opacity: .5;
    cursor: pointer;
}

body
{
    font-family: Montserrat, sans-serif;
    background: #262626;
}

a, a:hover
{
    color: var(--secondary);
}

.root
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.wm-cv
{
    min-height: 90vh;
    width: 75vw;
    margin-top: 2em;
    margin-bottom: 2em;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5),0 2px 10px 0 rgba(0,0,0,0.5)
}

.flex-container
{
    display: flex;
}

.left-side
{
    background-color: var(--primary);
    color: var(--secondary);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    min-width: 20em;
}

.right-side
{
    display: flex;
    flex-direction: column;
    background-color: var(--background);
    justify-content: space-between;
}

.bg-debug-blue
{
    background-color: #0000ff55 !important;
}

.bg-debug-red
{
    background-color: #ff000055 !important;
}

.bg-debug-green
{
    background-color: #00ff0055 !important;
}

.bg-debug-orange
{
    background-color: #ff7b0055 !important;
}

.bg-debug-pink
{
    background-color: #8c00ff55 !important;
}

.profil-picture
{
    background: url('../icons/pic.png') no-repeat;
    /*background-size: 100% 100%;*/
    background-position: center;
    width: 100%;
    height: 15em;
    margin: 1em 0em;
    transition: opacity 0.1s ease;
}

.profil-picture:hover
{
    opacity: .25;
}

.responsive-picture
{
    width: 100%;
}

.flex-vertical-center
{
    display: flex; 
    padding: 1em;
}

.personnal-datas
{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 1em 0em;
    grid-auto-flow: row;
    grid-template-areas: 
      ". ."
      ". ."
      ". ."
      ". .";
      padding: 4em;
}
  

.languages
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.language
{
    width: 75%;
    align-items: center;
}

.text-language
{
    padding-right: 1em;
}

.text-bold
{
    font-weight: bold;
}

.main-title
{
    font-weight: bold;
    font-size: 5em;
}

.main-subtitle
{
    color : var(--secondary);
    font-size: 2.5em;
}

.head
{
    text-align: center;
    height: 20em;
    justify-content: space-around;
}

.section
{
    flex-grow: 1;/* FOR DEBUG => TO REMOVE */
    display: flex;
    flex-direction: column;
}

.section-title
{
    color : var(--secondary);
}

.section-body
{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.item
{
    display: flex;
    margin-top: 2em;
}

.item-skills
{
    flex-wrap: wrap;
}

.item-skills i 
{
    font-size: 2em;
}

.big-icon
{
    font-size: 3em !important;
}

.item-bread
{
	background: url('../icons/hexagon.svg');
	/* background-size: 100% 100%; */
    background-position: top;
    background-repeat: no-repeat;
	width: 2em;
    margin-left: 2em;
    margin-right: 2em;
	min-height: 2em;
    min-width: 2em;
    max-width: 2em;
}

.item-title
{
    display: flex;
    /* justify-content: center; */
    flex-direction: column;
    min-width: 20em;
}

.item-body
{
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: background-color .15s;
    padding: .5em;
}
.skills-line
{
    display: flex;
    flex-direction: row;
}

.skill-level-1
{
    background: url('../icons/skill-1.svg');
}

.skill-level-2
{
    background: url('../icons/skill-2.svg');
}

.skill-level-3
{
    background: url('../icons/skill-3.svg');
}

.skill-level-4
{
    background: url('../icons/skill-4.svg');
}

.skill-level-5
{
    background: url('../icons/skill-5.svg');
}

[class*="skill-level-"]
{
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100px;
    width: 10%;
    flex-flow: row wrap;
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    min-width: 7em;
    /*margin: 1em;*/
}

[class*="skill-level-"] span
{
    max-width: 10em;
}

.email-adress, .phone-number
{
    cursor: pointer;
    transition: opacity .1s;
}

.smal-text
{
    font-size: .75em;
}

.button-expand
{
    text-align: center;
    font-size: 1.5em;
    opacity: 0;
    rotate: 0;
    transition: opacity .15s, rotate .25s;
}

.item-body-expandable:hover
{
    cursor: pointer;
    background: var(--secondary);
}

.detail-experience
{
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    transition: height .25s;
}

.item-body:hover .button-expand
{
    opacity: 1;
}

.button-download
{
    scale : 1;
    transition: scale .15s;
}

.button-download:hover
{
    scale: 1.25;
}

@media print
{
    
    .left-side
    {
        display: none;
        min-width: .1em !important;
        font-size: .5em;
        /* background-color: blue !important; */
    }

    .profil-picture
    {
        background: url('../icons/pic.png') no-repeat !important;
        background-position: center !important;
        width: 100% !important;
        height: 25em !important;
        margin: 1em 0em !important;
        transition: opacity 0.1s ease !important;
        border: 1px solid red !important;
    }
    
    .wm-cv
    {
        min-height: 100%;
        width: 100%;
        margin: 0em !important;
        padding: 3em !important;
        /* font-size: .5em !important; */
    }

    a[href]:after { content: none !important; }

    .col-1.right-side{
        background-color: fuchsia !important;
        width: 0em !important;
    }

    .col-8.right-side
    {
        width: 100% !important;
        /* background-color: green !important; */
    }

    .section.head
    {
        height: initial !important;
    }

    .main-title
    {
        font-size: 4.5em !important;
    }

    i
    {
        font-size: 1em !important;
    }
}