body {background-color: #0f1a30;}
h1   {color: white;font-family: Tahoma, Verdana, sans-serif;text-align: center;}
h2   {color: white;font-family: Tahoma, Verdana, sans-serif;text-align: center;}
h3   {color: white;font-family: Tahoma, Verdana, sans-serif;text-align: center;}
p    {color: white;font-family: Tahoma, Verdana, sans-serif;text-align: center;}
a    {color: white;font-family: Tahoma, Verdana, sans-serif;text-align: center;}

.container_index {  display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "kyledot nightcall external"
        "thebakery thecaldera external";
}
.kyledot { grid-area: kyledot; }
.thebakery { grid-area: thebakery; }
.nightcall { grid-area: nightcall; }
.thecaldera { grid-area: thecaldera; }
.external { grid-area: external; }

.container_projects {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "projects games";
}
.projects { grid-area: projects; }
.games { grid-area: games; }

.container_resume {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "employment skills";
}
.employment { grid-area: employment; }
.skills { grid-area: skills; }