.tout{
    display: flex;
    flex-direction: row;
}

.cote{
    flex-direction: column;
    margin-top: 90px;
    position:fixed;
    background-color: rgb(132, 247, 249);
    height: 84%;
    width: 20%;
    align-items: center;
    text-align: center;
    border-radius: 0.25em 0.25em;
    border: double 2px aqua;
}

header{
    display: flex;
    position: fixed;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: aquamarine;
    margin-top: -22px;
    margin-bottom: 10px;
    margin-left: -8px;
    margin-right: -8px;
    height: 100px;
    font-family: Ruthie-Regular;
    border-bottom: double rgb(6, 198, 134);
}

.contenu{
    width:100%;
    margin-left: 25%;
    margin-top: 100px;
}

.ruthie-regular {
    font-family: "Ruthie", cursive;
    font-weight: 400;
    font-style: normal;
  }

.rimb{
    margin-top: 10px;
    width: 40%;
    border-radius: 0.5em 0.5em;
    border-style:double;
    border-color: rgb(0, 183, 255);
}

.cnt{
    margin-bottom: 0px;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 0px;
}

.infos{
    background-image: url("aqua.jpg");
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 0.5em 0.5em;
    border-style: dashed;
    border-color: rgb(3, 176, 245);
}

hr{
    width: 86%;
    height: -3px;
}

p[space]{
    font-size: auto;
}

[title $="style"]{
    margin: 16px;
    color: rgb(7, 213, 144);
}

body{
    background-color: black;
}

[title $="skills"]{
    display: flex;
    flex-direction: row;
}

[title $="skills"]>h2{
    color: rgb(140, 213, 245);
    margin: 10px;
    text-decoration: underline;
}

[title $="skills"]>span{
    color: rgb(170, 165, 247);
    margin-top: 10px;
}

.jim-nightshade-regular {
    font-family: "Jim Nightshade", cursive;
    font-weight: 400;
    font-style: normal;
  }

[title $="comp"]{
    color: aliceblue;
    margin-left: 10%;
}

.sep{
    margin-left: 2%;
}

.cat{
    width: 40%;
    color: aqua;
    margin-top: 20px;
}

.bulles{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: fit-content;
    margin-right: 100px;
    color: rgb(164, 127, 251);
    justify-content: space-between;
}

.exp{
    display: flex;
    flex-direction: column;
    border: dotted rgb(50, 144, 245);
    width: 90%;
    background: rgb(169, 221, 244);
    border-radius: 0.5em 0.5em;
    margin-top: 10px;
    margin-bottom: 10px;
}

.marg{
    margin: 20px;
}

.imgwork{
    width: 40%;
    align-self: center;
    margin: 10px;
    border-radius: 0.25em 0.25em;
    border-style: double;
    display: none;
}

.trait{
    margin-top: 0px;
    width: 98%;
}

.skil{
    display: flex;
    background-color: rgb(198, 246, 230);
    border-radius: 0.5em 0.5em;
    width: 80%;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    flex-direction: row;
    color: rgb(0, 255, 81);
}

#skills{
    display: flex;
    color: rgb(74, 170, 243);
    text-decoration: underline;
    border: solid 1px;
    width: fit-content;
    height: fit-content;
    margin: 1%;
    padding-left: 1%;
    background-image: url("aqua.jpg");
}

#icon{
    width: 30px;
    height: 30px;
    align-self: center;
    margin-top: -4px;
    margin-right: 5px;
}

.text{
    margin-right: 20px;
}

.about{
    display: flex;
    background-image: url("lila.webp");
    color: black;
    padding-left: 2%;
    width: fit-content;
    border-radius: 0.25em;
    padding-right: 2%;
}

.about>h2{
    text-decoration: underline;
}

#lois{
    border-color: rgb(157, 93, 246);
    border-style: double;
    padding: 10px;
    width: 80%;
    margin: 10px;
}

#demark{
    margin-left: 10px;
}

ul li::marker{
    color: rgb(157, 74, 240);
}

#li{
    display: none;
}

.exp:hover #meo{
    display: block;
}

[title |="m"]{
    display: none;
}

#bord{
    width: 100%;
    margin: 1px;
}

#special{
    margin-top: 20px;
}

#ggl{
    align-self: center;
    margin-right: 10%;
    margin-top: -4%;
}

#ggls{
    align-self: center;
    margin-right: 20px;
    margin-top: -4%;
}

[title |="rro"]{
    display: flex;
    align-items: center;
    margin-left: 20px;
    text-decoration: underline;
}

.list li::marker{
    color: rgb(24, 155, 255);
}

.itemlist{
    width: 60%;
    display: none;
}

.list h4{
    color: rgb(6, 208, 161);
}

#barre{
    height: 80vh;
    width: 0.1px;
    background-color: black;
    border-color: black;
    margin-left: 5%;
    margin-right: 1%;
    display: none;
}

#barres{
    height: 100vh;
    width: 0.01px;
    background-color: black;
    border-color: black;
    margin-left: 5%;
    margin-right: 1%;
    display: none;
}

.skil:hover #barre{
    display: block;
}

.skil:hover #barres{
    display: block;
}

.skil:hover .itemlist{
    display: block;
}