@import url(‘https://fonts.cdnfonts.com/css/cubano’);

body {
background-color:#7C3227;
background-image: url(‘https://www.gwhatchet.com/wp-content/uploads/2022/08/pngwing.com_.png’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}

.head-container {
text-align: center;
margin: 35px auto;
width: fit-content;
padding: 0.5em;
padding-left: 2em;
}

.title-type1 h1 {
font-family: ‘Cubano’, sans-serif;
color: rgb(62, 124, 177);
font-size: 55px;
width: auto;
margin: 0 auto;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em transparent; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
letter-spacing: .05em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}

.title-type2 h1 {
font-family: ‘Cubano’, sans-serif;
color: rgb(124, 50, 39);
font-size: 55px;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .08em solid rgb(247, 149, 80); /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .18em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
animation-delay: 3s;
}

@keyframes typing {
from { max-width: 0 }
to { max-width: 100% }
}

@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: rgb(247, 149, 80); }
}

@media (max-width: 900px) {
.title-type1-front {
display: none;
}

.head-container {
width: 80%;
margin-left: auto;
margin-right: auto;
padding-left: 0;
}

.title-type2 h1 {
white-space: none;
font-size: 25px;
}

}

.blank-slate-container {
font-family:’Cubano’, sans-serif;
max-width:1000px;
margin: 0 auto;
padding-left: 75px;
font-weight: bold;
}

.blank-slate-container .blank-slate-container {
padding:0
}

.blank-slate-container * {
box-sizing:border-box
}

.blank-slate-container header {
padding:10px;
text-align:center;
max-width:800px;
margin:0 auto;
font-size:15pt
}

.blank-slate-container header div {
display:inline-block;
text-align:right;
position:relative;
margin-top:calc(1rem + 10px);
}

.blank-slate-container header span {
font-weight:700;
text-transform:uppercase;
font-size:1.5rem;
margin-bottom:50px;
position:absolute;
right:0;
top:calc(-1.5rem – 10px)
}

.blank-slate-container header h1 {
text-transform:uppercase;
font-weight:700;
font-size:3rem;
margin:0;
display:inline-block;
line-height:3rem;
font-family:’Cubano’, sans-serif
}

.blank-slate-container header span,.blank-slate-container header h1 {
color:white;
background-color:#402666;
padding:5px
}

.blank-slate-container h3.category-header {
text-align:center;
font-size:30pt;
background-color:#402666;
color: white;
font-family:’Cubano’, sans-serif;
text-transform:uppercase;
margin:0
}

.blank-slate-container .bonw-section {
display:flex;
margin:0 -10px;
flex-wrap:wrap
}

.blank-slate-container .bonw-section:not(:last-of-type) {
margin-bottom:50px
}

.blank-slate-container .bonw-category {
display:block;
height:220px;
border-radius: 3em;
overflow:hidden;
position:relative;
margin:10px;
min-width:400px;
flex-basis: auto;
flex:1
}

.blank-slate-container .bonw-category .left-section,.blank-slate-container .bonw-category .right-section {
width: 100%;
height:100%;
overflow: hidden
}

.blank-slate-container .bonw-category .left-section {
position:relative;
max-width:100%;
}

.blank-slate-container .bonw-category .left-section h3 {
position:absolute;
top:1.75em;
left:1em;
max-width:85%;
margin: 5px;
margin-top: 10px;
transition:left 0.25s ease-in;
text-align: center;
text-transform:uppercase;
font-size:25pt;
color:white;
font-family:’Cubano’, sans-serif;
text-shadow:#7C3227 1px 1px 5px;
}

.blank-slate-container .bonw-category .left-section img {
height:100%;
width:100%;
object-fit:cover
}

.blank-slate-container .bonw-category .right-section {
background-color:rgba(0,0,0,0.5);
color:white;
transition:flex 0.25s ease-in;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
padding:20px;
position:absolute;
left:100%;
top:0;
transition:left 0.25s ease-in
}

.blank-slate-container .bonw-category .right-section .editors-choice {
text-transform:uppercase;
font-weight:bold;
font-family:’Cubano’, sans-serif
}

.blank-slate-container .bonw-category .right-section h4 {
font-weight:bold;
text-transform:uppercase;
font-size:16pt;
margin:10px 0;
font-family:’Cubano’, sans-serif;
color:rgb(62, 124, 177);
text-shadow:rgb(124, 50, 39) 1px 2px 2px;
}

.blank-slate-container .bonw-category .right-section p {
margin:0 auto 10px auto;
max-width:350px;
font-family:’Cubano’, sans-serif;
display:none
}

.blank-slate-container .bonw-category .right-section .read-more span {
display:inline-block;
padding:5px 10px;
margin:10px;
background-color:white;
color:black;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
font-family:’Cubano’, sans-serif
}

.blank-slate-container .bonw-category:not(.category-header):hover .left-section h3 {
left:-100%
}

.blank-slate-container .bonw-category:not(.category-header):hover .right-section {
left:0
}

.blank-slate-container .bonw-category.category-header {
background-color:#402666;
height:175px;
display:none
}

.blank-slate-container .bonw-category.category-header .left-section {
display:flex;
justify-content:center;
flex-direction:column
}

.blank-slate-container .bonw-category.category-header h3 {
text-align:center;
position:initial
}

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

.blank-slate-container .bonw-section {
display:block
}

.blank-slate-container .bonw-category {
height:350px;
min-width:75vw;
max-width:none
}

.blank-slate-container .bonw-category.category-header {
height:auto
}

.blank-slate-container .bonw-category.category-header h3 {
font-size:1.5rem
}
}

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

.blank-slate-container header div {
margin-top:calc(0.75rem + 10px)
}

.blank-slate-container header h1 {
font-size:1.5rem;
line-height:1.5rem
}

.blank-slate-container header span {
font-size:0.75rem;
top:calc(-0.75rem – 10px)
}

.blank-slate-container .bonw-section:not(:last-of-type) {
margin-bottom:30px
}

.blank-slate-container .bonw-category .left-section h3 {
font-size:28pt
}
}

body.ios header {
display:none
}

body.ios .blank-slate-container header {
display:block
}

body.ios .blank-slate-container header h1 {
margin:0
}

body.ios article.post {
padding-left:0;
padding-right:0
}