@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;

  src: url('../fonts/comfortaa/Comfortaa-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cantarell/Cantarell-Regular.ttf');
}

@font-face {
    font-family: 'Cantarell';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cantarell/Cantarell-Italic.ttf');
}

@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/cantarell/Cantarell-Bold.ttf');
}

@font-face {
    font-family: 'Cantarell';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/cantarell/Cantarell-BoldItalic.ttf');
}

body {
   font-family: 'Cantarell', "Droid Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Comfortaa';
    text-align: left;
}

article {
    text-align: justify;
}

.padding {
   padding: 5px;
}

.row .col-md-3 img {
   width: 100%;
}

figure {
    padding: 2em 10px;
}
figure figcaption {
    font-style: italic;
}
figure img.image,
.images img
{
    cursor: pointer;
}
.images figure {
    float: left;
}

table.table-padding>tbody>tr>th, table.table-padding>tbody>tr>td {
    padding: 5px;
}

details > summary {
    display: list-item;
}

video {
    width: 100%;
}

.section-nav {
    background-color: lightyellow;
    margin: 2em 0px;
    padding: 10px 30px;
    border: 1px solid black;
    border-radius: 3px;
    text-align: left;
}
@media (min-width:768px) {
    .section-nav {
        margin: 2em 50% 2em 0px;
    }
}

kbd {
    border-radius: 4px;
    padding: .1em .6em;
    border: 1px solid #ddd;
    color: black;
    background-color: #eee;
    box-shadow: 0 1px 1px black;
}


.comment {
    border: 1px lightgray solid;
    padding: 5px;
    margin: 15px 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 5px;
}
.comment_author {
    font-size: 100%;
    font-weight: bold;
    margin: 0px;
}
.comment_date a {
    text-decoration: none;
}
.comment_date {
    margin-bottom: 1em;
}