/* Pre-retina devices */
@media only screen and (max-width: 320px) {

    .content { flex-grow: 1; flex-shrink: 1; }
    .page::before, .page::after { display: none; }
    h1 { font-size: 16pt !important; }
}

/* Custom, iPhone Retina */ 
@media only screen and (min-width: 320px) and (max-width: 480px) {

    .content { flex-grow: 1; flex-shrink: 1; }
    .page::before, .page::after { display: none; }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width: 480px) and (max-width: 768px) {

    .content { flex-grow: 4; flex-shrink: 4; }
    .page::before, .page::after { flex-grow: 1; flex-shrink: 1; }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 992px) {

    .content { flex-grow: 4; flex-shrink: 4; }
    .page::before, .page::after { flex-grow: 1; flex-shrink: 1; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .content { flex-grow: 2; flex-shrink: 2; }
    .page::before, .page::after { flex-grow: 1; flex-shrink: 1; }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {

    .content { flex-grow: 1; flex-shrink: 1; }
    .page::before, .page::after { flex-grow: 1; flex-shrink: 1; }
}

/* Handle devices with small height */
@media only screen and (min-height: 400px) and (max-height: 600px) {

    body { padding-top: 64px !important; }
}

/* Handle phones in landscape */
@media only screen and (max-height: 400px) {

    body { padding-top: 32px !important; }
}

/* Solarised colour palette */
.base0     { background: #839496; color: #002b36; }
.base1     { background: #93a1a1; color: #002b36; }
.base2     { background: #eee8d5; color: #002b36; }
.base3     { background: #fdf6e3; color: #002b36; }
.base00    { background: #657b83; color: #002b36; }
.base01    { background: #586e75; color: #eee8d5; }
.base02    { background: #073642; color: #eee8d5; }
.base03    { background: #002b36; color: #eee8d5; }
.red       { background: #dc322f; color: #eee8d5; }
.orange    { background: #cb4b16; color: #eee8d5; }
.yellow    { background: #b58900; color: #eee8d5; }
.green     { background: #859900; color: #eee8d5; }
.blue      { background: #268bd2; color: #eee8d5; }
.magenta   { background: #d33682; color: #eee8d5; }
.violet    { background: #6c71c4; color: #eee8d5; }
.cyan      { background: #2aa198; color: #eee8d5; }

body {
    background: #93a1a1; /* base0 */
    font-family: Arial;
    font-size: 12pt;
    margin: 0px;
    padding: 128px 16px 16px 16px;
}

h1 {
    margin: 0px;
    padding: 16px 0px;
    font-size: 16pt;
}

div {
    box-sizing: border-box;
}

.page {
    display: flex;
}

.page::before, .page::after {
    content: "";
    flex-basis: 0;
}

.content  {
    background: #fdf6e3;
    text-align: center;
    padding: 16px 16px 8px 16px;
    border: 2px solid #073642;
    border-radius: 16px;
    flex-basis: 0;
}

@font-face {
    font-family: 'Goffer';
    src: url('../fonts/goffer.ttf');
}

footer {
    text-align: right;
    font-size: 9pt;
    padding: 16px 0px 0px 0px;
}

footer a::after {
    content: " ጉዞ";
    font-family: "Goffer";
}

footer > a {
    text-decoration: none;
    color: #787878;
}

footer > a:hover {
    color: #268bd2;
}

footer > a:hover::after {
    color: #d33682;
}

.nowrap {
    white-space: nowrap;
}