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

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

.MOMO {
    background-image: url("MOMO.png");
    width: 64px;
    height: 71px;
    position: static;
}

.container {
    width: 100%;
    max-width: 1000px;
    min-height: 668px;
    /*
    shaved off 100 to keep it on the page, top and bottom
    margins of browser were cutting off display
    */
    margin: 0 auto;
    margin-top: 45px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 0 35px;
    /*gap between columns*/
}

/*atla logo w glider*/
/*logo doesnt need a link on this page*/

.logo img {
    width: 100%;
    max-width: 415px;
    height: auto;
    grid-column: 1;
    grid-row: 1;
}

.logo img:first-child {
    width: 100%;
    max-width: 415px;
    height: auto;
    margin-bottom:4px;
    grid-column: 1;
    grid-row: 1;
}

.logo img:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}
/*atla logo w glider*/

/*box*/
.intro {
    grid-column: 2;
    grid-row: 1;
    max-width:550px;
    min-height:270px;
    max-height:280px;
    background-color: #f0b991;
    box-sizing: border-box;
    font-size: 19px;
    font-family: "Herc", 'Times New Roman';
    color: #695545;
    text-align: center;
    padding-right:10px;
    padding-left:10px;
    margin-bottom: 50px;
    border: 9px solid #e1ab84;
    overflow:auto;
    /*dont cut off words.. words acc not constrained to box
    tho so need to fix
    */
}
/*box*/

/*characters (aang) & world (symbols)*/

.characters:link {
    font-size: 40px;
    font-family: "Herc", 'Times New Roman';
    color: #473024;
    font-weight: normal;
    text-decoration: underline;
}

.characters:visited {
    font-size: 40px;
    font-family: "Herc", 'Times New Roman';
    color: #473024;
    font-weight: normal;
    text-decoration: underline;
}

.characters:hover {
    font-size: 40px;
    font-family: "Herc", 'Times New Roman';
    color: #f59342;
    font-weight: normal;
    text-decoration: underline;
    margin: 0, 0, 10px;
    transform:scale(1.06);
}

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

.characters:active {
    color:#ffa75f;
    font-size:40px;
    font-family: "Herc", 'Times New Roman';
    font-weight:normal;
    margin:0, 0, 10px;
    transform:scale(1.04);
}

.characters h1,
.world h1 {
    font-size: 40px;
    font-family: "Herc", 'Times New Roman';
    font-weight: normal;
    text-decoration: underline;
    margin: 0, 0, 10px;
}

.characters img {
    width: 133px;
    height: auto;
}

.world:link {
    color: #473024;
    font-size: 40px;
    font-family: "Herc", 'Times New Roman';
    color: #473024;
    font-weight: normal;
    text-decoration: underline;
    margin: 0, 0, 10px;
}

/*
.world:active {
    
}
*/
.world:visited {
    font-size: 40px;
    font-family: "Herc", 'Times New Roman';
    color: #473024;
    font-weight: normal;
    text-decoration: underline;
    margin: 0, 0, 10px;
}

.world:hover {
    color: #76a353;
    font-size: 40px;
    font-family: "Herc", 'Times New Roman';
    font-weight: normal;
    text-decoration: underline;
    margin: 0, 0, 10px;
    transform:scale(1.06);
}

.world:active {
    color:#88bd60;
    font-size:40px;
    font-family: "Herc", 'Times New Roman';
    font-weight:normal;
    margin:0, 0, 10px;
    transform:scale(1.04);
}

.world {
    grid-column: 2;
    grid-row: 2;
    text-align: center;
    transition: transform .2s;
}

.world img {
    width: 224px;
    height:auto;
}
/*characters (aang) & world (symbols)*/
/*at 24.17kb with everything rn.... gonna reuse*/