html {
    font-size: 16px;

}

body {

    background-image: url(images/pat.png);
    background-size: 38.75rem 35.1875rem;
    padding: 0px;

    margin: 0px;

}

.header {
    background-image: url(images/divide.png), url(images/blogbannerALT1.jpg);
    max-width: 48.9375rem;
    width: 100%;
    height: 25.3125rem;
    background-position: bottom center, top center;
    background-size: contain, cover;
    background-repeat: no-repeat, no-repeat;
}

.pink-line {
    height: 1.5625rem;
    z-index: 99;
    position: sticky;
    width: 100%;
    top: 0px;
    border-top: solid 1.25rem #1F1B22;
    margin-bottom: 0.875rem;
    background-color: #D9427E;
}

.outer {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 51.875rem;
    width: 100%;
}

.container {
    width: 100%;
    max-width: 48.9375rem;
    padding: 0px;

}


.deco {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.box-one {
    margin-top: 5.625rem;
    width: 2rem;
    height: 2.625rem;
    background-color: #B7F1AA;
}



.box-two {
    margin-top: 1.125rem;
    width: 2rem;
    height: 2.625rem;
    background-color: #D9427E;
}

.header-line {
    margin-top: 1.375rem;
    background-color: #97506D;
    width: 0.3125rem;
    height: 11.875rem;
}


.title {
    max-width: 49.375rem;
    width: 100%;
    position: sticky;
    top: 2.5rem;
    z-index: 99;
    background-image: url(images/pat.png);
    background-size: 38.75rem 35.1875rem;
    display: flex;
    align-items: center;
}

.title h1 {

    padding: 0px;
    text-transform: uppercase;
    margin: 0px;
    font-weight: 400;
    color: #f3f3f3;
    font-size: 1.4375rem;
    font-family: "Bodoni Moda", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    letter-spacing: 0.0938rem;
    font-style: normal;
}

.title h1::first-letter {
    color: #CFFAAE;
}



.title:before {
    content: "";
    flex: auto;
    margin-right: 0.625rem;
    background-color: #f3f3f3;
    height: 0.1563rem;



}



.content {
    display: flex;
    justify-content: space-between;


}

.side {
    max-width: 11.875rem;
    width: 100%;
    margin-bottom: 1.25rem;
    margin-left: 0.3125rem;

}

.side p {}

.menu {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    list-style: inside;
    padding: 0px;
    text-align: left;
    list-style-type: upper-roman;

}

::marker {
    font-family: "Times New Roman", Times, serif;
    font-weight: 500;
    font-size: 0.625rem;
    color: #78757e;

}


.menu li {
    overflow: hidden;
    padding: 0.125rem 0.1875rem;
    overflow: hidden;
    margin: 0px 0.1875rem;
    border-bottom: solid 0.0625rem #78767d;
    margin-bottom: 0.9375rem;


}

.menu li:hover {
    background-color: #322b3742;

}

.menu li:first-of-type {
    background-color: #322b3742;
}

.menu li a,
.menu li a:visited {
    white-space: nowrap;
    overflow: hidden;
    white-space: nowrap;
    float: right;
    line-height: 1.25rem;
    letter-spacing: 0.0625rem;
    font-size: 0.5625rem;
    text-overflow: ellipsis;
    max-width: 8.75rem;
    text-transform: uppercase;
    text-decoration: none;
    color: #848289;
    border: 0;

}



.posts {
    width: 100%;
    max-width: 35rem;
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    word-spacing: 0.0625rem;
    color: #A8A4B0;
    font-size: 0.75rem;
    font-style: normal;
    line-height: 2.1875rem;

}

.footer {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    height: 1.25rem;
    width: 100%;
    background-color: #f3f3f3;
}


p {

    margin: 0px;
    padding: 0.625rem 0px;
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    word-spacing: 0.0625rem;
    text-align: justify;
    line-height: 2.1875rem;
    color: #A8A4B0;
    font-size: 0.75rem;
    font-style: normal;
}


.posts h4 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    text-align: justify;
    letter-spacing: 0.125rem;
    line-height: 2.1875rem;
    color: #A8A4B0;
    margin: 0px;
    padding: 0px;
    text-transform: uppercase;
    font-size: 0.875rem;
}

h2 {
    text-transform: uppercase;
    text-align: right;
    letter-spacing: 0.25rem;
    font-size: 0.5625rem;
    padding-top: 0.3125rem;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    line-height: 1.25rem;
    color: #8D8993;
}

h3 {
    text-transform: uppercase;
    text-align: right;
    letter-spacing: 0.25rem;
    font-size: 0.5313rem;
    padding-top: 0.3125rem;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    clear: both;
    color: #6B6871;
}

.side h3 {
    margin-top: 1.875rem;
    margin-bottom: 0.625rem;
}

.side h3:first-of-type {
    margin-top: 0.3125rem;

}


.posts h1 {
    font-family: "Times New Roman", Times, serif;
    font-optical-sizing: auto;
    font-weight: 400;
    word-spacing: 0.0625rem;
    text-align: right;
    line-height: 1.5625rem;
    text-transform: uppercase;
    color: #c2beca;
    font-size: 1rem;
    font-style: normal;
    letter-spacing: 0.125rem;
    padding: 0px;
    margin: 0px;

}

.divider {
    height: 0.0313rem;
    background-color: #2e2a2e;
    width: 100%;
    margin: 0.625rem 0px;
}

.pagination {
    text-align: center;
}

.pagination a,
.pagination a:visited {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    word-spacing: 0.0625rem;
    text-align: center;
    margin: 0px;
    text-decoration: none;
    text-transform: uppercase;
    color: #7a7683;
    font-size: 0.625rem;
    font-style: normal;
    border: 0;
}

.pagination a:last-of-type,
.pagination a:first-of-type {
    margin: 0px 0.625rem;
    color: #908c98;
    font-size: 0.5625rem;
    border: 0;
    margin: 0px 0.625rem;
}

.icon {
    padding: 0.625rem;
    float: right;
    border: solid 0.0625rem #4e4b54;

    margin-top: 0.875rem;
    margin-left: 0.9375rem;
    width: 3.125rem;
    height: 3.125rem;
}


}

a.credit:link,
a.credit:visited {
    padding-top: 0.625rem;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    text-transform: uppercase;
    font-style: normal;
    color: #716c76;
    text-align: center;
    display: block;
    margin: 0 auto;
    letter-spacing: 0.1875rem;
    font-size: 0.5rem;
    border: 0;
    text-decoration: none;

}


img {
    max-width: 90%;
    height: auto;
    padding: 0.4375rem;
    border: solid 0.0625rem #4e4b54;
}



strong {
    font-weight: 800;
    color: #f099b5
}

s {
    color: #837f8a;
    font-weight: 800;
}


i {
    color: #96b7ad
}

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

    border-bottom: dashed 0.0625rem #a2e1d4;

}


::-moz-selection {
    color: #dfdad3;
    background-color: #7aa07abd;
}

::selection {
    color: #dfdad3;
    background-color: #7aa07abd;
}


.posts ul,
.posts ol,
.posts li {
    padding: 0px 0px;
    list-style: inside;
    margin: 0px;
    list-style-type: upper-roman;
}

blockquote {
    margin: 1.25rem 0px;
    padding: 1.25rem 1.25rem;
    background-color: #322b3742;
    border-left: 0.1875rem solid #ec6393;
}

label {
    display: block;
}

input,
textarea {
    width: 60%;
    outline: none !important;
    margin: 0px;
    padding: 0.625rem 0.3125rem;
    box-sizing: border-box;
    border: dashed 0.0625rem #99a6b0;
    background-color: #dcd8d8;
    resize: none;
    color: #939191;
    text-align: justify;

}

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

button {
    margin: 0.625rem 0px;
    background-color: #dcd8d8;
    padding: 0.625rem 1.25rem;
    text-transform: uppercase;
    text-align: justify;
}

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

    }
}