@font-face {
    font-family: "EB Garamond";
    src:
        url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Regular.ttf"),
        url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Regular.otf")
            format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Cheltenham Classic";
    src:
        url("/static/assets/cheltenham/CheltenhamClassic.ttf"),
        url("/static/assets/cheltenham/CheltenhamClassic.otf")
            format("truetype");
    font-weight: normal;
    font-style: normal;
}

html {
    background-image: url("/static/assets/concrete/Concrete012_1024p_Color.jpg");
    font-family: "EB Garamond";
    font-optical-sizing: auto;
}

h1 {
    font-family: "Cheltenham Classic", serif;
    background-color: white;
    display: inline-block;
}

p {
    line-height: 1.5;
}

span {
    background-color: white;
}

#main-frame {
    background-color: white;
    max-width: 600px;
    margin: auto;
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
}

hr {
    border-top: 1px solid black;
    border-bottom: none;
    margin: 0px;
}

#contentnotice {
    background-color: white;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10pt;

    h1, h3 {
        margin: 6pt;
    }

    div {
        width: 100%;
        max-width: 500px;
    }
}

.entry {
    .meta {
        color: gray;
        margin: 2pt 4pt;
        font-size: 12pt;
    }

    .content {
        margin: 10pt;
        font-size: 14pt;
    }

    img {
        max-width: 100%;
    }

    .interactions {
        display: flex;
        justify-content: space-around;
    }
}

#loading {
    // background-image: url('/static/spinner.gif');
    background-color: #fff9;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    transition: background-color 5s;
    transition-timing-function: ease-in;
}

#infinite-scroll-indicator {
    text-align: center;
}

#headerbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: white;
    margin: 0px;
}

// // @font-face {
// //     font-family: 'avenir';
// //     src: url('/static/avenir-font/AvenirLTStd-Medium.otf');
// //     font-weight: normal;
// //     font-style: normal;
// // }

// html {

//     // font-family: "avenir";
//     // font-weight: 400;
//     // font-style: normal;

//     // background-color: #e9e9ed;
//     border: 1px solig gray;
//     // border-radius: 5px;
//     font-family: "DejaVu Serif";
// }

// div.entry {
//     // background-color: green;
//     border: 1px solid gray;
//     padding: 10px 15px;
//     margin: 0px;

//     div.entrymeta {
//         display: flex;
//         justify-content: left;
//         align-items: center;
//         gap: 15px;
//         cursor: pointer;

//         span.time {
//             // background-color: red;
//             color: gray;
//         }

//         span.user {
//             // background-color: blue;
//             text-decoration: underline;
//         }

//         img.userimage {
//             width: 80px;
//         }
//     }

//     div.contents {
//         // background-color: yellow;

//         p {
//             // background-color: orange;
//             margin: 8pt 0pt;
//         }
//     }

//     img {
//         max-width: 100%;
//     }

//     &.comment {
//         border: none;
//         padding: 0px 15px;
//         margin: 0px;

//         display: flex;
//         gap: 5px;

//         .left {
//             width: 70px;
//             display: flex;
//             flex-direction: column;
//             // background-color: green;

//             .spacer {
//                 background-color: black;
//                 height: 100%;
//                 width: 6%;
//                 margin: 0px 47%;
//             }
//         }
//         // .right {
//         //     background-color: red;
//         // }
//         // .contents {
//         //     display: flex;
//         // }
//     }
// }

form {
    display: flex;
    flex-direction: column;

    * {
        margin: 4px 6px;
    }

    textarea {
        // width: 100%;
        resize: vertical;
        font-size: 1rem;
    }

    &.create {
        border: 1px solid gray;
        padding: 10px 15px;
        margin: 0px;
    }

    hr {
        width: 100%;
    }
}

// input,
// textarea,
// button,
// select {
//     padding: 4pt 6pt;
//     margin: 3pt 0pt;
//     border: 2px solid black;
//     cursor: pointer;
//     box-shadow: 0px 0px;

//     &:hover {
//         box-shadow: 1px 1px;
//     }

//     &:focus {
//         box-shadow: 3px 3px black;
//         outline: none;
//     }
// }

// button {
//     background-color: #ffabcd;
// }

// #response {
//     div {
//         padding: 4pt 6pt;
//     }

//     .error {
//         color: red;
//     }
// }

// .post {
//     border: 1px solid black;
//     padding: 15px 15px;
//     margin: 10px 0px;
//     img {
//         max-width: 100%;
//         max-height: 800px;
//     }
//     .meta {
//         color: gray;
//     }
//     .content {
//         margin: 10px 0px;
//     }
// }