/* CSS Variables */

:root {
    /* colors */
    --bgcolor: #fff;
    --textdark: #333;
    --textlight: #888;
    --shadow: 0 1px 5px rgba(150, 150, 150, 0.6);
    --ttcolor: #eee;

    /* paragraph settings */
    --fontsize: 2.1rem;
    --commentsize: 0.8rem;
    --ttsize: 0.2rem;

    --fontsize980: 1.7rem; 
    --commentsize980: 1.2rem;
    --ttsize980: 0.4rem;
    
    --linehg: 1em;
    --linehg980: 1em;
}

@font-face {
    font-family: Akkadian;
    src: url(Akkadian256.otf);
}

html {
    font-family: 'Akkadian', serif;
    font-size: var(--fontsize);
    color: var(--textdark);
}

body {
    background: var(--bgcolor);
    margin: 30px 30px;
    line-height: var(--linehg);
}

img {
    max-width: 80%;
}

.wrapper {
    /* grid */
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.diogenes {
    /* grid */
    grid-column: 2/3;
    grid-row: 1;
    text-align: center;
}

.saying {
    /* grid */
    grid-column: 1/4;
    grid-row: 2;
    text-align: center;
    padding: 20px 60px 0px 60px;
    /* padding-left: 50px;
    padding-right: 50px; */
    text-shadow: var(--shadow);
    /* animation */
    -webkit-animation: 2s ease 0s normal forwards 1 fadein;
    animation: 2s ease 0s normal forwards 1 fadein;
}

.comment {
    color: var(--textlight);
    font-size: var(--commentsize);
    text-shadow: none;
}

footer {
    /* grid */
    grid-column: 2/3;
    grid-row: 3;
    text-align: center;

    /* decoration */
    font-family: Arial;
    text-transform: lowercase;
    font-size: var(--ttsize);
    color: var(--ttcolor);
    
}

a:link, a:visited{
    color: var(--ttcolor);
    text-decoration: none;
}


/* animation keyframes */
@keyframes fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/* media queries */
@media (max-width: 980px) {

    .wrapper {
        /* grid */
        display: grid;
        grid-template-columns: 1fr;
    }

    .diogenes {
        grid-row: 1;
    }

    .saying {
        grid-row: 2;
        font-size: var(--fontsize980);
        line-height: var(--linehg980);
    }

    .comment {
        color: var(--textlight);
        font-size: var(--commentsize980);
        line-height: var(--linehg980);
        text-shadow: none;
    }

    footer {
        grid-row: 3;
        font-size: var(--ttsize980);
    }
}