*{
    margin: 0;
}

body{
    background: rgb(21, 30, 35);
}

#codeBody{
    background: linear-gradient(00.75turn,rgb(48, 83, 95),rgb(21, 59, 71));
    text-align: center;
}

body::-webkit-scrollbar{
    display:none;
}



#lock{
    position: fixed;
    z-index: -1000;
    width: 100%;
}

.modelTitle{
    color: rgb(254, 238, 238);
    font-size: 5vw;
    text-align: center;
    margin-top: 2vh;
}

.secondBloc{
    margin-top: 3vw;
    width: 46%;
    height: 63vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8vw;
    box-shadow: inset 0.5em 0.5em 1em black;
    background: linear-gradient(00.75turn,rgb(116, 62, 91),rgb(109, 58, 0));
}

#model1,#model2{
    transition:.2s;
    position: relative;
    background-color: rgba(255, 255, 255, 0.3);
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vh;
    width: 40vw;
    height: 24vh;
    border-radius: 6vw;
    border-style:dotted;
    border-color: white;
    filter: drop-shadow(0.5em 0.5em 1em black);
    cursor: pointer;
}

#model1:hover,#model2:hover{
    transition:.3s;
    transform: scale(0.95);
    filter: drop-shadow(0.1em 0.1em 0.5em black)
}

#model1IMG{
    width: 40vw;
    height: 20vh;
}

#modelIMG1{
    transition:.2s;
    margin-top: 2.5vw;
    margin-left: 4vw;
    width: 30vw;
    filter: drop-shadow(0em 0em 0em rgb(42, 41, 41))
}

#modelIMG2{
    transition:.2s;
    margin-top: 1vw;
    margin-left: 2vw;
    width: 35vw;
    filter: drop-shadow(0em 0em 0em rgb(71, 63, 63))
}

#model1:hover #modelIMG1,#model2:hover #modelIMG2{
    transition:.3s;
    transform: scale(1.2);
    filter: drop-shadow(0.3em 0.3em 0.3em rgb(71, 63, 63))
}

.modelTXT{
    transition:.2s;
    position:absolute;
    border-radius: 2vw;
    background-color: black;
    color:whitesmoke;
    font-size: 1.5vw;
    top: 75%;
    left: 32%;
}

#model1:hover #modelTXT,#model2:hover #modelTXT{
    transition:.3s;
    opacity: 0.8;
}

#modelArticle{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    bottom: -90%;
}

#modelArticleTitre{
    background-color: rgb(75, 89, 96);
    width: 20%;
    left: 10vw;
    padding-left: 1vw;
    padding-right: 1vw;
    border-radius: 3vw 3vw 0 0;
    font-size: 2vw;
    cursor: pointer;
}

#modelArticleContent{
    background-color: rgb(75, 89, 96);
    height: 100%;
    text-align: center;
}

section.vid1,section.vid2{
    margin-top: 5vh;
    height: 400vh;
}

.holder1,.holder2{
    position: sticky;
    top: 0;
}

#v1,#v2{
    width: 100%;
}

#skipTo2{
    position: absolute;
    right: 6vw;
    top: 25vh;
    background-color: rgb(45, 99, 94);
    border-radius: 5vw;
    border-width: 0.3vw;
    border-style:groove;
    border-color: rgb(0, 1, 0);
    padding: 0.5svw;
    cursor: pointer;
}

#skipTo2:hover{
    background-color: rgb(70, 135, 129);
}

#modelArticleFusion1{
    margin-bottom: 30vh;
}

#modelArticleFusion2{
    position: relative;
}

#modelArticleFusion2,#modelArticleFusion3{
    background-color: rgb(15, 15, 17);
}

#modelArticleFusion2 h1{
    position: absolute;
    color: white;
    font-size: 4vh;
    top: 4vh;
    left: 20vw;
}

#modelArticleFusion2 h2{
    position: absolute;
    color: white;
    font-size: 8vw;
    top: 5vh;
    left: 20vw;
    opacity: 0.4;
}

#modelArticleFusion2 video{
    margin-top: -10vh;
    z-index: -100;
}

#underTxt1{
    margin-top: 260vh;
}

#modelArticleFusion2 p{
    position: sticky;
    color: rgb(176, 201, 200);
    font-size: 1.5vw;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    bottom: 5vh;
    width: 30vw;
}

#modelArticleFusion2 .firstTxt{
    margin-bottom: -12vh;
    left: 2vw;
}

#modelArticleFusion2 .secondTxt{
    left: 40vw;
}

#modelArticleFusion3 h1{
    position: absolute;
    color: white;
    font-size: 4vh;
    top: 4vh;
    left: 20vw;
}

#modelArticleFusion3 h2{
    position: absolute;
    color: white;
    font-size: 8vw;
    top: 5vh;
    left: 20vw;
    opacity: 0.4;
}

#modelArticleFusion3 video{
    margin-top: -16vh;
}

#underTxt2{
    position: sticky;
    margin-top: 100vh;
    margin-left: 30%;
}

#modelArticleFusion3 p,#modelArticleFusion3 h3{
    color: rgb(176, 201, 200);
    font-size: 1.5vw;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    bottom: 5vh;
    width: 30vw;
}

#modelArticleFusion3 .firstTxt{
    margin-bottom: 5vh;
}

#modelArticleFusion3 .secondTxt{
    margin-bottom: 5vh;
}
#modelArticleFusion3 .thirdTxt{
    margin-bottom: 5vh
}

#modelArticleFusionError p{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

#modelArticleFusionError img{
    margin-top: 10vh;
    width: 20vw;
}

#modelArticleBlender{
    background-color: rgb(176, 201, 200);
}

#modelArticleBlender1{
    margin-bottom: 5vh;
}

.modelIMGblender{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5vh;
}

.modelIMGblender img, .modelIMGblender video{
    width: 20vw;
    border-radius: 1vw;
    margin-left: 30vh;
}

#modelDownPageButtons{
    display: flex;
    justify-content: center;
    margin-top: -20vh;
    padding-bottom: 8vh;
}

button{
    cursor: pointer;
}

#modelReturn{
    position: absolute;
    top: 50%;
    left: 90%;
    padding-left: 3vw;
    padding-right: 2vw;
    padding-top: 2vh;
    padding-bottom: 2vh;
    border-radius: 5vw;
    cursor: pointer;
    background-color: rgb(21, 30, 35);
}

#modelReturn:hover{
    filter: drop-shadow(0em  0em 1em black)
}

#modelReturnTriangle{
    display: inline-block;
    height: 0;
    width: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 56px solid rgb(118, 117, 125);
}

#modelReturn:hover #modelReturnTriangle{
    border-left: 56px solid rgb(143, 155, 189);
}



#etatModel{
    position: absolute;
    left: 5vw;
    font-size: 0.8vw;
    background-color: rgb(27, 27, 27);
    margin-top: 10vh;
    padding: 1vw;
    border-radius: 1vw;
    user-select: none;
    cursor:default;
}

#etatModelTxt{
    margin-top: 1vh;
    background-color: rgb(19, 113, 185);
    border-color: rgb(4, 26, 40);
    border-radius: 0.5vw;
    border-width: 5px;
    border-style: outset;
    font-size: 2vw;
    padding-left: 1vw;
    padding-right: 1vw;
}

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 15vh;
    background: rgb(9, 15, 19);
    filter: drop-shadow(10px 5px 10px black);
    text-align: center;
    z-index: 1000;
    user-select: none;
}

#headerArticle{
    font-size: 2vw;
    background: rgb(9, 15, 19);
    width: 30vw;
    height: 10vh;
    margin-top: -3vh;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1vh;
    border-radius: 0px 0px 3vw 3vw;
    opacity: 0;
}

#headerArticle h1{
    color: rgb(157, 196, 212);
}

#slider{
    position: relative;
    margin-top: 10vw;
    width: 100%;
    height: 20px;
    user-select: none;
}

#slider:hover #precedent,#slider:hover #suivant{
    opacity: 1;
}

#slide1,#slide3{
    height: 200px;
    width: auto;
    filter: drop-shadow(10px 5px 10px);
    transform: translate(0,0);
    z-index: -1000;
}

#slide2{
    height: 300px;
    width: auto;
    filter: drop-shadow(50px 25px 10px);
}

#precImage{
    position: absolute;
    left: 18vw;
    top:50px;
}

#image{
    left: auto;
    right: auto;
}

#nextImage{
    position: absolute;
    right: 18vw;
    top:50px;
}

#precedent, #suivant{
    position: absolute;
    font-size: 100px;
    top: 100px;
    background-color: rgba(0,0,0,0.8);
    color: white;
    border-radius: 200px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    user-select: none;
}

#precedent{
    left: 20vw;
    padding-left: 27px;
    padding-right: 33px;
}

#suivant{
    right: 20vw;
    padding-left: 33px;
    padding-right: 27px;
}

#Article{
    filter: drop-shadow(10px 5px 10px);
}

#hautArticle{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 30vw;
    background: rgb(21, 30, 35);
    border-radius: 4vw 4vw 0px 0px;
}

#titreArticle{
    color: rgb(157, 196, 212);
    margin-top: 400px;
    font-size: 6vw;
}

#typeArticle{
    position: absolute;
    top: 70%;
    left: 95%;
    z-index: 1000;
    font-size: 2vw;
    background-color: rgb(61, 75, 91);
    color: rgb(174, 191, 211);
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.basArticle{
    position:relative;
    background: rgb(21, 30, 35);
}

#whatsAbout{
    position: absolute;
    right: 3vw;
    font-size: 0.7vw;
    margin-top: 8vh;
}

#whatsAboutTxt{
    background-color: rgb(44, 104, 157);
    font-size: 1.6vw;
    padding-left: 1vw;
    padding-right: 1vw;
    border-radius: 1vw;
    padding-bottom: 0.2vw;
}

#etatProjet{
    position: absolute;
    right: 5vw;
    font-size: 0.8vw;
    background-color: rgb(36, 67, 62);
    margin-top: 20vh;
    padding: 1vw;
    border-radius: 1vw;
}

#etatProjetTxt{
    margin-top: 1vh;
    background-color: rgb(37, 117, 23);
    border-color: rgb(23, 66, 10);
    border-radius: 0.5vw;
    border-width: 5px;
    border-style: outset;
    font-size: 2vw;
    padding-left: 1vw;
    padding-right: 1vw;
}

.classic{
    width: 40%;
    padding-top: 5vh;
    margin-left: auto;
    margin-right: auto;
}

#articleBowling2A{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8vh;
    margin-bottom: 3vh;
    padding-top: 2vh;
    margin-right: 3vw;
    text-align: left;
}

#articleBowling2A h1{
    text-align: left;
}

#articleBowling2A p{
    width: 30vw;
    margin-top: 1vh;
    margin-right: 3vw;
}

#articleBowling2A img{
    border-radius: 1vw;
    width: 30vw;
}

#articleBowling2B{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2vh;
    margin-left: -3vw;
}

#articleBowling2B img{
    width: 30vw;
    border-radius: 1vw;
}

#articleBowling2B p{
    text-align: left;
    width: 30vw;
    margin-left: 3vw;
}

#articleBowling3{
    margin-top: 10vh;
    margin-bottom: 10vh;
}

#articleBowling3row{
    display: flex;
    justify-content: center;
}

#articleBowling3img1,#articleBowling3img2,#articleBowling3img3{
    width: 20%;
}

#articleBowling3img1 img,#articleBowling3img2 img,#articleBowling3img3 img{
    width: 90%;
    height: 15vw;
    border-radius: 2vw;
    border-color: white;
    border-width: 0.3vw;
    border-style:double;
    overflow: hidden;
}

#articleBowling3img1 p,#articleBowling3img2 p,#articleBowling3img3 p{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

#articlePrincessQuest2L{
    position: absolute;
    width: 30vw;
    top: 45vh;
    left: 0vw;
}

#articlePrincessQuest2R{
    position: absolute;
    width: 30vw;
    top: 45vh;
    right: 5vw;
}

#articlePrincessQuest2L img,#articlePrincessQuest2R img{
    margin-top: -10vh;
    margin-right: -5vw;
    width: 15vw;
}

#articlePrincessQuest4B{
    display: flex;
    justify-content: center;
    margin-top: 2vh;
}

#articlePrincessQuest4BL,#articlePrincessQuest4BR{
    width: 40%;
    text-align: left;
    margin-left: 2vw;
    margin-right: 2vw;
}

#articlePrincessQuest4BL h1{
    text-align: right;
}

#articlePrincessQuest4BR h1{
    text-align: left;
}

#projetOpen{
    color: rgb(85, 171, 106);
    cursor: pointer;
}

#projetOpen:hover{
    color: rgb(41, 147, 163);
}

#articleTkinter2A,#articleTkinter2B{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30vh;
    margin-top: 3vh;
}

#articleTkinter2A img,#articleTkinter2B img{
    width: 16vw;
    height: 10vw;
    overflow: hidden;
}

#articleTkinter2A p,#articleTkinter2B p{
    color: white;
    width: 20vw;
    text-align: left;
}

#articleSite2,#articleSite3,#articleSite4,#articleSite5,#articleSite6{
    margin-top: 5vh;
}

#articleSite2 p,#articleSite3 p,#articleSite4 p,#articleSite5 p,#articleSite6 p{
    width: 30%;
    margin-left: auto;
    margin-right: auto;
}

#articleSite5 img,#articleSite6 img{
    width: 30vw;
    border-radius: 2vw;
    margin-top: 2vh;
}

#articleSite5 img{
    border-width: 0.2vw;
    border-color: rgb(169, 186, 201);
    border-style: dashed;
}

.imgSite1{
    width: 25vw;
    margin-top: 3vh;
    margin-right: 1vw;
    margin-left : 1vw;
    border-radius: 1vw;
}

.imgSite2{
    width: 20vw;
    margin-top: 2vh;
    margin-right: 1vw;
    margin-left : 1vw;
    border-radius: 1vw;
}

.titreArticle{
    color: rgb(125, 165, 181);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 3vw;
}

.content{
    color: rgb(195, 213, 219);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.5vw;
}

.articlesTkinter{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 7vh;
    margin-left: auto;
    margin-right: auto;
    width: 50vw;
    text-align: left;
}

.imgTkinter{
    width: 20vw;
    height: 20vw;
    margin-right: 5vw;
    border-radius: 2vw;
}

#basArticle img{
    width: 30vw;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

#renduFinalVideo{
    width: 50vw;
    margin-top: 2vh;
    border-radius: 2vw;
}

#ligne{
    background-color: white;
    height: 1px;
    width: 80%;
    margin-top: 8vh;
    margin-left: auto;
    margin-right: auto;
}

#codeDownPageButtons{
    display: flex;
    justify-content: center;
    padding-top: 8vh;
    padding-bottom: 8vh;
}

#projectDownloadButton{
    transition: 0.5s;
    margin-top: 2vh;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    border-radius: 2vw 0 0 2vw;
    border-width: 0.4vw;
    border-color: rgb(23, 82, 73);
    color: white;
    font-size: 1vw;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background: rgb(23, 82, 73);
    opacity: 0.8;
}

#codeAllDownloadButton{
    transition: 0.5s;
    margin-top: 2vh;
    border-width: 0.4vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    border-color: rgb(173, 24, 99);
    color: white;
    font-size: 1vw;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background: rgb(173, 24, 99);
    opacity: 0.8;
}

#codeCloseArticleButton{
    transition: 0.5s;
    margin-top: 2vh;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    border-radius: 0 2vw 2vw 0;
    border-width: 0.4vw;
    border-color: rgb(0, 71, 95);
    color: white;
    font-size: 1vw;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background: rgb(0, 71, 95);
    opacity: 0.8;
}

.downPageButton{
    position: relative;
    display: flex;
}

#codeSaveSymbol1{
    transition: 0.1s;
    position: absolute;
    bottom: 3vh;
    right: 30%;
    width: 3vw;
    opacity: 0;
}

#codeSaveSymbol2{
    transition: 0.1s;
    position: absolute;
    bottom: 3vh;
    right: 40%;
    width: 3vw;
    opacity: 0;
}

#codeUpSymbol{
    transition: 0.1s;
    position: absolute;
    bottom: 3vh;
    right: 30%;
    width: 3vw;
    opacity: 0;
}

#projectDownloadButton:hover,#codeAllDownloadButton:hover,#codeCloseArticleButton:hover{
    transition: 0.1s;
    border-color: rgb(157, 183, 186);
}

.downPageButton:hover #codeSaveSymbol1,.downPageButton:hover #codeSaveSymbol2,.downPageButton:hover #codeUpSymbol{
    transition: 0.2s;
    bottom: 6vh;
    opacity: 1;
}

#codeReturn{
    position: absolute;
    top: 50%;
    left: 3%;
    padding-left: 2vw;
    padding-right: 3vw;
    padding-top: 2vh;
    padding-bottom: 2vh;
    border-radius: 5vw;
    cursor: pointer;
    background-color: rgb(21, 59, 71,0);
}

#codeReturn:hover{
    filter: drop-shadow(0.5em 0.5em 1em black);
    background-color: rgb(21, 59, 71,1);
}

#codeReturnTriangle{
    display: inline-block;
    height: 0;
    width: 0;
    border-top: 3vw solid transparent;
    border-bottom: 3vw solid transparent;
    border-right: 3.4vw solid rgb(87, 132, 150);
}

#codeReturn:hover #codeReturnTriangle{
    border-right: 3.4vw solid rgb(135, 144, 168);
}


h1,h3{
    text-align: center;
    color:rgb(215, 226, 236);
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.title{
    font-size: 8vw;
}

.secondTitle{
    color: rgb(138, 169, 183);
    font-size: 5vw;
    text-align: center;
}

.buttons{
    margin-top: 10vh;
    display:flex;
    justify-content: center;
}

.btn{
    position: relative;
    transition: 0.2s;
    background-color: rgb(188, 209, 217);
    width: 40vw;
    height: 40vh;
    overflow: hidden;
    cursor: pointer;
}

#btn1{
    border-radius:  3vw 0 0 3vw;
    border-left: 1vw;
    border-right: 0;
    border-style: groove;
    border-color: rgb(139, 120, 130);
}

#btn2{
    border-radius: 0 3vw 3vw 0;
    border-right: 1vw;
    border-left: 0;
    border-style: groove;
    border-color: rgb(100, 124, 143);
}

#btn1:hover{
    transition: 0.1s;
    border-radius: 3vw;
    background-color: rgb(82, 98, 100);
    z-index: 100;
    border-width: 0.3vw;
    filter: drop-shadow(0 0 2rem);
    transform: scale(1.1);
}

#btn2:hover{
    transition: 0.1s;
    border-radius: 3vw;
    background-color: rgb(82, 98, 100);
    z-index: 100;
    border-width: 0.3vw;
    filter: drop-shadow(0 0 2rem);
    transform: scale(1.1);
}

#txtBtn1{
    transition: 0.1s;
    position: absolute;
    font-size: 15vw;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(195, 169, 183);
    top: 4%;
    right: 11vw;
    z-index: 1000;
    filter: drop-shadow(5px 5px 10px black);
}

#txtBtn2{
    transition: 0.1s;
    position: absolute;
    font-size: 12vw;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(133, 165, 190);
    top: 11%;
    left: 6vw;
    z-index: 1000;
    filter: drop-shadow(5px 5px 10px rgb(0, 0, 0));
}

#btn1:hover #txtBtn1{
    transition: 0.2s;
    opacity: 0.5;
    color:black;
}

#btn2:hover #txtBtn2{
    transition: 0.2s;
    opacity: 0.5;
    color:black;
}

.presentationVideo{
    width: 45vw;
    margin-left: -10px;
    margin-top: -5px;
    filter: blur(4px)
}

.btn:hover .presentationVideo{
    filter: blur(0)
}

@media (max-width: 800px) {
    body{
        background: linear-gradient(00.80turn,rgb(151, 64, 1),rgb(17, 144, 212));
    }

    .secondTitle{
        font-size: 10vw;
    }

    .secondBloc{
        display: block;
    }

    #model1,#model2{
        width: 80vw;
        height: 30vh;
    }


    #slider{
        margin-top: 10vh;
    }

    #precedent{
        top: 20vh;
        left: 10vw;
    }
    
    #suivant{
        top: 20vh;
        right: 10vw;
    }

    #precImage{
        left:6vw;
    }
    
    #image{
        left: auto;
        right: auto;
    }
    
    #nextImage{
        right: 6vw;
    }

    #slide1,#slide3{
        height: 100px;
    }
    
    #slide2{
        height: 200px;
    }

    #hautArticle{
        width: 60vw;
    }

    #titreArticle{
        font-size: 13vw;
    }
    
    #typeArticle{
        position: absolute;
        top: 70%;
        left: 95%;
        font-size: 2vw;
        background-color: grey;
        border-radius: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

}