portfolio.css

/* fond d'écran */
body {
    background-image: url("img/bliss.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-wrap: wrap;
    min-width: fit-content;
    z-index: -99;
}

/* fenêtre */
.window {
    position: absolute;
    min-width: 27.2%;
    margin-top: 10%;
    margin-left: 35%;
    max-height: 500px; /*a voir pour mettre en %*/
}

.title-bar {
    cursor: move;
}

article[role=tabpanel]{ /*gère le contenu des tabpanels*/
    max-height: 400px; /*a voir pour mettre en %*/
    overflow: scroll;
    height: calc(100% - 44px);
}

/* moi */

.moi img {
    position: absolute;
    top: 5%;
    right: 5%;
    border: 5px solid white;
    border-radius: 4px;
    box-shadow: 2px 2px 5px black;
    width: 20%;
}


/* barre */
/* footer img {
    display: flex;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    z-index: -20;
} */

/* form */
article button {
    margin-top: 2%;
    margin-left: 13%;
}

#text24 {
    border: #7f9db9 solid 1px;
    resize: none;
}

/* texte du bas des sociaux et icons */
.textbas {
position: absolute;
   right: 5%;
   bottom: 5%;
}

.iconsoc1 img {
    position: absolute;
    width: 8%;
    right: 14%;
    bottom: 15%;
}

.iconsoc2 img {
    position: absolute;
    width: 8%;
    right: 5%;
    bottom: 15%;
}

.iconsoc3 img {
    position: absolute;
    width: 8%;
    right: 23%;
    bottom: 15%;
}

/* contient les photos, ul, titres */

.containert {
    display: flex;
    flex-direction: column;
    margin-bottom: 3%;
}

.containert img {
    width: 50%;
}

.containert p {
    font-size: 15px;
    font-weight: bolder;
}

.containert ul {
    display: flex;
    flex-wrap: wrap;
}

/*contient les containers*/

.containerm {
    display: flex;
    flex-direction: row;
    justify-items: center;
}

summary {
    font-weight: bold;
}

summary:hover{
    cursor:pointer;
}

details {
    max-width: 90%;
}

/* test */

.containersp {
    margin-left: 10%;
}

/* barre start */

.btnStart{
    background: url(img/start/001.png);
    background-size: cover;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    
    width: 5.5%;
    height: 4%;
    display: flex;
    position: absolute;
    z-index: 100;

    border: none;
    outline: none;
    box-shadow: none;
    inset: none;
}

.btnStart:not(:disabled):hover{ 
    /*bien respecter les sélecteurs du css sinon ça marche pas.*/
    /*source: 2h30 sur la barre des tâches*/
    background: url(img/start/002.png);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: none;
    inset:none;
    border: none;
    outline: none;
}

 footer button:not(:disabled).active, .btnStart:not(:disabled):active {
    background: url(img/start/003.png);
    background-size: cover;
    background-repeat: no-repeat;

    border: none;
    outline: none;
    box-shadow: none;
    inset: none;
}

footer button.focused, .btnStart:focus{
    
    box-shadow: none;
    inset: none;
    outline: none;
    border: none;
}

footer p{
    z-index: 100;
    color: white;
    
    position: absolute;
    bottom: -0.2%;
    right: 0.6%;

    font-size: small;
}

/* ----------------- */

.barStart{
    background: url(img/start/100.png);
    bottom: 0;
    left: 5%;
    
    height: 4%;
    width: 95%;
    position: absolute;
    display: flex;
    z-index: -99; /*comme ça c derrière le bouton*/
    
}