:root {
    --green-text: rgb(0, 104, 69);
    --tuli: rgb(240, 100, 0);
}

@font-face {
    font-family: 'plex-reg';
    src: url('IBMPlexSans-Regular.ttf');
}

@font-face {
    font-family: 'plex-bold';
    src: url('IBMPlexSans-Bold.ttf');
}

p {
    font-family: 'plex-reg', serif;
    text-align: justify;
    font-size: 1.2em;
}

a:link {
    font-family: 'plex-reg', serif;
    font-size: 1.2em;
    color: var(--tuli);
}

a:visited {
    font-family: 'plex-reg', serif;
    font-size: 1.2em;
    color: var(--tuli);
}

.otsikko-nimi {
    font-family: 'plex-bold', serif;
    font-size: 2em;
    color: var(--green-text);
}

.otsikko-normaali {
    font-family: 'plex-bold', serif;
    font-size: 2em;
    color: var(--green-text);
    margin-top: 4em;
}

.otsikko-pieni {
    font-family: 'plex-bold', serif;
    font-size: 1.4em;
    color: var(--green-text);
    margin-top: 4em;
}

.point {
    font-family: 'plex-bold', serif;
    margin-top: 1em;
    font-size: 1.2em;
}

body {
    padding-top: 4em;
    padding-bottom: 4em;
}

.kuva {
    max-width: 60%;
}

.logo {
    max-width: 60%;
}

.extra {
    margin-top: 4em;
    padding-left: 2em;
    padding-right: 2em;
}

.main {
    padding-left: 2em;
    padding-right: 2em;
}


@media (pointer: fine) {

    body {
        display: flex;
        justify-content: center;
    }

    .kuva {
        max-width: 20em;
    }

    .container {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .esittely {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .main {
        max-width: 40em;
        margin-bottom: 4em;
    }

    .extra {
        margin-top: 0;
        max-width: 20em;
        margin-bottom: 4em;
    }

}