@import url('https://fonts.googleapis.com/css2?family=Cascadia+Mono:ital,wght@0,200..700;1,200..700&family=Jost:ital,wght@0,100..900;1,100..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: #bf93ee;
    background: linear-gradient(0deg, #bf93ee -30%, rgba(73, 77, 95, 1) 47%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin-bottom: 2%;
    align-items: center;
    gap: 3vh;

    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

}

top-bar {
    width: 100%;
    font-size: 2em;
    background: linear-gradient(0deg, #BF93EE 83%, rgba(73, 77, 95, 1) 106%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: white;
    display: flex;
    flex-direction: row;
    gap: 2vw;
    justify-content: center;
    padding-top: 1vh;
    padding-bottom: 1vh;
    box-shadow: 5px 3px 20px 0px #000;
    position: fixed;
    z-index: 10;
}

top-bar > a{
    text-decoration: none;
    color:white;
    width: 7vh;
}

top-bar > *{
    cursor:pointer;
}

aboutme {
    width: 90%;
    height: 86vh;
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    display: flex;
    flex-direction: row;
    box-shadow: 5px 3px 20px 0px #000;
    margin-top: 11vh;
}

aboutme::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff7d;
    filter: blur(170px);
    z-index: 0;
    box-shadow: 5px 3px 20px 0px #000;
}

#profilCard {
    position: relative;
    z-index: 1;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #494d5fd9;
    margin: 3%;
    border-radius: 28px;
    gap: 3%;
    box-shadow: 5px 3px 20px 0px #000;
    border: 2px solid black;
}

.picture {
    border-radius: 100%;
    width: 55%;
    margin-top: 10%;
}

#name {
    font-size: 5vh;
    color: white;
}

#age {
    color: white;
    font-size: 4vh;
}

#contact {
    display: flex;
    flex-direction: row;
    gap: 14%;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#contact a {
    width: 15%;
    height: 35%;
    background-repeat: no-repeat;
    background-size: contain;
}

#github {
    background-image: url('images/github.svg');
}

#itchio {
    background-image: url('images/itch_icon_146025.png');
}

#mail {
    background-image: url('images/Mail.svg');
}

#linkedin {
    background-image: url('images/LinkedIn.svg');
}

#resume {
    width: 70%;
    position: relative;
    z-index: 1;
    margin: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 7%;
}

#resume #text {
    color: white;
    font-size: 2.5vh;
    background-color: #494d5fd9;
    border-radius: 28px;
    box-shadow: 5px 3px 20px 0px #000;
    padding: 3%;
    border: 2px solid black;
}

#resume #titleSkills {
    color: white;
    font-size: 2em;
}

#skillsIco {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4vh;
}

#skillsIco div {
    width: 8%;
    height: 66%;
    background-repeat: no-repeat;
    background-size: contain;
}

#skills {
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#cmake {
    background-image: url('images/Cmake.svg');
    margin-left: 0vh;
}

#cpp {
    background-image: url('images/cpp.svg');
    height: 67% !important;
    width: 7% !important;
    !i;
    !;
}

#csharp {
    background-image: url('images/csharp.svg');
    height: 67% !important;
    width: 7% !important;
    !i;
    !;
}

#sfml {
    background-image: url('images/sfml.svg');
}

#unity {
    background-image: url('images/unity.svg');
}

#ue5 {
    background-image: url('images/UE5.svg');
}

#opengl {
    background-image: url('images/opengl.svg');
    width: 20vh !important;
}

#git {
    background-image: url('images/git.svg');
}

#svn {
    background-image: url('images/svn.svg');
}

title-bar {
    font-size: clamp(1rem, 3vw + 0rem, 2.5rem);
    color: white;
    font-weight: bold;
    /* padding-top: 8vh; */
    border-bottom: 2px solid white;
    width: 80%;
    text-align: center;
    z-index: 5;
}

projects {
    width: 85%;
    /* height: 74vh; */
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    display: flex;
    flex-direction: row;
    box-shadow: 5px 3px 20px 0px #000;
    margin-bottom: 11vh;
    /* flex-wrap: wrap; */
    /* flex-wrap: wrap; */
    transition-property: height, margin;
    transition-duration: 0.7s;
    padding-top: 1%;
    min-height: 68vh;
    flex-wrap: wrap;
}

projects:has(.projectCard:nth-child(3n + 1):last-child) {
    justify-content: center;
    width: 33%;
}

projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff7d;
    filter: blur(170px);
    z-index: 0;
    box-shadow: 5px 3px 20px 0px #000;
}

.presentationPic {
    border-radius: 28px;
    margin-top: 0%;
    object-fit: cover;
    height: 100%;
    width: 100%;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: -2;
    pointer-events: none;
}

.projectCard {
    position: relative;
    /* width: 30%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #494d5fd9;
    margin: 2%;
    border-radius: 28px;
    gap: 3%;
    box-shadow: 5px 3px 20px 0px #000;
    transition-property: width, margin;
    transition-duration: 0.7s;
    cursor: pointer;
    flex-grow: 1;
    width: 24%;
    height: 64vh;
    border: 2px solid black;
    container-type: size;
}

.projectTitle {
    font-size: clamp(1rem, 1.3vw + 0rem, 2.5rem);
    color: white;
    text-decoration: underline;
    font-style: italic;
}

.projectResume {
    color: white;
    font-size: 3.8cqw;
    text-align: center;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 4%;
    transition-property: font-size;
    /* transition-duration: 0.1s; */
}

.presentationPicContainer {
    box-shadow: inset 5px 3px 20px 0px #000;
    border-radius: 28px;
    margin-top: 6%;
    object-fit: cover;
    height: 44%;
    width: 84%;
    pointer-events: none;
    z-index: 1;
}

.projectCard:hover {
    width: 35%;
    /* margin-top: 1.5%; */
    /* margin-bottom: 1.5%; */
}

.more {
    position: fixed;
    padding: 6px 10px;
    background-color: #494d5f;
    color: white;
    border-radius: 13px;
    font-size: clamp(1rem, 1.2vw + 0rem, 1.3rem);
    pointer-events: none;
    white-space: nowrap;
    z-index: 1000;
    display: none;
    border: 3px solid white;
}

filtres {
    display: flex;
    flex-direction: column;
    gap: 9px;
    /* font-size: clamp(1rem, 1.2vw + 0rem, 1.3rem); */
    position: fixed;
    z-index: 6;
    padding-top: 16vh;
    left: 1%;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s linear;
}

filtres>button {
    font-size: clamp(1rem, 0.3vw + 0rem, 1.3rem);
    border-radius: 9px;
    border: none;
    padding: 5px;
    border: 2px solid black;
}

.notSelected {
    filter: contrast(0.5);
}

.categories {
    display: flex;
    flex-direction: row;
    position: absolute;
    width: 78%;
    height: 3vh;
    z-index: 0;
    top: -3vh;
    gap: 3%;
    justify-content: center;
}

.categories>div {
    height: 100%;
    width: 36px;
    border-top-right-radius: 17px;
    border-top-left-radius: 17px;
    /* box-shadow: 9px 1px 20px 0px #000; */
    border: 2px solid black;
    border-bottom: 2px solid #484c5b;
}

.hide {
    visibility: hidden;
    opacity: 0;
    height: 0 !important;
}

project-page {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 59%);
    z-index: 27;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
}

project-page>overlay {
    color: white;
    font-size: clamp(1rem, 2vw + -1rem, 1.5rem);
    background-color: #494d5f;
    border-radius: 28px;
    box-shadow: 5px 3px 20px 0px #000;
    padding: 3%;
    border: 2px solid black;
    position: absolute;
    width: 86%;
    height: 79%;
    z-index: 1;
    overflow: overlay;
}

leave {
    position: absolute;
    width: 3%;
    height: 6%;
    font-size: 2em;
    z-index: 2;
    text-align: center;
    vertical-align: middle;
    top: 3%;
    right: 3%;
    background-color: #FA9189;
    border-radius: 30px;
    /* box-shadow: inset 5px 3px 20px 0px #000; */
    box-shadow: 5px 3px 20px 0px #000;
    border: 2px solid black;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 700px) {

    /* Styles */
    body {}

    top-bar {
        font-size: 3vh;
        gap: 5vh;
        justify-content: ;
    }

    aboutme {
        height: 91vh;
        flex-direction: column;
        width: 94%;
        margin-top: 8vh;
        align-items: center;
    }

    aboutme::before {}

    #profilCard {
        width: 93%;
        justify-content: center;
        align-items: center;
        height: auto;
        gap: 1vh;
        padding-top: 1vh;
        padding-bottom: 2vh;
    }

    .picture {
        width: 25%;
        margin-top: 1%;
    }

    #name {
        font-size: 3vh;
    }

    #age {
        font-size: 2vh;
    }

    #contact {
        height: auto;
        gap: 9vh;
    }

    #contact a {
        width: 5vh;
        height: 5vh;
    }

    #github {}

    #mail {}

    #linkedin {}


    #resume {
        width: auto;
        height: auto;
    }

    #resume #text {
        font-size: 1.4vh;
        text-align: center;
    }

    #resume #titleSkills {
        font-size: 2vh;
    }

    #skillsIco {
        /* height: auto; */
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        width: 30vh;
        gap: 3vh;
        justify-items: center;
    }

    #skillsIco div {
        height: 5vh;
        width: 5vh;
    }

    #skills {
        height: 2vh;
    }

    #cmake {}

    #cpp {
        height: 5vh !important;
        width: 4.4vh !important;
    }

    #csharp {
        height: 5vh !important;
        width: 4.4vh !important;
    }

    #sfml {}

    #unity {}

    #ue5 {
        /* height: 5vh !important; */
        /* width: 4.4vh !important; */
    }

    #opengl {
        width: 11vh !important;
        margin-left: 12vh;
    }

    #git {}

    #svn {
        margin-left: 10vh;
    }

    title-bar {
    font-size: 3vh;
}

    projects {
    display: flex;
    grid-template-columns: auto;
    width: 94%;
    flex-direction: row;
    justify-items: center;
    padding-top: 3vh !important;
    gap: 5vh;
    min-height: 61vh;
}

    projects:has(.projectCard:nth-child(3n + 1):last-child) {}

    projects::before {}

    .presentationPic {}

    .projectCard {
    width: 85%;
    height: 63vh;
    /* gap: 1vh; */
    margin: 3vh;
}

    .projectTitle {
    font-size: 2.5vh;
}

    .projectResume {
    font-size: 2vh;
}

    .presentationPicContainer {}

    .projectCard:hover {
    width: 85%;
    margin-top: 3vh;
    margin-bottom: 3vh;
}

    .more {
    display: none;
}

    filtres {
    flex-direction: row;
    /* position: absolute; */
    bottom: 2vh;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 1vh;
    transition: none;
}

    filtres>button {
    font-size: 1.4vh;
    font-weight: bold;
}

    .notSelected {}

    .categories {/* width: 53%; *//* height: 3vh; */}

    .categories>div {
    width: 3vh;
}

    .hide {
    display: none;
}

    project-page {}

    project-page>overlay {}

    leave {
    width: 5vh;
    height: 5vh;
    font-size: 3vh;
    top: 8vh;
    border-radius: 3vh;
}
}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */

}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    /* Styles */

}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */

}

overlay > content {
    display: flex;
    flex-direction: column;
}

title{
    display: block;
    font-size: 4vh;
    text-align: center;
}

projects > .projectCard:last-of-type {
    margin-right: 63vh;
    margin-left: 63vh;
}

info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 4vh;
}

title {
    font-size: 3em;
}

info a {
    width: 100px;
    height: 70px;
    background-repeat: no-repeat;
    background-size: contain;
}

body.no-scroll {
  overflow: hidden;
}