@font-face {
    font-family: cmu;
    src: url(fontes/cmu/cmuntt.ttf);
}

@font-face {
    font-family: cmu;
    src: url(fontes/cmu/cmunit.ttf);
    font-style: italic;
}



:root{
    --color : rgb(187, 255, 0);
    --marge : 10px;
}

a{
    text-decoration: none;
    color: unset;
}

p{
    margin: 0;
}

p a{
    text-decoration: 1px underline solid;
}



img{
    width: 100%;
    
    height: auto;
}


body{
    margin: 0 auto;
    background-color: white;
    font-family:cmu;
      font-size: 1.4rem;
    min-height: 100vh;
}

main{
    padding-bottom: 10vh;
}



h1,h2,h3,h4{
    font-weight: unset;
    font-size: unset;
}

.cm h1, h2, h3, h4{
    text-align-last: left;
}


h1{
    margin: 0 auto;
    display: block;
    position: relative;
 
}


h2{
    margin: 0;
    font-family: cmu;
    text-align: left;
    text-align-last: left;
}

h2::before, h3::before{
    content : "∴ "
}

h3{
    margin: var(--marge) 0;
    font-size: unset;
}

#title{
    font-family: cmu;
    display: block;
    position: relative;
    position: sticky;
    border-bottom: 1px solid black;
    z-index: 2;
    line-height: 1;
    padding: 5px 0;
    top: 0;
    text-transform: uppercase;
    background-color: white;
    margin: 0 var(--marge);
}

#moreInfo{
    display: block;
    position: absolute;
    cursor: pointer;
    top: 0;
    transform-origin: center;
    right: 0;
    margin-top: calc(var(--marge) /2);
}

#moreInfo:hover{
    transform: scale(-1);
}

#pageIntro{
    display: block;
    position: fixed;
    text-align: left;
    z-index: 2;
    max-height: 0;
    width:calc(100% - (2* var(--marge)));
    transition: .3s;
    background-color: white;
    overflow: hidden;
    margin : 0 var(--marge);
}

#pageIntro a{
    text-decoration: underline 1px solid;
}

li::marker{
    content: "↗ ";
}

#pageIntro p:first-of-type{
    padding-top: var(--marge);
}

#pageIntro p:last-of-type{
    border-bottom: 1px solid black;
    padding-bottom: var(--marge);
}

.seance{
    display: block;
    position: relative;
    padding: var(--marge) 0;
    margin: 0 var(--marge);
    border-bottom: 1px solid black;
}

.wrapper .seance:first-of-type{
    margin-top: 10vh;
}

.seance h1{
    cursor: pointer;
    margin: 0;
    font-family: cmu;
    display: block;
    position: relative;
    text-transform: uppercase;
       transform-origin: center;
    text-align: center;
}


.seance:nth-of-type(odd) h1:hover{
    transform: scaleX(-1);

}

.seance:nth-of-type(even) h1:hover{
    transform: scaleY(-1);

}

.seance:hover .cm{
    max-height: 100px;
}

.seance p::after, h2::after{
    display: block;
    content: " ";
    white-space: pre;
}

.cm{
    display: block;
    position: relative;
    max-height: 0;
    transition: .3s;
    overflow: hidden;
}

.mcc{
    justify-content: space-between;
    gap: var(--marge);
    display: flex;
}

.content{
    display: inline-block;
    text-align: left;
    text-align-last: left;
    border: 1px solid white;
    border-top: 1px solid black;
    flex: 1 1 0px;
    padding: var(--marge) 0;
    vertical-align: top;
}

.media{
    display:  inline-flex;
    text-align: center;
    text-align-last: center;
    padding: var(--marge);
    flex: 1 1 0px;
    border: 1px solid white;
    height: fit-content;
    background-color: whitesmoke;
    border-top: 1px solid black;
    flex-wrap: wrap;
    justify-content: space-between;
}

.media img{
}

.m{
    display: inline-block;
    cursor: pointer;
    width: 49%;
    transform-origin: center;
    vertical-align:top;
    transition: .2s;
}

.m:hover{
    filter: invert(1);
}



.link{
    display: block;
    background-color: whitesmoke;
    margin: var(--marge) 0;
    text-align-last: left;
    width: fit-content;
    padding: 1vw var(--marge);
}


.linkDoc{
    display: block;
    background-color: whitesmoke;
    text-align-last: left;
    margin: var(--marge) 0 ;
    width: fit-content;
    padding: 1vw var(--marge);
    margin-bottom: 10vh;
}

.link a, .linkDoc a{
    background-color: rgb(36, 36, 36);
    padding: var(--marge);
    color: white;
    margin: var(--marge) 0;
    transition: .2s;
    border: 1px solid transparent;
    
}

.link a:hover, .linkDoc a:hover{
    background-color: white;
    color: black;
    border: 1px solid black;    
}



/*   DIAAAPO   */

#backDiapo{
    display:none;
    top: 0;
    left: 0;
    position: fixed;
    width: 100vw;
    z-index: 2;
    height: 100vh;
    cursor: pointer;
}

#backDiapo:hover + #diapo{
    opacity: .5;
    filter: invert(1);
}

#diapo{
    display: none;
    position: fixed;
    transition: .3s;
    width: calc(100vw - (4* var(--marge)));;
    height: calc(100vh - (4* var(--marge)));
    top: 50%;
    z-index: 2;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: whitesmoke;
    border: 1px solid black;
}

#diapo img{ 
    max-width: 100%;
    max-height: 100%;
      top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    position: absolute;
    width: auto;
    height: auto;
}