body,
 html {
    font-size: 16px;
    background-color: #E4DFDB;
    margin: 0;
    padding: 0;

 }

 #check,
 input[type='checkbox'] {
    opacity: 0;
    display: none;
 }

 #mobile {
    display: block;
 }

 ::-moz-selection {
    color: #7c4c0e;
    background: #ceead7;
 }

 ::selection {
    color: #7c4c0e;
    background: #ceead7;
 }

 label {
    color: #696561;
    font-family: "Public Sans", serif;
    font-optical-sizing: auto;
    font-size: 0.75rem;
    font-weight: 400;
    margin-left: auto;
    word-spacing: 0.25rem;
    margin-right: auto;
    word-break: break-word;
    padding-right: 0.625rem;
    line-height: 2.1875rem;
    text-align: left;
    font-style: normal;
    display: block;
 }

 input,
 textarea {
    width: 60%;
    outline: none !important;
    margin: 0px;
    padding: 0.3125rem 1.25rem;
    box-sizing: border-box;
    border: dashed 0.0625rem #99a6b0;
    background-color: #f8f8f8;
    font-size: 0.75rem;
    resize: none;
    font-family: "Public Sans", serif;
    color: #939191;
    text-align: justify;
    line-height: 2.1875rem;

 }


 input:focus,
 textarea:focus {
    font-weight: 800;


 }


 button {
    outline: none !important;
    padding: 0rem 1.25rem;
    box-sizing: border-box;
    border: dashed 0.0625rem #99a6b0;
    margin: 0rem;
    background-color: #f8f8f8;
    font-size: 0.75rem;
    resize: none;
    color: #727272;
    font-family: "Public Sans", serif;

    display: block;
    text-align: justify;
    line-height: 2.1875rem;
 }






 .credit,
 .credit a:link,
 .credit a,
 .credit a:visited,
 .credit a:hover {
    font-family: 'Roboto', sans-serif;
    color: #939191;
    font-size: 0.438rem;
    position: fixed;
    left: 0px;
    text-transform: uppercase;
    letter-spacing: 0.125rem;
    padding: 0.313rem;
    border-radius: 1rem;
    bottom: 0px;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.4);
 }

 .show {
    line-height: 3.125rem;
    text-align: center;
    display: none;
    color: #413f38;
    font-family: "Merriweather", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.75rem;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: underline;

 }


 .navi {
    position: sticky;
    top: 0px;
    width: 100%;
    background-color: #B09C5F;
    height: 3.125rem;
    background-image: url(images/line1.png), url(images/line2.png);
    background-position: top right, bottom right;
    background-size: 17.625rem 0.25rem;
    background-repeat: repeat-x, repeat-x;
    z-index: 999;
    box-shadow: 0.125rem 0.125rem 3.8125rem -0.375rem rgba(0, 0, 0, 0.692);
    -webkit-box-shadow: 0.125rem 0.125rem 3.8125rem -0.375rem rgba(0, 0, 0, 0.692);
    -moz-box-shadow: 0.125rem 0.125rem 3.8125rem -0.375rem rgba(0, 0, 0, 0.692);

 }

 .menu {
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-align: center;
    line-height: 3.125rem;
    font-family: "Merriweather", serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.5313rem;
    text-transform: uppercase;

 }


 .dropdown {
    position: relative;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    list-style: none;
 }

 .menu li {
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    display: inline-block;
    padding: 0px 2.5rem;

 }

 .menu li a:link,
 .menu li a,
 .menu li a:visited,
 .menu a,
 .menu a:visited {
    color: #413f38;
    text-align: center;
    text-decoration: none;

 }



 .menu li:hover {
    background-color: #BDA769;



 }

 .sub-menu {

    margin: 0px;
    padding: 0px 0px;
    width: 10rem;
    font-size: 0.5313rem;
    display: none;
    list-style: none;
    text-align: center;
    z-index: 99;
    position: absolute;
    background-color: #ac995e;

 }

 .dropdown-arrow {
    vertical-align: middle;
    font-size: 0.625rem;
    margin-left: -0.1875rem;
    color: #57544c;

 }

 .submenu-arrow {
    vertical-align: middle;
    font-size: 0.4375rem;
    padding-right: 0.625rem;
    color: #57544c;
 }


 .sub-menu li,
 .sub-menu li a:visited {
    line-height: 1.25rem;
    display: block;
    border-bottom: #807662 dashed 0.0625rem;
    text-align: left;
    padding: 0.625rem 0.625rem;
    color: #5d5a51;

 }

 .sub-menu li:hover {
    background-color: #a8955c;
 }


 .sub-menu li a:link,
 .sub-menu li a,
 .submenu li a:visited {
    font-size: 0.5313rem;

 }


 .dropdown:hover .sub-menu {
    display: block;

 }


 .containerouter {
    margin-bottom: 0.3125rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    max-width: 63.75rem;
    width: 95%;
 }


 .sideouter {
    max-width: 3.125rem;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 8;
    flex-direction: column;
 }

 .line {
    margin-top: 3.75rem;
    margin-bottom: 2.5rem;
    height: 12.5rem;
    width: 0.1563rem;
    background-color: #A4A19A;
 }

 .homelink {
    font-size: 2.0625rem;
    letter-spacing: 0.0625rem;
    transform: scale(-1);
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    text-orientation: mixed;
    writing-mode: vertical-rl;
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #38362E;
 }

 .homelink a:link,
 .homelink a:visited {
    color: #38362E;
    padding: 0.625rem 0.3125rem;
    border-radius: 0.625rem;
    text-decoration: none;
 }

 .homelink a:hover {
    color: #38362E;

    text-decoration: line-through;
 }


 .container {
    max-width: 61.25rem;
    width: 100%;
    background-color: #FFFFFF;
    -webkit-box-shadow: 0rem 0rem 5.25rem -0.8125rem rgba(87, 87, 87, 1);
    -moz-box-shadow: 0rem 0rem 5.25rem -0.8125rem rgba(87, 87, 87, 1);
    box-shadow: 0rem 0rem 5.25rem -0.8125rem rgba(87, 87, 87, 1);
 }


 .top {
    width: 100%;
    background-color: #332E24;
    height: 1.5625rem;
 }


 .content {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    width: 90%;
 }

 img {
    max-width: 100%;
    height: auto;
 }

 .side {

    margin-bottom: 1.25rem;
    text-align: center;
    width: 22%;
 }

 .side img {
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    max-width: 10.3125rem;
    height: auto;
    padding-bottom: 0.9375rem;
    width: 100%;
 }





 .introduction a:link,
 .introduction a:visited {
    display: block;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-family: "Public Sans", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    text-align: left;
    font-size: 0.5625rem;
    text-decoration: none;
    line-height: 0.75rem;
    border-bottom: 0.0625rem solid #e2e1e1;
    text-transform: uppercase;
    color: #c6c6c6;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding-right: 0.625rem;
    padding-left: 1.625rem;
    line-height: 1.5625rem;
 }


 .introduction a:hover {
    background-color: #fcfcfc;
 }

 .introduction {}

 .introduction p {
    font-family: "Public Sans", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    text-align: justify;
    font-size: 0.75rem;
    color: #A09E9E;
    font-style: normal;
    line-height: 1.875rem;
 }

 .introduction h1 {
    font-family: "Merriweather", serif;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 0.3125rem;
    font-style: normal;
    color: #747474;
    font-size: 0.6875rem;
    letter-spacing: 0.1875rem;
    text-align: justify;

 }

 .introduction h2 {
    padding-left: 0.3125rem;
    letter-spacing: 0.0313rem;
    padding-top: 1.5625rem;
    font-family: "Public Sans", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    text-align: justify;
    font-size: 0.7813rem;
    padding-bottom: 0.625rem;
    line-height: 0.75rem;
    text-transform: uppercase;
    color: #c3c3c3;

 }

 .introduction-icon {
    margin-top: -0.3125rem;
    padding-right: 0.625rem;
    vertical-align: middle;
    font-size: 1.25rem;
    color: #c9c8c8;
 }

 blockquote {
    margin: 0.9375rem 0rem;
    padding: 0.625rem 1.25rem;
    background-color: #f4f8f5;
    border-left: 0.3125rem solid #e1e0dd;

 }




 .introduction h1::first-letter {
    color: #A36F42;
 }

 .main {
    padding-top: 0.625rem;
    width: 72%;


    color: #928b85;
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-size: 0.75rem;
    font-weight: 400;
    word-spacing: 0.25rem;
    word-break: break-word;
    line-height: 2.1875rem;
    font-style: normal;

 }

 .welcome {
    padding-bottom: 0.625rem;
    margin: 0 auto;
    border-bottom: 0.0625rem solid #EEEEEE;
 }

 .welcome h1 {
    font-family: "Merriweather", serif;
    font-weight: 700;
    letter-spacing: 0.0938rem;
    word-spacing: 0.125rem;
    padding: 0px;
    margin: 0px;
    font-size: 0.7813rem;
    color: #333333;
    line-height: 1.875rem;
    text-transform: uppercase;
    font-style: normal;
 }


 .posts h1 {
    padding: 0px;
    margin: 0px;
    word-spacing: 0.125rem;
    font-family: "Merriweather", serif;
    font-weight: 700;
    letter-spacing: 0.0938rem;
    font-size: 0.7813rem;
    color: #333333;
    line-height: 0.625rem;
    text-transform: uppercase;
    font-style: normal;
 }

 .posts h1::first-letter {
    color: #bd1b8a;
 }

 .posts {
    padding-bottom: 0.9375rem;
    padding-top: 1.5625rem;
    border-bottom: 0.0625rem solid #EEEEEE;
 }


 .content-arrow {
    font-size: 1.625rem;
    margin-top: -0.1875rem;
    color: #808080;
    padding-right: 0.25rem;
    margin-left: -1.875rem;
    vertical-align: middle;
 }


 .icon {
    image-rendering: crisp-edges;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    margin-top: 0.9375rem;
    margin-bottom: -0.875rem;
    width: 100%;
    max-width: 4.0625rem;
    height: auto;
    opacity: 0.90;
    margin-right: 0.625rem;
    vertical-align: middle;
    float: left;
    border: solid 0.125rem #dedede;
    padding: 0.4375rem;

 }

 .icon:hover {
    opacity: 1;
 }


 .welcome h2 {
    margin: 0px;
    padding-left: 0px;
    font-family: "Merriweather", serif;
    font-weight: 700;
    letter-spacing: 0.125rem;
    font-size: 0.5rem;
    line-height: 0.3125rem;
    color: #cecece;
    text-transform: uppercase;
    font-style: normal;

 }

 .posts h2 {
    margin-left: -0.0625rem;
    font-family: "Merriweather", serif;
    font-weight: 700;
    letter-spacing: 0.125rem;
    font-size: 0.5rem;
    line-height: 0.3125rem;
    color: #cecece;
    text-transform: uppercase;
    font-style: normal;
    word-spacing: 0.625rem;
 }

 .posts-icon {
    padding-right: 0.375rem;
    vertical-align: middle;
    font-size: 1rem;
    margin-top: -0.125rem;
    fill: 0;
 }

 .material-symbols-outlined {
    font-variation-settings:
       'FILL' 0,
       'wght' 500,
       'GRAD' 0,
       'opsz' 24
 }

 .main p {
    color: #928b85;
    font-family: "Public Sans", serif;
    font-optical-sizing: auto;
    font-size: 0.75rem;
    font-weight: 400;
    margin-left: auto;
    word-spacing: 0.25rem;
    margin-right: auto;
    word-break: break-word;
    padding-right: 0.625rem;
    line-height: 2.1875rem;
    
    font-style: normal;
 }

 ul,
 ol {
    margin: 0px;
    padding: 0px 0px;
    list-style-position: inside;
    color: #b9b1aa;

    list-style-type: hiragana-iroha;
 }

 ::marker {
    color: #6b6561;

 }


 .stuff h3,
 .main h3 {
    text-align: left;
    color: #928b85;

    font-family: "Public Sans", serif;
    font-optical-sizing: auto;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    word-spacing: 0.25rem;
    letter-spacing: 0.0625rem;
    word-break: break-word;
    line-height: 1.625rem;
    font-style: normal;

 }

 .stuff {
    margin-top: 0.625rem;
    text-align: left;
    color: #928b85;
    font-family: "Public Sans", serif;
    font-optical-sizing: auto;
    font-size: 0.75rem;
    font-weight: 400;
    word-spacing: 0.25rem;
    word-break: break-word;
    line-height: 2.1875rem;
    font-style: normal;

 }

 .stuff img {
    height: auto;
    max-width: 100%;
    padding: 0.3125rem;
    border: solid 0.125rem #dedede;
    margin: 0.3125rem;
    opacity: 0.90;
    vertical-align: middle;
    image-rendering: crisp-edges;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;

 }


 .stuff img:hover {
    opacity: 1;
 }

 i {
    color: #88a0dc;
 }

 s {
    color: #de86af;

 }

 em {
    color: #ba4b6a;
    letter-spacing: 0.0313rem;
 }

 b {
    color: #961373;
 }


 .main a:link,
 .main a,
 .main a:visited {
    color: #7990a3;

 }

 .main a:hover {
    color: #66717A;



 }

 .prev {
    padding-right: 0.625rem;
 }

 .next {
    padding-left: 0.625rem;
 }

 .pagination {
    padding-top: 0.9375rem;
    text-align: center;

 }

 .pagination-icon {
    font-size: 0.625rem;
    margin-top: -0.125rem;
    padding: 0px 0.125rem;
    vertical-align: middle;
 }


 .pagination-icon:hover {
    color: #928b85;


 }


 .pagination a,
 .pagination a:link,
 .pagination a:visited {
    color: #928b85;
    margin: 0px 0.125rem;
    font-family: "Public Sans", serif;
    font-optical-sizing: auto;
    font-size: 0.5313rem;
    word-break: break-word;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-style: normal;
 }

 .pagination a:hover {}

 .header {
    position: relative;
    max-width: 61.25rem;
    width: 100%;
    overflow: hidden;
    height: 31rem;
    background: linear-gradient(183deg, rgba(30, 29, 29, 0.5999649859943977) 0%, rgba(250, 250, 250, 0) 23%, rgba(250, 250, 250, 0) 64%, rgba(250, 250, 250, 0.5747549019607843) 90%),
       url("/divider.png") bottom center/contain no-repeat,
       url("/header4.png") center left/cover no-repeat;

 }

 .title {
    transform: rotate(-3deg);
    position: absolute;
    left: 45%;
    top: 50%;
    font-family: "Nothing You Could Do", cursive;
    font-weight: 400;
    font-style: normal;
    color: #352A27;
    max-height: 10rem;
    user-select: none;
 }

 .word-one {
    font-size: 3.4375rem;
    display: block;
    margin: 0px;
    padding: 0px;

    text-align: center;
    opacity: 0.70;

 }

 .word-two {
    display: block;
    font-size: 7.1875rem;
    margin-top: -5rem;
    filter: blur(0.0313rem);
    text-align: center;
    opacity: 0.20;
 }


 .footer {
    color: #7B7A79;
    background-color: #332F25;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #696560;
    text-transform: uppercase;
    font-family: "Public Sans", serif;
    font-optical-sizing: auto;
    font-size: 0.5625rem;
    letter-spacing: 0.0938rem;
    font-weight: 400;
    word-break: break-word;
    padding: 0.9375rem 3.125rem;
    margin-top: 3.125rem;
    font-style: normal;

 }

 .footer a,
 .footer a:link,
 .footer a:visited {
    color: #535352;
    padding: 0px 0.3125rem;
    text-decoration: none;
 }

 .footer-info {}

 .footer-links {}

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

    .title {
       left: 0%;
       top: 50%;
    }

    .navi {
       min-height: 3.125rem;
       height: auto;
    }

    .show,
    .dropdown,
    .menu li {
       display: block;
       border-bottom: #807662 dashed 0.0625rem;

    }

    .sub-menu,
    .side,
    .main {
       width: 100%;
       display: block;
       position: static;
    }

    .sub-menu li {
       text-align: center;
    }

    .content {
       flex-direction: column;

    }

    .content-arrow {

       margin-left: 0px;

    }

    .welcome h2 {
       padding-left: 1.875rem;

    }

    #mobile {
       display: none;
    }

    #check:checked~#mobile {
       display: block;
    }


    #check:not(:checked)~#mobile {
       display: none;
    }


 }



 @media screen and (min-width: 1920px) {
    html {
       font-size: 125%;

    }
 }