/* In portrait mode, put the logo above the skills */
@media only screen and (orientation: portrait) {
    .content { flex-direction: column; }
}

/* If we get below 1024px wide, but we are still bigger than a phone, put the logo above the skills */
@media only screen and (max-width: 1023px) and (min-width: 740px) {
    .content { flex-direction: column; }
}

/* If we get below 768px, put the skills in one column */
@media only screen and (max-width: 767px) {
    .skills { flex-direction: column; padding-top: 0px !important; }
    .logo { padding-bottom: 20px; }
}

/* Devices 320px high or smaller, reduce the top margin */
@media only screen and (max-height: 320px) {
    body { padding-top: 32px !important; }
}

/* Slightly bigger devices, have a slightly bigger top margin */
@media only screen and (min-height: 321px) and (max-height: 740px) {
    body { padding-top: 48px !important; }
}

body {
    color: #fdf6e3;
    background: #073642;
    font-family: Arial;
    font-size: 16px;
    margin: 0px;
    padding: 160px 16px 16px 16px;
}

div, ul, li {
    box-sizing: border-box;
}

.page {
    display: flex;
}

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

.content  {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
}

.content > .logo {
    flex-basis: 0;
    flex-grow: 2;
    flex-shrink: 2;
}

.content > .skills {
    flex-basis: 0;
    flex-grow: 5;
    flex-shrink: 5;
    display: flex;
    padding-top: 40px;
    color: #93a1a1;
}

.content > .skills > ul {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
}

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

.logo {
    font-size: 40px;
    text-align: center;
}

.guzo {
    content: " ጉዞ";
    font-family: "Goffer";
    font-size: 160px;
}

.nowrap, li {
    white-space: nowrap;
}

ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
}

ul li {
   line-height: 24px;
   display: block;
   text-align: center;
}
