@font-face {
    font-family: 'Faculty Glyphic';
    src: url('fonts/FacultyGlyphic-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bowlby One SC';
    src: url('fonts/BowlbyOneSC-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    color: #c5c1cc;
    background-color: #33333a;
}

body, html {
    padding: 0;
    margin: 0;
}

a, a:visited {
    text-decoration: none;
    color: #b7d233;;
}

a:hover {
    text-decoration: underline;
}

p {
    line-height: 1.4em;
    font-size: 1em;
}

h2, .postcard h1, .container h1, .tags-container h1 {
    font-family: "Bowlby One SC", sans-serif;
    font-size: 1.5em;
    margin: 0;
    color: #e6ddf3;
    letter-spacing: 0.025em;
}

.right{
    float: right;
}

.left {
    float: left;
}

.center {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

/* Quill */

.ql-align-left {
    text-align: left;
}

.ql-align-right {
    text-align: right;
}

.ql-align-center {
    text-align: center;
}

strong {
    color: #fff;
}

li[data-list="bullet"] {
	list-style-type: disc;
}

.hide {
    display: none;
}

#main {
    color: #c5c1cc;
    max-width: 100%;
    margin-bottom: 65px;
}

#top {
    height: 80px;
    padding: 10px;
    position: relative;
    /*background: #0d8996 url(graphics/top-bg.png) right no-repeat;*/
    background: #175973;
    background: #1c1c1c;
}

#top h1 {
    font-family: "Faculty Glyphic", sans-serif;
    color: #fafafa;
    font-size: 2.5em;
    margin: 0px;
    padding: 3px;
    float: left;
}

#logo {
    height: 60px;
    float: right;
    margin: 0px 10px;
}

.postcard, .container {
    color: #c5c1cc;
    background-color: #1f1f1f;
    width: 1080px;
    max-width: 95%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 5px;
    display: flow-root;
}

.postcard p, .container p {
    font-size: 1.1em;
}

.postcard h2 {
    margin-top: 10px;
}

article .postcard, .container {
    max-width: 680px;
}

.square {
    float: left;
    margin-right: 25px;
}

.square img {
    object-fit: cover;
    width: 350px;
    height: 300px;
}

.text { 
    display: flow-root;
    position: relative;
}

.photo {
    color: #ccc;
}

.postcard-tag-container {
    display: block;
  float: right;
  bottom: 0;
  position: absolute;
  right: 0;
}


.container h1, .tags-container h1 {
    margin: 0px 0px 15px 0px;
}

.tags-container {
    color: #c5c1cc;
    background-color: #1f1f1f;
    width: 680px;
    max-width: 95%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 5px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
}

.tags-container .center {
    width: inherit;
}

.tags-tag {
    background: #33333a;
    color: #fff;
    padding: 8px;
    margin: 5px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1em;
    width: 190px;
    float: left;
    border-radius: 5px;
    border: solid 2px #545454;
}

.tag {
    background: #313131;
    color: #ccc;
    padding: 5px 8px;
    margin: 0px 0px 0px 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1em;
    font-style: italic;
}

.tag {
    float: right;
}

.tag span, .tags-tag span {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.tags-tag:hover, .tag:hover {
    background-color: #0d8996;
}

#gallery {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1080px;
    margin: 0px auto 30px auto;
    justify-content: center;
}

#gallery > * {
    width: 100%;
    padding: 1em;
}

.gallery-item {
    margin: 20px;
    color: #c5c1cc;
    background-color: #1c1c1c;
    height: fit-content;
    font-size: 0.8em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius: 5px;
    animation: smooth-appear 1s ease forwards;
    scale: 0;
}

.gallery-item .caption {
    padding-top: 8px;
}

.lb-caption {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#search-container {
    padding: 0px ;
    margin: 20px auto;
}

#search-form-container {
    width: 290px;
    max-width: 100%;
    margin: auto;
}

#search {
    font-size: 1.2em;
    background-color: #1f1f1f;
    color: #ddd;
    width: 90%;
    display: inline;
    z-index: 500;
    position: relative;
    padding: 10px;
    margin: 0;
    border: 0;
    border-radius: 2px;
}

#search-submit {
    margin-top: 10px;
    width: 100%;
    height: 30px;
    display: inline;
    cursor: pointer;
    font-size: 1.2em;
    color: #fff;
}

#f_submit {
    display: none;
}

.white {
    color: #fff;
}

.index {
    margin: 0.5em 0.5em;
}

@media (min-width:800px) {
    #gallery > * {
        width: 45%;
    }
}

@keyframes smooth-appear {
  to{
    scale: 1;
  }
}

.gallery-item img {
    object-fit: cover;
    width: 100%;
    /*height: 100%;*/
    max-height: 300px;
}

.pagination {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-button, .page-button-active {
    padding: 5px;
    margin: 5px;
    width: 30px;
    height: 30px;
    background: #008080;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #fff;
    font-weight: bold;
}

.page-button-active {
    background: #04AA35;
}

 /* Add a black background color to the top navigation */
.topnav {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background: #1c1c1c;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: solid 1px #505050;
}

/* Style the links inside the navigation bar */
.topnav a, .topnav span {
    float: left;
    display: block;
    color: #cdcdcd;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 0.9em;
    height: 40px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: goldenrod;
    color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
    background-color: #0b3f76;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
    cursor: pointer;
}

footer {
    background: #175973;
    background: #1c1c1c;
    color: #aaa;
    padding: 10px 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    height: 45px;
    font-size: 0.8em;
    position: fixed;
    bottom: 0;
    width: 100%;
}

footer p {
    margin: auto;
    float: left;
}

.goup {
    color: #fff;
    font-size: 2em;
}

#lightboxOverlay {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
}

#lightbox {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%);
}

/* Commments overide */

.cs-comments {
    max-width: 680px;
    margin: auto;
}

.ql-editor.ql-blank::before {
    color: #aaa !important;
}

.ql-snow {
    font-size: 1em !important;
}

#name::placeholder {
  color: black;
  opacity: 1; /* Firefox */
}

.point {
    cursor: pointer;
}

@media screen and (max-width: 365px) {

    #top h1 {
        font-size: 1.45em;
        margin: 10px 5px;
    }

    p {
        line-height: 1.4em;
        font-size: 1em !important;
    }

    .tag {
        font-size: 0.8em;
    }

}

@media screen and (max-width: 500px) {

    #logo {
        height: 60px;
        margin-top: 0;
    }

    #top h1 {
        font-size: 1.4em;
        margin: 10px 0px;
    }

    h2 {
        font-size: 1.1em;
    }
}

@media screen and (max-width: 800px) {

    article .postcard, .container {
        max-width: 95%;
    } 
}

@media screen and (max-width: 900px) {

    .square {
        float: initial;
        text-align: center;
        margin-right: 0;
    }

    .square img {
        object-fit: cover;
        width: 100%;
        height: 300px;
    }

    .text {
        padding: 0px 0px 40px 0px;
        margin: 0;
    }

    .postcard {
        width: 95%;
    }
}

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav span.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    /*.topnav.responsive {position: relative;} */
    .topnav.responsive span.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
} 

.message-me {
    display: inline-block;
    width: 360px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="24"><text x="0" y="18" font-size="18" font-family="Verdana" fill="%23b7d233">message@widdershinsstudio.uk</text></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}