@font-face {
    font-family: 'quintessentialregular';
    src: url('imports/quintessential-regular-webfont.woff2') format('woff2'),
        url('imports/quintessential-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    background-color: #f0d4d3;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'quintessentialregular';
}

.tp2 {
    margin-left: -15px;
}

.ratio-13 {
    aspect-ratio: 1 / 1.33;
}
.divcenter {
    margin: 0 auto;
    display: block;
}

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

dialog {
    border:0;
    border-radius:4px;
}

dialog.fullwindow {
    width: calc(100vw - 2rem);
    height: calc(100vh - 2rem);
}

dialog.w13 {
    width: calc(100vw - 2rem);
}

dialog.autoheight {
    
}

dialog:open {
    
}

dialog button {
    border: 0;
    background-color: transparent;
    position: absolute;
    top:0;
    right: 0;
    color: #666;
    z-index: 10000;
    cursor: pointer;
}

dialog button:hover {
 color: #710000;   
}


/* player audio */
.audio_player {
    
}
.audio_player.playing .play {
    display:none;
}
.audio_player.playing .pause {
    display:block;
}
.audio_player .pause {
    display: none;
}