matheoguilbert.fr_v1/css/projects.css

@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@200;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');

body {
    margin: 0px;
    padding: 0px;
}

.containerBody {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.container-container {
    scroll-snap-align: center;
}

header {
    position: relative;
}

.projectName-container {
    width: fit-content;
    position: absolute;
    right: 42px;
    top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.name h1 {
    margin: 0px;
    color: #f1f1f1;
    font-size: 5rem;
}

.space {
    width: 100px;
}

.logo {
    display: flex;
    flex-direction: column;

}

.logo img {
    width: 150px;
    height: 150px;
}

.logo p {
    margin: 0px;
    font-size: 2em;
    font-family: 'Source Code Pro', monospace;
    font-weight: 900;
}

.htmlLogo {
    color: #ff7700;
}

.cssLogo {
    color: rgb(0, 170, 255);
}

.projetITLogo {
    color: #f1f1f1;
}

/**/

.spaceLabTitle-container {
    height: 100vh;
    display: flex;
    justify-content: center;
}

#sltc1 {
    background-image: url("../img/bgSpace.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 25%;
}

#sltc2 {
    background-image: url("../img/bgCodeHtmlFlou.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#sltc3 {
    background-image: url("../img/bgProjetIT_sombre.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.spaceLabTitle-container h1 {
    font-size: clamp(4rem, 8vw, 7rem);
    display: flex;
    align-items: center;
    color: #f1f1f1;
    -webkit-text-stroke: 2px #111;
    font-family: 'Tilt Warp', cursive;
}

.spaceLabTitle-container p {
    display: flex;
    align-items: center;
}

.desc-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.black {
    background-color: #111;
    color: #f1f1f1;
}

.white {
    background-color: white;
    color: #111;

}

.imgRight {
    width: 30%;
    height: 70%;
    border-radius: 30px;
    box-shadow: 30px -20px 10px rgb(186, 186, 186);
    display: flex;
    justify-content: center;
    align-items: center;
}

#imgAstroPi1 {
    background-image: url('../img/imgCodePython.jpg');
}

#imgAstroPi2 {
    background-image: url('../img/Hyrome1.jpg');
    background-size: cover;
    background-position: 50%;
}

#imgAstroPi3 {
    background-image: url('../img/knnImg.jpg');
    background-size: cover;
    background-position: 90%;
}

#imgPortfolio1 {
    background-image: url('../img/imgPortfolioMouvementUn.jpg');
    background-size: cover;
    background-position: 90%;
}

#imgPortfolio2 {
    background-image: url('../img/imgCodeWeb.jpg');
    background-size: cover;
    background-position: 90%;
}

#imgProjetIT1 {
    background-image: url('../img/imgProjetIT_num1.jpg');
    background-size: cover;
    background-position: 22%;
}

#imgProjetIT2 {
    background-image: url('../img/bgProjetIT_num1.jpg');
    background-size: cover;
    background-position: 50%;
}

.descText {
    width: 40%;
    margin-right: 5%;
}

.descText h2 {
    color: #ff7700;
    font-size: 2.5em;
    font-weight: bold;
    font: italic;
    font-family: 'Source Code Pro', monospace;
}

.descText p {
    font-size: clamp(15px, 5vw, 30px);
    font-family: 'Source Code Pro', monospace;
    text-align: justify;
}

.descText p a {
    text-decoration: underline;
}

.descText button {
    background-color: #fff;
    border-radius: 5px;
    border-style: none;
    padding: 10px;
    color: #111;
    font-size: 2em;
    font-family: 'Aboreto', cursive;
    text-decoration: none;
}

.descText button:hover {
    background-color: transparent;
    border: solid 3px;
    border-color: #f1f1f1;
    color: #f1f1f1;
}

.descText button a {
    text-decoration: none;
    color: #111;
}

.descText button a:hover {
    color: #f1f1f1;
}


@media screen and (max-width:1023px) {
    .projectName-container {
        visibility: hidden;
    }

    .spaceLabTitle-container h1 {
        margin-left: 10%;
        margin-right: 10%;
    }
}

@media screen and (max-width:1375px) {
    .name {
        visibility: hidden;
    }

    #sltc1 {
        background-position: 80%;
    }

    .imgRight {
        visibility: hidden;
        width: 0px;
        height: 0px;
    }

    .descText {
        width: 100%;
        height: fit-content;
        margin-left: 5%;
    }
}