@font-face {
    font-family: 'Herc';
    src: url('HerculanumLTProRoman.TTF');
}

body {
    background-image: url("BG.png");
    background-size: cover;
    background-position: center;
    margin: 0;
}

/*3 col, 2 rows*/
.container {
    width: 100%;
    max-width: 1100px;
    min-height: 762px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 30px 15px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 205px;
    grid-template-rows: 110px 1fr;
    column-gap: 20px;
    row-gap: 15px;
}

.logo {
    grid-column: 1;
    grid-row: 1 / 3;

    position: relative;
    min-height: 600px;
}

.atla-logo {
    position: absolute;
    width: 380px;
    height: auto;
    top: 300px;
    left: -145px;
    transform: rotate(-90deg);
    transform-origin: center center;
}

.glider {
    position: absolute;
    width: 400px;
    height: auto;
    top: 300px;
    left: -35px;
    transform: rotate(-90deg);
    transform-origin: center center;
}

.MOMO {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 64px;
    height: 71px;
    background-image: url("MOMO.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.characters {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.characters h1 {
    font-family: 'Herc', 'Times New Roman', serif;
    font-size: clamp(42px, 5.5vw, 82px);
    font-weight: normal;
    color: #473024;
    text-decoration: underline;
    text-decoration-thickness: 5px;
    text-underline-offset: 15px;
    margin: 0;
    white-space: nowrap;
}

/*
.home {
    text-align: center;
    transition: transform .2s;
}

.home:hover {
    margin: 0, 0, 10px;
    transform:scale(1.06);
}

.home:active {
    margin:0, 0, 10px;
    transform:scale(1.04);
}
*/

.world {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.world a {
    box-sizing: border-box;
    width: 100%;
    max-width: 172px;
    padding: 5px;
    border: 2px solid #cfac8b;
    background-color: rgba(225, 171, 132, 0.45);
    color: #76a353;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s, color 0.2s;
}

.world h1 {
    font-family: 'Herc', 'Times New Roman', serif;
    font-size: 35px;
    font-weight: normal;
    margin: 0;
}

.world a:hover {
    color: #473024;
    transform: scale(1.06);
}

.intro {
    grid-column: 2;

    box-sizing: border-box;
    width: 100%;

    font-family: 'Herc', 'Times New Roman', serif;
    font-size: 19px;
    line-height: 1.85;

    color: #695545;

    overflow-wrap: anywhere;
    overflow: auto;
}

/* top box */
.top {
    grid-row: 2;

    align-self: start;

    min-height: 210px;
    max-height: 210px;

    margin-top: 0;
    margin-bottom:10px;
    padding: 15px;

    background-color: #a58068;
    border: 9px solid #e1ab84;
    outline: 1px solid #d99e73;
    outline-offset: -1px;

    color: #f7e9d6;
}

/* bottom box */
.bottom {
    grid-row: 2;

    align-self: end;

    min-height: 330px;
    max-height: 330px;

    margin-bottom: 0;
    padding: 12px;

    background-color: rgba(225, 171, 132, 0.76);
    border: 1px solid rgba(225, 171, 132, 0.9);
}

/* heroes & vills */
.heroes,
.villains {
    grid-column: 3;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 5px;
    min-width: 0;
}

.heroes {
    grid-row: 2;
    align-self: start;
    margin-top: 35px;
}

.villains {
    grid-row: 2;
    align-self: end;
    margin-bottom: 35px;
}

/*make them  vertical*/
.heroes h2,
.villains h2 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);

    font-family: 'Herc', 'Times New Roman', serif;
    font-size: 29px;
    font-weight: normal;

    color: #48436e;
    margin: 0;
}

.heroes img {
    width: 125px;
    max-width: 70%;
    height: auto;
}

.villains img {
    width: 125px;
    max-width: 70%;
    height: auto;
}