@import url('https://fonts.cdnfonts.com/css/dejavu-sans-mono');
@import url('https://fonts.cdnfonts.com/css/inconsolata-2');

*{
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Inconsolata', sans-serif;
    background-color: #222222;
    overflow-x: hidden;
}
/* width */
::-webkit-scrollbar {
    width: 7px;
}
  
  /* Track */
::-webkit-scrollbar-track {
    background: #333333; 
}
   
  /* Handle */
::-webkit-scrollbar-thumb {
    background: #00fe00; 
}
  
  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #00fe00; 
}

h5 {
    position: absolute;
    top: 55vw;
    font-size: 2vw;
    left: 40%;
    color: #00fe00;
}

h5 a{
    color: #fe0087;
}

.table {
    display: flex;
    flex-wrap: wrap;
}

.row {
    display: flex;
    width: 100%;
    margin: 5px;
}

.cell {
    flex: 1;
    padding: 10px;
    text-align: center;
    color: #00fe00;
	font-family: 'DejaVu Sans Mono', sans-serif;
	margin: 0;
	font-size: 12px;
	white-space: pre-wrap;
    overflow: auto;
}

.title {
    font-size: 3vw;
}

.subtitle {
    font-size: 1vw;
}

.title-bar {
    font-size: 2.5vw;
}

.bar-img {
    color: #00fe00;
    stroke: #00fe00;
    height: 2vw;
    width: 3vw;
}

.computer-frame {
    display: block;
    line-height: 2.5vw;
    font-size: 2.5vw;
}

.phone-frame {
    display: none;
    line-height: 5vw;
    font-size: 5vw;
}

.ordi {
    position: relative;
    text-align: center;
}

.ordi-title{
    top: 6vw;
    left: 20vw;
    position: absolute;
    font-size: 1vw;
    line-height: 1vw;
} 

.zone-texte-ordi{
    top: 12vw;
    left: 36.5vw;
    width: 47vw;
    height: 15vw;
    overflow: auto; /* Permet le défilement si le contenu dépasse la taille */
    position: absolute;
    background-color: #00000000; /* Couleur de fond de la zone de texte */
    color: #00fe00;
    line-height: 1.3vw;
    font-size: 1.3vw;
}

.ordi-cat {
    top: 15vw;
    position: absolute;
    font-size: 4vw;
    line-height: 0vw;
}

.competence {
    font-size: 1.3vw;
    line-height: 1.3vw;
    position: absolute;
    width: 6vw; /* Largeur du SVG */
    height: auto; /* Hauteur auto pour s'adapter au contenu */
    transition: all 0.3s ease; /* Transition pour l'effet de survol */
}

.competence svg{
    width: 10vw;
    fill: #00fe00;
    transition: all 0.3s ease;
}

.competence:hover svg{
    fill: #fe0087;
    transform: scale(0.8) translateY(-50%);
}

.competence .competence-desc {
    border: 1px solid #fe0087;
    display: none;
    transition: all 0.3s ease;
}

.competence:hover .competence-desc {
    display: block;
}

.competence-desc {
    color: #fe0087;
    position: absolute;
    top: 8vw;
    width: 10vw;
    font-size: 0.8vw;
    line-height: 0.8vw;
    transition: all 0.3s ease;
}

.competences-frame {
    position: absolute;
    line-height: 4vw;
    left: 7vw;
}

.competence-linux {
    top: 0vw; 
    left: 12vw;
}

.competence-windows {
    top: 0vw; 
    left: 33vw;
}

.competence-firewall {
    top: 0vw; 
    left: 54vw;
}

.competence-net {
    top: 0vw; 
    left: 75vw;
}

.competence-dev {
    top: 15vw; 
    left: 65vw;
}

.competence-cyber {
    top: 15vw; 
    left: 21vw;
}

.projet {
    font-size: 1.3vw;
    line-height: 1.3vw;
    position: absolute;
    width: 20vw; /* Largeur du SVG */
    height: auto; /* Hauteur auto pour s'adapter au contenu */
    top: 7vw;
    left: 11vw;
    transition: all 0.3s ease; /* Transition pour l'effet de survol */
}

.projet svg{
    width: 20vw;
    fill: #00fe00;
    transition: all 0.3s ease;
}

.projet:hover svg{
    fill: #fe0087;
    transform: scale(0.4) translateY(-200%);
}

.projet-secbox:hover svg{
    transform: scale(0.4) translateY(-230%);
}

.projet:hover .projet-class {
    display: block;
}

.projet-class {
    color: #fe0087;
    display: none;
}

.projet-title {
    position: absolute;
    top: 4vw;
    left: 4vw;
}

.projet-frame {
    position: absolute;
    left: -6vw;
    top: 1vw;
}

.projet-desc {
    position: absolute;
    left: -2vw;
    top: 8vw;
}

.projet-logo {
    position: absolute;
    width: 10vw;
    left: 13vw;
    top: 21vw;
}

.projet-secbox .projet-frame {
    left: -5vw;
    top: 0vw;
}

.projet-secbox  .projet-title {
    top: 2vw;
    left: 6.5vw;
}

.projet-secbox {
    top: 4vw; 
    left: 20vw;
}

.projet-secbox .projet-desc {
    position: absolute;
    left: 0vw;
    top: 5vw;
}

.projet-cattheflag {
    top: 3vw; 
    left: 60vw;
}

.projet-cattheflag svg {
    width: 15vw;
}

.veille-title {
    top: 15vw; 
    left: 40vw;
}

.switch-left {
    left: 17vw;
    top: 7vw;
    width: 3vw;
    position: absolute;
    fill: #00fe00;
    transition: transform  0.3s ease;
}

.switch-right {
    left: 82vw;
    top: 7vw;
    width: 3vw;
    position: absolute;
    fill: #00fe00;
    transition: transform  0.3s ease;
}

.switch-left:hover {
    fill: #fe0087;
}

.switch-right:hover {
    fill: #fe0087;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.first-row-hd {
    display: none;
}

.first-row-portfolio {
    display: none;
}

.btn-prj-small{
    display: none;
}

.btn{
    top: 200px;
	left : 20px;
    line-height: 0.6vw;
	font-size: 0.6vw;
    color: #00fe00;
	transition: color 0.3s ease;
	text-decoration: none; 
    font-family: 'DejaVu Sans Mono', sans-serif;
	white-space: pre-wrap;
}

.profil-btn{
    position: absolute;
    font-size: 0.15vw;
    line-height: 0.18vw;
    color: #00fe00;
	transition: color 0.3s ease;
	text-decoration: none; 
    font-family: 'DejaVu Sans Mono', sans-serif;
	white-space: pre-wrap;
}

.profil-row {
    display: flex;
    position: absolute;
    left: 10vw;
    top: 17vw;
    width: 34vw;
    margin: 5px;
}
.profil-row2 {
    display: flex;
    position: absolute;
    left: 10vw;
    top: 19vw;
    width: 34vw;
    margin: 5px;
}

.profil-cell {
    flex: 1;
    padding: 10px;
    color: #00fe00;
    font-family: 'DejaVu Sans Mono', sans-serif;
    margin: 0;
    font-size: 12px;
    white-space: pre-wrap;
    overflow: auto;
}

a.btn:hover{
	color: #fe0087;
    cursor:pointer;
}

a{
    color: #00fe00;
    fill: #00fe00;
    stroke: #00fe00;
}
a:hover{
    color: #fe0087;
    cursor:pointer;
}

a:hover svg{
    fill: #fe0087;
    stroke: #fe0087;
}

.portfolio{
    font-size: 1vw;
    position: relative;
    overflow: hidden;
}

.profil-title {
    top: 13vw;
    left: 20vw;
    position: absolute;
    font-size: 0.5vw;
    line-height: 0.5vw;
}

.cheat-sheet-title{
    top: 7vw;
    left : 6.3vw;
    position: absolute;
    font-size: 0.5vw;
    line-height: 0.5vw;
} 

.part-zone {
    border: 1px solid #00fe00;
    padding: 15px;
    margin-bottom: 15px;
    line-height: 1vw;
}
.part-zone h1{
    font-weight: 400;
    font-size: 1.9vw;
    margin-bottom: 5px;
    line-height: 1.9vw;
}
.part-zone p{
    font-size: 1.4vw;
    line-height: 1.4vw;
    font-style: italic;
}

.zone-texte-cheat-sheets{
    top: 13vw;
    left: 7vw;
    width: 28vw;
    height: 38vw;
    overflow: auto; /* Permet le défilement si le contenu dépasse la taille */
    position: absolute;
    background-color: #00000000; /* Couleur de fond de la zone de texte */
    color: #00fe00;
    font-size: 10px;
}

.cheat-sheet-category {
    max-height: min-content;
    text-align: left;
}

.cheat-sheet h1{
    padding-bottom: 7.5px;
    position: relative;
    white-space: nowrap;
    font-size: 2vw;
}

.cheat-sheet h1:hover{
    color: #fe0087;
    fill: #fe0087;
}

.cheat-sheet h1:hover svg{
    fill: #fe0087;
}

.cheat-sheet h1 svg{
    fill: #00fe00;
}

.cheat-sheet h1 ul {
    color: #00fe00;
    display: none;
}

.cheat-sheet h1 ul {
    margin: 0;
    margin-top: 5px;
}

.cheat-sheet h1 ul a li {
    padding-bottom: 5px;
}

.cheat-sheet ul a {
    color: #00fe00;
    font-size: 12px;
    text-decoration: none; 
}

.cheat-sheet h1:hover ul {
    display: block;
}

.cheat-sheet h1 ul:hover {
    color: #fe0087;
}

.cheat-sheet ul:hover a:hover {
    color: #fe0087;
}

.download-svg {
    position: absolute;
    left: 73vw;
    top: 455px;
    width: 10vw;
    height: 12vw;
    fill: #00fe00;
    stroke: #00fe00;
    transition: transform 0.3s ease;
}

.download-svg:hover {
    fill: #fe0087;
    stroke: #fe0087;
}

.fleche-left {
    fill: #00fe00;
    margin-left: 10px;
    transition: transform  0.3s ease;
}

h1:hover .fleche-left {
    transform: translateX(-25%) rotate(90deg); /* Change la position de la flèche vers la gauche */
    fill: #fe0087;
}

h2:hover .fleche-left {
    transform: translateX(-25%) rotate(90deg); /* Change la position de la flèche vers la gauche */
    fill: #fe0087;
}

.cheat-sheet{
    position: relative;
    margin-left: 2dvb;
    font-size: 1vw;
}

.zone-texte {
    width: 34vw;
    height: 28vw;
    overflow: auto;
    background-color: #00000000;
    position: absolute;
    top: 23vw;
    left: 10vw;
    color: #00fe00;
    font-family: 'Inconsolata', sans-serif;
    font-size: 1.4vw;
    padding-right: 15px;
}

.portfolio-part{
    top: 0;
}

.zone-text h1{
    font-weight: 700;
}

@media (max-width: 1040px) {
    .title {
        font-size: 6vw;
    }
    .subtitle {
        font-size: 3vw;
    }

    .portfolio{
        font-size: 2vw;
    }
    .profil-title {
        top: 24vw;
        left: 30vw;
        position: absolute;
        font-size: 1.5vw;
        line-height: 1.5vw;
    }
    .profil-row {
        left: 18vw;
        top: 37vw;
        width: 60vw;
    }
    .profil-row2 {
        left: 18vw;
        top: 42vw;
        width: 60vw;
    }
    .profil-btn {
        font-size: 0.3vw;
        line-height: 0.3vw;
    }

    .zone-texte {
        top: 48vw;
        left: 20vw;
        width: 60vw;
        height: 50vw;
        font-size: 1.5vw;
    }
    .last-row{
        flex-direction: column;
        height: min-content;
    }
    .cheat-sheet{
        left: 1vw;
        font-size: 2.2vw;
        margin: 0;
    }
    .cheat-sheet-title{
        top: 20vw;
        left: 16vw;
        position: absolute;
        font-size: 1vw;
        line-height: 1vw;
    }

    .cheat-sheet h1{
        position: relative;
        white-space: nowrap;
        font-size: 4vw;
    }

    .last-post {
        font-size: 1.9vw;
    }

    h1 {
        font-size: 5vw;
    }

    .switch-right {
        width: 5vw;
        left: 84vw;
        top: 13vw;
    }

    .switch-left {
        width: 5vw;
        left: 7vw;
        top: 13vw;
    }

    .ordi-title {
        top: 12vw;
        left: 11vw;
        position: absolute;
        font-size: 1.2vw;
        line-height: 1vw;
    }  

    .ordi-cat {
        top: 20vw;
    }

    .competence:hover svg {
        transform: scale(0.8) translateY(-30%);
    }

    .computer-frame {
        display: none;
    }

    .competence-desc {
        color: #fe0087;
        position: absolute;
        top: 23vw;
        width: 30vw;
        font-size: 2vw;
        line-height: 2vw;
    }

    .competence svg{
        width: 30vw;
    }

    h5 {
        top: 175vw;
        left: 20%;
        font-size: 5vw;
    }
    
    .competence-linux {
        top: 5vw; 
        left: 10vw;
    }
    
    .competence-windows {
        top: 5vw; 
        left: 52vw;
    }
    
    .competence-firewall {
        top: 50vw; 
        left: 10vw;
    }

    .competence-net {
        top: 50vw; 
        left: 52vw;
    }

    .competence-cyber {
        top: 95vw; 
        left: 10vw;
    }

    .competence-dev {
        top: 95vw; 
        left: 52vw;
    }

    .phone-frame {
        display: block;
    }

    .projet svg{
        width: 40vw;
    }

    .projet-cattheflag svg {
        width: 35vw;
    }

    .projet-secbox {
        top: 20vw;
        left: 27vw;
    }

    .projet-secbox .projet-frame {
        font-size: 2.5vw;
        line-height: 2.5vw;
        left: -10vw;
    }

    .projet-secbox .projet-title {
        font-size: 6vw;
        top: 5vw;
        left: 10.5vw;
    }

    .projet-secbox .projet-desc {
        font-size: 3vw;
        line-height: 3vw;
        width: 41vw;
        left: 1vw;
        top: 9vw;
    }

    .projet-cattheflag {
        top: 75vw;
        left: 31vw;
    }

    .projet-cattheflag .projet-frame {
        font-size: 2.5vw;
        line-height: 2.5vw;
        left: -13vw;
    }

    .projet-cattheflag .projet-title {
        font-size: 6vw;
        top: 5vw;
        left: 0.5vw;
    }

    .projet-cattheflag .projet-desc {
        font-size: 3vw;
        line-height: 3vw;
        width: 41vw;
        left: -2vw;
        top: 10vw;
    }

    .projet-logo {
        position: absolute;
        width: 20vw;
        left: -20vw;
        top: 45vw;
    }

    .zone-texte-cheat-sheets{
        top: 35vw;
        left: 15vw;
        width: 60vw;
        height: 75vw;
        overflow: auto; /* Permet le défilement si le contenu dépasse la taille */
        position: absolute;
        background-color: #00000000; /* Couleur de fond de la zone de texte */
        color: #00fe00;
        font-family: 'DejaVu Sans Mono', sans-serif;
        margin: 0;
        line-height: 1.2;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .first-row {
        display: none;
    }
    .first-row-hd {
        display: block;
    }

    .first-row-portfolio {
        display: block;
        font-size: 1.8vw;
        line-height: 1;
    }

    .download-svg {
        left: 73vw;
        top: 470px;
        width: 12vw;
        height: 14vw;
    }
    .title-bar {
        font-size: 2.8vw;
        margin: 0;
    }

    .btn-prj-large{
        display: none;
    }

    .btn-prj-small{
        display: contents;
    }

    .btn {
        padding: 0px;
        line-height: 0.01px;
        font-size: 2.2px;
    }

    .btn-cell{
        overflow: hidden;
        padding: 1px;
    }

    .bar-img {
        width: 3.5vw;
        height: 2.6vw;
    }
}