@font-face {
    font-family: "TGL";
    src: url("/static/fonts/TGL/TGL 0-16.ttf");
}

@font-face {
    font-family: "TGL2";
    src: url("/static/fonts/TGL/TGL 0-17 alt.ttf");
}

@font-face {
    font-family: "sligoil";
    src: url("/static/fonts/Sligoil/Sligoil-Micro.woff2");
}

@font-face {
    font-family: "sligoil-bold";
    src: url("/static/fonts/Sligoil/Sligoil-MicroBold.woff2");
}

@font-face {
    font-family: "manifont";
    src: url("/static/fonts/BBBManifont/BBBManifontGrotesk-Book.woff2");
}

@font-face {
    font-family: "manifont-em";
    src: url("/static/fonts/BBBManifont/BBBManifontGrotesk-BookItalic.woff2");
}

@font-face {
    font-family: "BBBHF";
    src: url("/static/fonts/BBBHertheyFutural/BBB-Herthey-Futural-95.woff2");
}
:root {
    --vermillon: #ee7666;
    --vermillon-alpha: #ee766666;
    --vermillon-fonce: #de6050;
    --remblais: #f7f5e6; /* #f9f9e8 #f7f5e6 */
    --remblais-alpha: #f7f5e666;
    --remblais-demialpha: #f7f5e6cc;
    --main-font: "TGL2";
    --em-font: "TGL";
    --border-width: 4px;
    --border-style: var(--border-width) solid var(--vermillon);
    --content-height: 500px;
    font-size: 14pt;
}

body {
	font-family: var(--main-font),Arial;
    line-height: 1.2;
	color: var(--vermillon);
	background: var(--remblais);
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding-top: 150px;
    align-items: center;
}

main {
    padding: 30px 50px;
    box-shadow: 135px -145px 60px -120px var(--vermillon), -135px 145px 60px -120px var(--vermillon);
}

.entries {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding:0;
}

.entry p {
    margin: 0;
    margin-bottom: 0.5rem;
}

.entry input {
    width: 200px;
    padding: 5px 8px;
    font-family: var(--main-font);
    font-size: 1rem;
    color: var(--vermillon);
    background-color: var(--remblais);
    border: 2px solid var(--vermillon);
}

.entry .message {
    font-family: var(--em-font),Arial;
    font-size: 0.9rem;
    width: 200px;
}

.entry.centered {
    text-align: center;
}

input[type=file], input[type=file]:hover, input[type=file]:focus {
    width: 90%;
    border: none;
    box-shadow: none;
}

input[type=submit].small {
    width: auto;
    padding: 7px 20px;
    margin: 0;
    border: 2px solid var(--vermillon);
    border-radius: 8px;
    background: none;
    font-family: var(--main-font),Arial;
}

input:hover, input:focus, .btn:hover, .btn:focus {
    border: 2px solid var(--vermillon-fonce);
    color: var(--vermillon-fonce);
    box-shadow: 0 0 20px var(--vermillon-alpha);
}

.entries a {
    color: var(--vermillon);
    text-decoration: none;
}

.btn {
    color: var(--vermillon);
    text-decoration: none;
    text-align: center;
    width: auto;
    padding: 7px 20px;
    margin: 0;
    border: 2px solid var(--vermillon);
    border-radius: 8px;
    background: none;
    font-family: var(--main-font),Arial;
    cursor: pointer;
}

.entry .btn.small {
    margin: 10px 0;
}

.fixed-width {
    width: 360px;
}

button.btn.fixed-width {
    font-size: 1rem;
    width: 100%;
}

.star {
    margin: 20px 0;
}

.bar {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

aside {
    position: absolute;
    top: 20px;
    right: 20px;
}

aside input {
    font-family: var(--main-font);
    font-size: 1rem;
    color: var(--vermillon);
}

pre {
    font-family: monospace;
    margin: 50px 0;
}

details.entry {
    width: auto;
    padding: 7px 0px;
    margin: 0;
    border: 2px solid var(--vermillon);
    border-radius: 8px;
    background: none;
    text-align: center;
}

details.entry summary {
    text-align: center;
    margin:0;
    cursor: pointer;
}

details.entry[open] summary {
    padding-bottom: 7px;
    border-bottom: 2px solid var(--vermillon);
    margin-bottom: 15px;
}

details.entry:hover, details.entry:focus {
    border: 2px solid var(--vermillon-fonce);
    color: var(--vermillon-fonce);
    box-shadow: 0 0 20px var(--vermillon-alpha);
}

#message {
    font-family: var(--main-font-em);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 40px;
    color: #8ec967;
    animation: fadeOut 3s forwards;
    animation-delay: 2s;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}