@font-face {
    font-family: 'goozette';
    src: url('fonts/Goozette.otf');
}

@font-face {
    font-family: 'lb';
    src: url('fonts/LibreBaskerville-Regular.ttf');
}

@font-face {
    font-family: 'lb';
    src: url('fonts/LibreBaskerville-Italic.ttf');
    font-style: italic;
}
@font-face {
    font-family: 'lb';
    src: url('fonts/LibreBaskerville-Bold.ttf');
    font-weight: bold;
}
:root {
    --accent-color :rgb(226, 53, 53) ;
    --background-color: rgb(229, 229, 229) ;
    --main-color : rgb(0, 0, 0) ;
    --title-font : 'goozette' ;
    --main-font : 'lb' ;



}

::-moz-selection{
    background-color : var(--background-color);
    color : var(--accent-color)
  }

  

body {
    display: flex;
    font-family: var(--main-font);
    flex-direction: column;
    margin: 0;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    background-color: var(--background-color);
    color: var(--main-color);

}

header {
    width: 70%;
    margin-left: 1em;
}
h1 {
    font-family: var(--title-font);
    font-size: 3em;
    margin-bottom: 0px;
}


.titlediv::marker {
    color: var(--accent-color);
}

.titlediv {
    display: list-item;
    list-style: '✧';
}
footer {
    margin-top: auto;
    bottom: 0vw;
    padding-left: 1em;
    width: 100vw;
}

summary {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 1em;
    padding-right: 1em;
    display: flex;
    flex-direction: row;
    border-top: solid 1px black;

}

summary div {
    width: 25%
}

.gitdiv {
    text-align: right;
    padding-right: 3em;
}
.datediv {

    text-align: center;
}
details[open] > summary {
    border-bottom : solid 1px black
} 


summary:hover {
    cursor:pointer;
    color: var(--accent-color);
}

details {
    width: 100vw;
    background-color: white;
    border-bottom: solid 1px black;
    padding: 0px;


}

.project-content {
    width: 100vw;
    padding: 0vw;
    margin: 0vw;

} 

.project-text {
    width: 70vw;
    padding-left: 1em;
}

.francaise img {
    width: auto;
    margin: 0px;
    padding: 0px;
    height: 95vh;


}

.francaise {
    margin-left: 1em;
}
.italienne img {
    width: 50vw;
    margin: 0px;
    padding: 0px;
    height: auto;


}


.project-img {
    width: 103vw;

}







a {
    color: var(--accent-color);
}

@media only screen and (max-width : 420px) {

     .francaise img {
        width: 100vw;
        margin: 0px;
        padding: 0px;
        height: auto;
    
    
    }

    .italienne img {
        width: 100vw;
        margin: 0px;
        padding: 0px;
        height: auto;
    
    
    }

    .francaise {
        margin-left: 0em;
    }

    h1 {
        font-size: 20pt;
    }

    summary {
        font-size: 14px;
    }

    summary::before {
        content: '';
    }
}