/*** Téléphone ***/

@media (max-width: 575.98px) {
    html, body, #app{
        width: 100%;
    }

    .btn-top-bar {
        display: none;
    }

    p.dev-name {
        display: none;
    }

    div#phone-menu {
        display: flex;
    }

    div#top-bar {
        display: flex;
        justify-content: space-between;
        position: relative;
    }
    
    div#phone-top-bar {
        background-color: #FFF;
        width: 100vw;
        height: 100vh;
        top: 0;
        position: fixed;
        z-index: 9;
        transition: all 0.3s; 
    }

    div#phone-top-bar .list-phone-menu-btn{
        padding: 0;
        display: flex;
        flex-direction: column;
        align-content: center;
        margin-top: 80px;
    }
    
    div#phone-top-bar .phone-menu-btn {
        width: 100%;

        padding-bottom: 30px;
        font-size: 28px;
    }

    div#phone-top-bar .phone-menu-btn a {
        color: black;
        font-family: 'Poppins';
    }

    div.redirection-phone-menu-btn {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 30px;
    }

    div.top-borders {
        display: flex;
        height: 2px;
    }

    div.top-borders div {
        width: 100%;
    }

    div.top-left-border {
        border-top: 2px solid;
        border-image: linear-gradient(to right,#fff,rgba(0,0,0,60%)) 1 0 0 0; 
    }


    div.top-right-border {
        border-top: 2px solid;
        border-image: linear-gradient(to left,#fff,rgba(0,0,0,60%)) 1 0 0 0; 
    }

    div#close-phone-menu-btn {
        height: 8.25vh;
    }

    div#close-phone-menu-btn img {
        width: 64px;
        height: 64px;
    }

    .overlay {
        transform: translateY(0);
    }
    
    .not-overlay {
        transform: translateY(-100%);
    }

    div#nav-bar-btn {
        margin-right: 5px;
    }

    .go-next-part-container {
        display: none;
    }

    a.go-next-part {
        display: none;
    }

    div#light-mode-btn {
        gap: 16px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 22px;
        height: 35px;
    }

    div#dark-mode-btn {
        gap: 16px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 22px;
        height: 35px;
    }

    div#light-mode-btn img.icon-35px {
        width: 24px;
        height: 24px;
    }

    div#light-mode-btn img {
        width: 20px;
        height: 20px;
    }

    div#dark-mode-btn img.icon-35px {
        width: 24px;
        height: 24px;
    }
    
    div#dark-mode-btn img {
        width: 20px;
        height: 20px;
    }

    .presentation-personal-image {
        width: 250px;
        height: 250px;
        order: -1;
    }

    div#content-presentation {
        padding: 30px 0px 50px 0px;
    }

    p.presentation-title-name {
        font-size: 30px;
    }

    p.presentation-title-text {
        font-size: 20px;
    }

    span.presentation-title-description {
        font-size: 17px;
    }

    /**** competences part ****/

     div#competences{
         padding-top: 80px;
         padding-bottom: 50px;
     }

    div.competences-title {
        font-size: 28px;
    }

    .competences-container {
        width: 100%;
        margin-left: 7%;
        margin-right: 7%;
        display: flex;
    }

    .competences-container .competences-type-label {
        font-size: 25px;
    }

    .competences-content {
        width: 100%;
    }

    /**** project part ****/

    div#projets {
        padding-top: 80px;
    }

    div.projects-title {
        font-size: 30px;
        padding-bottom: 20px;
    }

    div.project {   
        display: flex;
        margin-left: 7%;
        margin-right: 7%;
    }

    img.project-img {
        width: 100%;
        height: 100%;
        justify-self: flex-start;
        margin-top: 0px;
    }

    div.project-content-title {
        font-size: 30px;
    }
    span.wip {
        font-size: 20px;
    }

    div.project-content {
        flex-direction: column;
        gap: 20px;
    }

    div.project-content-desc {
        font-size: 18px;
    }
    .project-content-txt-part {
        gap: 5px;
    }

    /**** contact part ****/
    
   div#contact {
        padding-top: 80px;
        padding-bottom: 100px;
        margin: 0;
    }

    div.contact-title {
        font-size: 30px;
        margin-bottom: 20px;
    }

    div.contact-list {
        width: 100%;
        margin: 0;
    }
    div.contact-content {
        width: auto;
    }
    div.contact-type {
        width: 85%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .contact-label {
        font-size: 25px;
        margin-top: 0px;
    }

    .contact-description {
        display: none;
    }

    .contact-icon {
        width: 45px;
        height: 45px;
    }
}

/*** Tablette / Laptop ***/
@media (min-width: 576px) and (max-width: 991.98px) { 
    html, body, #app{
        width: 100%;
    }

    .btn-top-bar {
        display: none;
    }

    p.dev-name {
        font-size: 28px;
    }

    div#top-bar {
        display: flex;
        position: relative;
    }

    div#nav-bar-btn {
        margin-right: 5px;
    }

    .go-next-part-container {
        display: none;
    }

    a.go-next-part {
        display: none;
    }

    div#light-mode-btn {
        gap: 16px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 22px;
        height: 35px;
    }

    div#dark-mode-btn {
        gap: 16px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 22px;
        height: 35px;
    }

    div#light-mode-btn img.icon-35px {
        width: 24px;
        height: 24px;
    }

    div#light-mode-btn img {
        width: 20px;
        height: 20px;
    }

    div#dark-mode-btn img.icon-35px {
        width: 24px;
        height: 24px;
    }
    
    div#dark-mode-btn img {
        width: 20px;
        height: 20px;
    }

    .presentation-personal-image {
        width: 250px;
        height: 250px;
    }

    div#content-presentation {
        padding: 0px 0px 50px 0px;
    }

    p.presentation-title-name {
        font-size: 35px;
    }

    p.presentation-title-text {
        font-size: 25px;
    }

    span.presentation-title-description {
        font-size: 23px;
    }

    /**** competences part ****/

     div#competences{
         padding-top: 80px;
         padding-bottom: 50px;
     }

    div.competences-title {
        font-size: 28px;
    }

    .competences-container {
        width: 100%;
        margin-left: 7%;
        margin-right: 7%;
        display: flex;
    }

    .competences-container .competences-type-label {
        font-size: 25px;
    }

    /**** project part ****/

    div#projets {
        padding-top: 80px;
    }

    div.projects-title {
        font-size: 30px;
        padding-bottom: 20px;
    }

    div.project {   
        display: flex;
        margin-left: 7%;
        margin-right: 7%;
    }

    img.project-img {
        width: 100%;
        height: 100%;
        justify-self: flex-start;
        margin-top: 0px;
    }

    div.project-content-title {
        font-size: 30px;
    }
    span.wip {
        font-size: 20px;
    }

    div.project-content {
        flex-direction: column;
        gap: 20px;
    }

    div.project-content-desc {
        font-size: 18px;
    }
    .project-content-txt-part {
        gap: 5px;
    }

    /**** contact part ****/
    
    div#contact {
        padding-top: 80px;
        margin: 0;
    }

    div.contact-title {
        font-size: 30px;
        margin-bottom: 20px;
    }

    div.contact-list {
        width: 100%;
        margin: 0;
    }
    div.contact-content {
        width: auto;
    }
    div.contact-type {
        width: 65%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .contact-label {
        font-size: 25px;
        margin-top: 0px;
    }

    .contact-description {
        margin-bottom: 0px;
        font-size: 20px;
    }

    .contact-icon {
        width: 45px;
        height: 45px;
    }
}

/*** Laptop L***/
@media (min-width: 992px) and (max-width: 1199.98px) {
    html, body, #app{
        width: 100%;
    }

    .btn-top-bar {
        display: none;
    }

    p.dev-name {
        font-size: 28px;
    }

    div#top-bar {
        display: flex;
        position: relative;
    }

    div#nav-bar-btn {
        margin-right: 5px;
    }

    .go-next-part-container {
        display: none;
    }

    a.go-next-part {
        display: none;
    }

    div#light-mode-btn {
        gap: 16px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 22px;
        height: 35px;
    }

    div#dark-mode-btn {
        gap: 16px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 22px;
        height: 35px;
    }

    div#light-mode-btn img.icon-35px {
        width: 24px;
        height: 24px;
    }

    div#light-mode-btn img {
        width: 20px;
        height: 20px;
    }

    div#dark-mode-btn img.icon-35px {
        width: 24px;
        height: 24px;
    }
    
    div#dark-mode-btn img {
        width: 20px;
        height: 20px;
    }

    .presentation-personal-image {
        width: 250px;
        height: 250px;
    }

    div#content-presentation {
        padding: 0px 0px 50px 0px;
    }

    p.presentation-title-name {
        font-size: 35px;
    }

    p.presentation-title-text {
        font-size: 25px;
    }

    span.presentation-title-description {
        font-size: 23px;
    }

    /**** competences part ****/

     div#competences{
         padding-top: 80px;
         padding-bottom: 50px;
     }

    div.competences-title {
        font-size: 28px;
    }

    .competences-container {
        width: 100%;
        margin-left: 7%;
        margin-right: 7%;
        display: flex;
    }

    .competences-container .competences-type-label {
        font-size: 25px;
    }

    /**** project part ****/

    div#projets {
        padding-top: 80px;
    }

    div.projects-title {
        font-size: 30px;
        padding-bottom: 20px;
    }

    div.project {   
        display: flex;
        margin-left: 7%;
        margin-right: 7%;
        gap: 80px;
    }

    img.project-img {
        width: 80%;
        height: 100%;
        align-self: center;
        margin-top: 0px;
    }

    div.project-content-title {
        font-size: 30px;
    }
    span.wip {
        font-size: 20px;
    }

    div.project-content {
        flex-direction: column;
        gap: 20px;
    }

    div.project-content-desc {
        font-size: 18px;
    }
    .project-content-txt-part {
        gap: 5px;
    }

    /**** contact part ****/
    
    div#contact {
        padding-top: 80px;
        margin: 0;
    }

    div.contact-title {
        font-size: 30px;
        margin-bottom: 20px;
    }

    div.contact-list {
        width: 100%;
        margin: 0;
    }
    div.contact-content {
        width: auto;
    }
    div.contact-type {
        width: 65%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .contact-label {
        font-size: 25px;
        margin-top: 0px;
    }

    .contact-description {
        margin-bottom: 0px;
        font-size: 20px;
    }

    .contact-icon {
        width: 45px;
        height: 45px;
    }
}

@media (min-width: 1200px) and (max-width: 1375px) {
    html, body, #app{
        width: 100%;
    }

    .btn-top-bar {
        display: none;
    }

    p.dev-name {
        font-size: 28px;
    }

    div#top-bar {
        display: flex;
        position: relative;
    }

    div#nav-bar-btn {
        margin-right: 5px;
    }

    .go-next-part-container {
        display: none;
    }

    a.go-next-part {
        display: none;
    }

    div#light-mode-btn {
        gap: 16px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 22px;
        height: 35px;
    }

    div#dark-mode-btn {
        gap: 16px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 22px;
        height: 35px;
    }

    div#light-mode-btn img.icon-35px {
        width: 24px;
        height: 24px;
    }

    div#light-mode-btn img {
        width: 20px;
        height: 20px;
    }

    div#dark-mode-btn img.icon-35px {
        width: 24px;
        height: 24px;
    }
    
    div#dark-mode-btn img {
        width: 20px;
        height: 20px;
    }

    .presentation-personal-image {
        width: 250px;
        height: 250px;
    }

    div#content-presentation {

        padding: 0px 0px 50px 0px;
    }

    p.presentation-title-name {
        font-size: 35px;
    }

    p.presentation-title-text {
        font-size: 25px;
    }

    span.presentation-title-description {
        font-size: 23px;
    }

    /**** competences part ****/

     div#competences{
         padding-top: 80px;
         padding-bottom: 50px;
     }

    div.competences-title {
        font-size: 28px;
    }

    .competences-container {
        width: 100%;
        margin-left: 7%;
        margin-right: 7%;
        display: flex;
    }

    .competences-container .competences-type-label {
        font-size: 25px;
    }

    /**** project part ****/

    div#projets {
        padding-top: 80px;
    }

    div.projects-title {
        font-size: 30px;
        padding-bottom: 20px;
    }

    div.project {   
        display: flex;
        margin-left: 7%;
        margin-right: 7%;
        gap: 80px;
    }

    img.project-img {
        align-self: center;
        margin-top: 0px;
    }

    div.project-content-title {
        font-size: 30px;
    }
    span.wip {
        font-size: 20px;
    }

    div.project-content {
        flex-direction: column;
        gap: 20px;
        
    }

    div.project-content-desc {
        font-size: 18px;
        width: 100%;
        max-width: 100%;
    }
    div.project-content-txt-part {
        gap: 5px;
        width: 100%;
        max-width: 100%;
    }

    /**** contact part ****/
    
    div#contact {
        padding-top: 80px;
        margin: 0;
    }

    div.contact-title {
        font-size: 30px;
        margin-bottom: 20px;
    }

    div.contact-list {
        width: 100%;
        margin: 0;
    }
    div.contact-content {
        width: auto;
    }
    div.contact-type {
        width: 65%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .contact-label {
        font-size: 25px;
        margin-top: 0px;
    }

    .contact-description {
        margin-bottom: 0px;
        font-size: 20px;
    }

    .contact-icon {
        width: 45px;
        height: 45px;
    }
}