@font-face {
font-family: "Mistral";
src: url("fonts/Mistral.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}

body {
background-color: #111;
color: white;
font-family: Nunito, Arial, sans-serif;
text-align: center;
max-width: 800px;
margin: auto;
padding: 40px;
position: relative;
}

h1 {
font-family: "Mistral", cursive;
font-size: 100px;
margin: 0 0 60px 0;
text-shadow: 4px 4px 0 #0026FF;
}

h2 {
background-color: #014090;
margin: 100px 0 20px 0;
padding: 10px 20px;
border-radius: 8px;
}

h1 + h2 {
margin-top: 0;
}

p {
margin: 0 0 25px 0;
}

a {
display: inline-block;
background-color: #444;
color: white;
padding: 12px 24px;
text-decoration: none;
border-radius: 8px;
margin: 5px;
}

a {
background-color: #666;
}

/* Alex B. Studios logo */

.logo {
position: fixed;
top: 0;
left: 0;
width: 194px;
height: auto;
z-index: 1000;
}

/* Zorath & Fred section */

.zorath-fred-section {
position: relative;
margin-top: 100px;
}

.character-row {
display: contents;
}

.zorath-fred-content {
width: 100%;
}

.zorath-fred-content h2 {
margin-top: 0;
}

/* Desktop character positioning */

.zorath {
position: absolute;
width: 160px;
height: auto;
right: 100%;
margin-right: 80px;
top: 0;
}

.fred {
position: absolute;
width: 130px;
height: auto;
left: 100%;
margin-left: 80px;
top: 10px;
}

/* Link rows */

.link-section {
display: flex;
flex-direction: column;
gap: 15px;
}

.link-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

/* Mobile layout */

@media (max-width: 600px) {

body {
    max-width: none;
    padding: 20px;
}

/* Hide logo on mobile */

.logo {
    display: none;
}

/* Mobile title uses the actual Mistral font */

h1 {
    font-family: "Mistral", cursive;
    font-size: 60px;
    margin-bottom: 40px;
}

h2 {
    margin-top: 60px;
    margin-bottom: 20px;
    padding: 8px 15px;
}

h1 + h2 {
    margin-top: 0;
}

/* Zorath & Fred mobile layout */

.zorath-fred-section {
    margin-top: 60px;
}

.character-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

.zorath,
.fred {
    position: static;
    height: auto;
    margin: 0;
}

.zorath {
    width: 105px;
}

.fred {
    width: 90px;
}

.zorath-fred-content {
    width: 100%;
}

.zorath-fred-content h2 {
    margin-top: 0;
}

/* Mobile link grid */

.link-section {
    gap: 10px;
}

.link-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.link-row a {
    margin: 0;
    width: auto;
    box-sizing: border-box;
}

.link-row:nth-child(2) a:last-child {
    grid-column: 1 / 3;
    width: 50%;
    justify-self: center;
}

}