@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --color-1: #fafafa;
    --color-2: #4c4d4f;
    --color-3: #17a2b8;
    --color-4: #ff7b19;
    --color-5: #ddd;
    --color-6: #6c757d;
    --border-radius: 4px;
}

* {
    margin: 0;
    box-sizing: border-box
}
img {
    max-width: 100%;
    height: auto;
}
html {
    font-size: 16px
}
body {
    background: var(--color-1);
    color: var(--color-2);
    font-family: 'Roboto', sans-serif
}
a {
    color: var(--color-3);
    text-decoration: none;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 2rem 0
}
h2 {
    font-size: 1.1rem;
    margin: 0 0 2rem 0
}
p {
    line-height: 1.5;
    margin: 1rem 0
}

.alignright {
    float: right;
    margin: 0 0 1rem 1rem
}
@media(max-width:800px) {
    .alignright {
        float: none;
        margin: 1rem 0
    }
}


.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem
}




header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: center;
    margin: 2rem 0
}
header img {
    display: block;
}
.quotation {
    line-height: 1.2;
    font-size: 0.9rem;
}

.site-title {
    font-size: 2.5rem;
    font-weight: 700
}
.site-subtitle {
    font-size: 1.5rem;
    font-weight: 700
}
@media(max-width:900px) {
    header {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1rem;
        margin: 1rem 0
    }
    header img {
        max-width: 300px;
        width: 100%;
        margin: 0 auto
    }
    .site-title {
        font-size: 1.5rem;
    }
    .site-subtitle {
        font-size: 1rem;
    }
    .quotation {
        line-height: 1.1;
        font-size: 0.8rem
    }
    .wrapper {
        padding: 0 1rem
    }
}



nav {
    background: var(--color-4);
    border-radius: var(--border-radius)
}
nav ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    padding: 0
}
nav a {
    display: block;
    padding: 0.8rem 1rem;
    color: white;
}
.current-menu-item a {
    background: rgba(0,0,0,0.1);
}
@media(max-width:900px) {
    nav a {
        padding: 0.5rem 1rem
    }
}






main {
    margin: 3rem 0
}
main ul {
    margin: 0 0 0 2rem
}
main li {
    line-height: 1.7;
    margin: 0 0 .2rem 0
}


.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-block-end: 2rem;
}
.pagination span,
.pagination a {
    display: inline-block;
    padding: 6px 12px;
    background: var(--color-5);
    color: var(--color-6);
    border-radius: var(--border-radius)
}
.pagination a:hover {
    background: var(--color-6);
    color: white
}
.pagination .current {
    font-weight: 700;
    background: var(--color-3);
    color: white
}




.add-comment {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: var(--border-radius);
    max-width: 500px;
}
.add-comment h2 {
    background: var(--color-3);
    margin: 0;
    font-size: 1rem;
    color: white;
    padding: 10px 15px;
    border-radius: var(--border-radius) var(--border-radius) 0 0
}
.add-comment .content {
    padding: 1rem;
    background: white;
    border-radius: 0 0 var(--border-radius) var(--border-radius)
}
.add-comment label {
    display: block;
    margin-bottom: .5rem;
    font-size: 0.9rem;
}
.add-comment .form-group {
    margin-bottom: 1rem
}
.add-comment input[type="text"],
.add-comment textarea {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font: inherit;
    background: white;
    border: 1px solid var(--color-5);
    border-radius: var(--border-radius)
}
.add-comment textarea {
    height: 100px
}
.add-comment input[type="submit"] {
    color: white;
    background: var(--color-3);
    padding: 10px 1rem;
    border: 0;
    font: inherit;
    cursor: pointer;
    border-radius: var(--border-radius)
}


.comment {
    margin: 0 0 2rem 0;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 3px
}
.comment .comment-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background: var(--color-6);
    padding: 0.8rem 1rem;
    color: white;
    border-radius: var(--border-radius) var(--border-radius) 0 0
}
.comment .comment-header .date {
    text-align: right;
}
.comment .comment-body {
    background: white;
    padding: 1rem;
    border-radius: 0 0 var(--border-radius) var(--border-radius)
}
.comment .comment-body p:first-child {
    margin-top: 0
}
.comment .comment-body p:last-child {
    margin-bottom: 0
}




.wp-block-gallery {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem
}
.wp-block-gallery .wp-block-image  {
    width: 150px;
}
.wp-block-gallery a {
    display: block;
}

.wp-block-gallery figcaption {
    font-size: .8rem;
    text-align: center;
}