* {box-sizing: border-box;margin:0;padding:0;}
html {
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    font-size:14px;
}
body {    
    background: #ffffff;
    overflow:hidden;
    display:grid;
    grid-template-columns: 1fr;
    justify-items: center;
}
#page { 
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap:1rem;
    max-width:790px;
    margin:0.5rem;
}
.scroll {
    max-height: 95vh;
    overflow-x: hidden;
    overflow-y: auto;
    margin:auto;
    padding:1rem;
}
.scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;  
}
.scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff; 
    border-radius: 5px;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.scroll::-webkit-scrollbar-thumb {
    background: rgba(0,115,180,0.6);
    border-radius: 10px;
}
.scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0,115,180,0.8);
}
.menu {
    display:none;
    visibility:hidden;
    position:fixed;
    top:1rem;
    right:1rem;
}
.menu a {
    display:flex;
    background:rgba(0,115,180,0.6);
    padding:0.5rem 1rem;
    font-size:1.1rem;
    border:2px solid rgba(0,115,180,1);
    border-radius:10px;
    color:#ffffff;
    font-family: 'Orbitron', Verdana, Helvetica;
    margin:0.5rem 0;
}
.menu a:hover {
    background:rgba(0,115,180,0.8);
    color:#ffffff;
}
@media (min-width: 768px) {
    .box {padding:0.3rem;}
    #page {margin:0.5rem auto;}
}
@media (min-width: 992px) {
    html {font-size:14px;}
    #page {margin:1rem auto;}
    .box {padding:0.4rem;}
}
@media (min-width: 1200px) {
    .menu {display:flex;flex-flow:column;visibility:visible;}
    .box {padding:0.5rem;}
}
span {
    width:100%;
    text-align:left;
}
span, p, a {
    font-weight: normal;
    color:#333;
    font-size: 1.1rem;
    font-family: 'Vollkorn', Verdana, Helvetica;
    text-decoration: none;
    line-height:1.2rem;
}
p {
    text-align:justify;
    margin:0.3rem auto;
}
a:hover {
    text-decoration: none;
    color:rgba(0,115,180,1);
}
img {
    display:flex;
    width:100%;
}
fieldset {
    display:flex;
    width:100%;
    border:2px solid rgba(0,115,180,1);
    padding:0.5rem 1rem;
}
legend {
    background:rgba(0,115,180,0.6);
    padding:0.5rem 1rem;
    margin-left:1rem;
    font-size:1.3rem;
    border:2px solid rgba(0,115,180,1);
    border-radius:10px;
    color:#ffffff;
    font-family: 'Orbitron', Verdana, Helvetica;
}
ul, li {
    list-style:none;
}
.nom {
    font-size:1.4rem;
}
.ombre{
    -webkit-box-shadow: 0 3px 3px rgba(0,115,180,0.7);
    -moz-box-shadow: 0 3px 3px rgba(0,115,180,0.7);
    box-shadow: 0 3px 3px rgba(0,115,180,0.7);
}
.presentation {
    border:1px solid #aaa;
    display:grid;
    gap: 1rem 0.5rem;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "legend legend" "photo contenu";
}
.legend {
    grid-area:legend;
}
.photo {
    display:flex;
    grid-area:photo;
    width:100%;
}
.photo img {
    display:flex;
    margin:auto;
    max-width:120px;
    border-radius: 15px;
}
.contenu {
    width:100%;
    grid-area:contenu;
}
.courrier {
    border:1px solid #aaa;
    display:grid;
    gap:1rem 0.5rem;
    grid-template-columns: 1rem 1fr 1fr 1rem;
    grid-template-areas:". lettre lettre ." ". . signature .";
}
.lettre {
    grid-area:lettre;
    text-align:justify;
}
.lettre p {
    text-indent: 1.5rem;
    margin:0.5rem auto;
}
.signature {
    grid-area:signature;
}
.signature span {
    width:150px;
    text-align:right;
    margin-left : auto;
    margin-right :0;
}
.cv {
    border:1px solid #aaa;
    display:grid;
    gap:1rem 0.5rem;
    grid-template-columns: 1fr;
}
.formation, .exp_pro, .divers {
    display:flex;
    flex-flow:column;
    margin-left:1rem;
    gap:0.5rem;
}
.titre {
    font-size:1.3rem;
    margin:0.5rem 0;
    text-decoration:underline;
}
.ligne {
    display:grid;
    grid-template-columns:2fr 3fr;
    grid-template-areas: "date intitule";
    margin:0.3rem 0;
}
.date {
    grid-area:date;
}
.intitule {
    grid-area:intitule;
}
.liens {
    border:1px solid #aaa;
    display:flex;
    flex-flow:column;
}
.liens span {
    width:100%;
    margin : 0.5rem 1rem;
}
.docs {
    border:1px solid #aaa;
    display:flex;
    flex-flow:column;
}
.docs span {
    width:100%;
    margin : 0.5rem 1rem;
}