@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

html {
    font-family: 'Open Sans', sans-serif;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

header {
    width: 100%;
    z-index: 1;
}

header .content{
    background-color: #c5e0b4ff;
    width: 100%;
    padding-top: 0.5rem;
}

#menu {
  text-align: right;
  width: 90%;
}

#menu li {
    display: inline;
    text-decoration: none;
    margin-right: 30px;
}

#menu a {
    text-decoration: none;
    color: rgb(45, 45, 45);
    font-weight: bolder;
    border-bottom: rgb(131, 157, 115) solid 0px ;
    transition: border-width 0.1s linear;
}

#menu a:hover {
    color: rgb(131, 157, 115);
    border-width: 3px;

}

#title {
    font-size: x-large;
    margin-left: 10% ;
}

#subtitle {
    font-size: medium;
}

header .decors{
    background-image: url("background.svg");
    background-repeat: no-repeat;
    height: 6rem;
}

#page {
    width: 60%;
    z-index: 10;
    margin: auto;
}

.article{
    margin-top: 50px;
}

#title-content {
    font-size: x-large;
    font-weight: 700;
}

#title-content #subtitle {
    font-size: medium;
    font-weight: 200;
}


#description {
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
}


#description .one {
    flex: 0 0 59%; 
}


#description .two {
    flex: 0 0 39%;
    margin-left: 2%;
}

.justified{
    text-align: justify;
}

#description .two li {
    list-style-type: none;
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
    margin-bottom: 20px;
}

#description .two li > .material-icons {
    vertical-align:middle;
    color: rgb(131, 157, 115);
    margin-right: 5px;
}

.button {
    margin: auto;
    padding: 1rem;
    border: solid 3px #c5e0b4ff;
    border-radius: 10px;
    width: 15%;
    font-weight: bolder;
    color: rgb(131, 157, 115);
    text-decoration: none;
}

.button > .material-icons {
    vertical-align:middle;
}

.center {
    text-align: center;
}

#profil_picture {
    border : solid 5px rgba(131, 157, 115, 0.8);
    border-radius:  100%;
    display: inline-block;
    width: 14%;
    margin-bottom: 20px;
}


.button:hover {
    background-color: #c5e0b4ff;
    color: white;
    transition: background-color 0.5s, color 0.5s;

}

.date {
    font-size: small;
    font-style: italic ;
}

.lieu{
    font-size: small;
    font-style: italic ;
}

li {
    margin-bottom: 1rem;
}

#page h2 {
    font-size: xx-large;
    font-weight: lighter;
    color: rgb(131, 157, 115) ;
}

#page h3 {
    font-size: x-large;
    font-weight: lighter;
    color: rgb(120, 163, 93) ;
}

.timeline-title::before {
    content: '';
    display: inline-block;
    border: rgb(131, 157, 115) solid 3px;
    border-radius: 100%;
    height: 10px;
    width: 10px;
    vertical-align: middle;
    margin-right: 12px ;
}


.timeline-blue .timeline-title::before {
    border: #4fc3f7  solid 3px;
}

.timeline-orange .timeline-title::before {
    border: #ffcc80   solid 3px;
}

.timeline-body {
    border-left: gray solid 2px;
    padding-left: 20px;
    margin-left: 6px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-bottom: 20px;

}

ul.cloud {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2.5rem;
}

ul.cloud li {
    color: #a33;
    display: block;
    font-size: 1.5rem;
    padding: 0.5rem ;
    text-decoration: none;
    position: relative;
    /*border: #a33 solid 2px;
    border-radius: 25px;*/
    margin: 5px;
}

ul.cloud li[data-weight="1"] { --size: 1; }
ul.cloud li[data-weight="2"] { --size: 2; }
ul.cloud li[data-weight="3"] { --size: 3; }
ul.cloud li[data-weight="4"] { --size: 4; }
ul.cloud li[data-weight="5"] { --size: 5; }
ul.cloud li[data-weight="6"] { --size: 6; }
ul.cloud li[data-weight="7"] { --size: 7; }
ul.cloud li[data-weight="8"] { --size: 8; }
ul.cloud li[data-weight="9"] { --size: 9; }

ul.cloud li.web { color: #8bc34a ; --color: #8bc34a ; }
ul.cloud li.prog { color: #ffca28; --color: #ffca28 ; }
ul.cloud li.graph { color: #ef5350; --color: #ef5350  ; }
ul.cloud li.os { color: #3f51b5; --color: #3f51b5 ; }
ul.cloud li.tool { color: #26c6da; --color: #26c6da  ; }
ul.cloud li.gestion { color: #78909c; --color: #78909c  ; }



ul.cloud li {
    --size: 4;
    font-size: calc(var(--size) * 0.25rem + 0.5rem);
    opacity: calc((15 - (9 - var(--size))) / 15);
    transition: font-size 0.2s, font-weight 0.2s; 
}

ul.cloud li:hover {
    font-size: calc(var(--size) * 0.25rem + 0.8rem);
    font-weight: bolder;
}

  

footer {
    text-align: center;
    font-size: small;
    margin-top: auto;
    width: 100%;
    z-index: 1;
}

footer .content{
    background-color: #c5e0b4ff;
    width: 100%;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}


#subtitle {
    font-size: medium;
}

footer .decors{
    background-image: url("background-2.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    height: 12rem;
}