:root {
--Denim: #004452;
--Linen: #FFF7ED;
--White: #ffffff;

--Petrol: #143e56;
--Pewter: #a6a8a6;
--Puce: #e03c5b;
--Pitch: #262d2d;
--Pine: #15b379;
}

.textPuce{color:var(--Puce);}
.textPine{color:var(--Pine);}



/*-BORING-*/
html{margin:0;padding:0;height:auto;}

body{
background:var(--Linen);
margin:0 auto;
width:100%;
min-width:360px;
max-width:1280px;
box-sizing:border-box;
padding:12px;
font-family: 'Roboto Mono', monospace;
font-style:normal;
font-size:72%;
color:var(--Pitch);
text-align:left;
}

/*-TEXT-*/

.emf{font-style:italic;font-weight:bold}

h2{
font-size:1.35rem;
margin:-6px 0px 0px;
padding:0px 8px 5px;
font-weight:bold;
}

h3{
font-size:200%;
margin:1em 0 1rem
}

h4{
font-size:150%;
margin:1em 0;
}

h5{
font-size:120%;
margin:2px 2px 16px;
}

header,
footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: hidden;
  justify-content: space-between;
  align-items: center;
}

header {gap: 1em;}
footer {gap: 0;}

header svg {
    margin-left:-1.2rem;
  height: 10rem;
  width: auto;
  display: block;
}

nav{
  display: flex;
  flex-direction: column;
  gap:0.4rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
}

nav > a {
  text-decoration: none;
  user-select: none;
  background: var(--Pine);
  padding: 3px 12px 4px;
  border-radius: 12px;
  color: var(--Pitch);
}

nav > a:hover,
nav > a:active {
  background: var(--Puce);
  color: var(--Linen);
}

.middlefiddle{
text-align:center;
align-items:center;
}

.noclick{
pointer-events:none;
user-select:none;
}

.nodec{
text-decoration: none;
user-select:none;
}

img{
max-width:100%;
}

.casual{
text-transform: lowercase;
}

/*-----OFFER-----*/
.offer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.offer > img {
    width: calc(50% - 3px);
    aspect-ratio: 21/9;
    object-fit: cover;
}

.hero > img{
  width:100%;
}

.credits{
    max-width:64%;
    margin:1rem auto;
}

/* Mobile stacking */
@media (max-width: 768px) {
.offer {flex: 1 1 100%;}
.optional{display:none;}
.credits{max-width:100%;}
}

table{
border-collapse:collapse;
table-layout:auto;
width:100%;
}

table th,
table td{
padding: 0.3em 0.8em;
border-bottom: 1px solid #aaa;
}

thead{
  background-color: var(--Puce);
  color: var(--Linen);
}

tr:last-child {border-bottom: none;}

.nowrap{
white-space:nowrap;
}

.contactflex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 500px;
  max-width:100%;
}

.contactflex label {
  font-weight: bold;
  margin:1em 0 -1em;
  display: block;
}

.contactflex input,
.contactflex textarea {
  padding: 1em;
  border: none;
  border-radius: 6px;
  font: inherit;
  width:100%;
  box-sizing:border-box;
  resize:none;
}

.contactflex button {
margin-bottom:0.5em;
padding: 1em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width:6em;
}

.contacterror{outline:2px solid red !important}