:root {
  --color_base: #fac6c6;
  --color_mag: #fc929d;
  --color_ink: #282724;
  --color_highlight: #fd3a3a;
  --magazine: 56rem;
  --mag_col: 12rem;
  --gap: 1.25rem;
  --gap_half: calc(var(--gap) / 2);
  --border_sm: 1px;
  --border_md: 3px;
}
@media screen and (min-width: 32.5rem) {
  :root {
    --gap: calc(var(--magazine) / 24);
  }
}

body {
  min-width: 20rem;
  background-color: var(--color_base);
  color: var(--color_ink);
  font-family: 'Jost', sans-serif;
  margin: 0;
}

figure,
figcaption {
  margin: 0;
}

p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 0;
  text-align: justify;
}
@media screen and (min-width: 40.625rem) {
  p {
    font-size: 0.8rem;
  }
}
p:last-child {
  margin: 0;
}


::-moz-selection {
  background-color: var(--color_highlight);
}

::selection {
  background-color: var(--color_highlight);
}

.u-txt-center {
  text-align: center;
}

.c-heading {
  font-weight: normal;
  margin: 0;
}
.c-heading:not(.c-heading--03) {
  text-transform: uppercase;
}
.c-heading--01, .c-heading--03, .c-heading--05 {
  font-family: 'Jost', sans-serif;
}
.c-heading--02, .c-heading--04 {
  font-family: 'Jost', sans-serif;
  letter-spacing: 0.2rem;
}
.c-heading--01 {
  font-size: 5.5rem;
  line-height: 1.1;
  margin-top: 1rem;
  font-weight: 900;
}
@media screen and (min-width: 32.5rem) {
  .c-heading--01 {
    font-size: 7rem;
    font-weight: 900;
  }
}
@media screen and (min-width: 40.625rem) {
  .c-heading--01 {
    font-size: 10rem;
    margin-top: 1rem;
    font-weight: 900;
  }
}
.c-heading--02 {
  font-size: 1rem;
  line-height: 1.7;
}
.c-heading--03 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-top: calc(var(--gap_half) / -2);
  margin-bottom: calc(var(--gap_half) / 2);
  padding-bottom: 1rem;
}
@media screen and (min-width: 32.5rem) {
  .c-heading--03 {
    font-size: 1.7rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
@media screen and (min-width: 53.125rem) {
  .c-heading--03 {
    font-size: 2.2rem;
  }
}
.c-heading--04 {
  border-top: var(--border_sm) solid var(--color_ink);
  border-bottom: var(--border_sm) solid var(--color_ink);
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.3;
  padding: 0.3rem 0;
}
@media screen and (min-width: 32.5rem) {
  .c-heading--04 {
    font-size: 0.9rem;
  }
}
.c-heading--05 {
  font-size: 1.2rem;
  line-height: 1;
}

.o-grid {
  --minmax: var(--mag_col);
  max-width: var(--magazine);
  background-color: var(--color_mag);
  border-left: var(--border_sm) solid var(--color_ink);
  border-right: var(--border_sm) solid var(--color_ink);
  display: grid;
  grid-template: auto/var(--gap) repeat(2, 1fr) minmax(var(--minmax), 1fr) var(--gap);
  grid-template-areas: ". header header header ." ". subheader subheader subheader ." ". profile profile profile ." ". content content content ." ". work-sample work-sample work-sample ." ". footer footer footer .";
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap_half);
  margin: 0 auto;
  padding-top: var(--gap);
	
}
@media screen and (min-width: 40.625rem) {
  .o-grid {
    --minmax: 15rem;
    grid-template-areas: ". header header header ." ". subheader subheader subheader ." ". content content profile ." ". work-sample work-sample profile ." ". footer footer footer .";
  }
}
.o-grid__area-01 {
  grid-area: header;
}
.o-grid__area-02 {
  grid-area: subheader;
}
.o-grid__area-03 {
  grid-area: profile;
}
.o-grid__area-04 {
  grid-area: content;
}
.o-grid__area-05 {
  grid-area: work-sample;
}
.o-grid__area-06 {
  grid-area: footer;
}

.o-header {
  border-top: var(--border_md) solid var(--color_ink);
  border-bottom: var(--border_md) solid var(--color_ink);
  padding: calc(var(--gap_half) / 4) 0;
  position: relative;
}
.o-header:before {
  width: 100%;
  content: "";
  border-top: var(--border_sm) solid var(--color_ink);
  position: absolute;
  top: var(--border_md);
  left: 0;
}

.o-profile {
  position: relative;
}
@media screen and (max-width: 32.438rem) {
  .o-profile {
    margin-bottom: var(--gap_half);
  }
}
.o-profile:after {
  width: 100%;
  height: 100%;
  background-color: var(--color_base);
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23282724' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.o-profile__inner {
  background-color: var(--color_base);
  border-bottom: var(--border_md) solid var(--color_ink);
  padding: var(--gap);
  position: relative;
  z-index: 10;
  
}
@media screen and (min-width: 40.625rem) {
  .o-profile__inner {
    padding: var(--gap_half);
  }
}

/**/

@media screen and (max-width: 600px) {
  .c-heading--01 {
  font-size: 4rem;
  line-height: 1.1;
  margin-top: 1rem;
  font-weight: 900;
}
  }
}

.o-media {
  background-color: var(--color_base);
}
.o-media__img {
  width: 100%;
}
.o-media__caption {
  font-family: 'Jost', sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: var(--gap);
}
@media screen and (min-width: 32.5rem) {
  .o-media__caption {
    margin-bottom: var(--gap_half);
  }
}
@media screen and (min-width: 40.625rem) {
  .o-media__caption {
    font-size: 1rem;
  }
}
.o-media__legend {
  border-bottom: var(--border_sm) solid var(--color_ink);
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0 var(--gap_half) 0.3rem;
}

.o-content {
  -moz-columns: var(--mag_col);
       columns: var(--mag_col);
  -moz-column-gap: var(--gap);
       column-gap: var(--gap);
}

.o-footer {
  margin: var(--gap_half) 0;
}
.o-footer p {
  line-height: 1.3;
  opacity: 0.8;
  word-break: break-all;
}


  /* */



 /* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #e06f6f #ebc5c8;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #ebc5c8;
}

*::-webkit-scrollbar-thumb {
  background-color: #e06f6f;
  border-radius: 20px;
  border: 3px solid #ebc5c8;
}


/*Selection*/
::-moz-selection { /* Code for Firefox */
  color: white;
  background: #fb365c;
}

::selection {
  color: white;
  background: #fb365c;
}


/* Link Style 5 */

a:not(.logo) {
	color: black;
	background-image: linear-gradient(to bottom, transparent 65%, #f85b5b 0);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	text-decoration: none;
  font-weight: bold;
	transition: background-size .4s ease;
}

a:not(.logo):hover {
	background-size: 100% 100%;
	cursor: pointer;
}

/* Underline */
.underline {
    --line: #faa5a5;
    --color: #31282d;
    text-decoration: none;
    color: var(--color);
    position: relative;
  }
  .underline span {
    background-image: -webkit-gradient(linear, left bottom, left top, from(var(--line)), to(var(--line)));
    background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: var(--background-size, 100%) 1px;
    -webkit-transition: background-size 0.2s linear var(--background-delay, 0.15s);
    transition: background-size 0.2s linear var(--background-delay, 0.15s);
    font-size: 16px;
    line-height: 20px;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  .underline svg {
    vertical-align: top;
    display: inline;
    line-height: 1;
    width: 13px;
    height: 20px;
    position: relative;
    left: -2px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
    stroke: var(--line);
    stroke-dasharray: 7.95 30;
    stroke-dashoffset: var(--stroke-dashoffset, 46);
    -webkit-transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
    transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
  }
  .underline:hover {
    --background-size: 0%;
    --background-delay: 0s;
    --stroke-dashoffset: 26;
    --stroke-duration: .3s;
    --stroke-easing: cubic-bezier(.3, 1.5, .5, 1);
    --stroke-delay: .195s;
    color: #ffa7b9;
  }

/*Logo*/
.logo {
    position: fixed;
    left: 10%;
	z-index:99;
	top:20px;
	margin-top:-5px!important;
	margin-left:-40px!important;
}

.logo img {
	width:80px;
}

a.logo img:last-child {
  display: none;  
}
a.logo:hover img:last-child {
  display: block;  
}
a.logo:hover img:first-child {
  display: none;  
}

/* Cursor */
  .trail { /* className for the trail elements */
    position: absolute;
    height: 6px; width: 6px;
    border-radius: 3px;
    background: #fb0434;
  }
  
  
  /*Highlight*/
.highlight
{
font-weight:bold;
}


/*Dropcap*/
@import url(https://fonts.bunny.net/css?family=bungee-shade:400);



 span .wpsdc-drop-cap,
        span.dropcap,
        .has-drop-cap:not(:focus)::first-letter,
        .is-style-dropcap::first-letter {
            float: left;
            margin-right: .75rem;
            margin-top: .35rem;
            --tw-bg-opacity: 1;
            background-color: rgb(232 25 43/var(--tw-bg-opacity));
            padding-top: .25rem;
            padding-bottom: .25rem;
            padding-left: 1rem;
            padding-right: 1rem;
            font-size: clamp(3.797rem, 8vw, 5.125rem);
            font-weight: 900;
            line-height: clamp(3.417rem, 7.21vw, 4.613rem);
            --tw-text-opacity: 1;
            color: rgb(255 255 255/var(--tw-text-opacity))
            font-family: 'Bungee Shade', display;
        }

        @media print {

            span .wpsdc-drop-cap,
            span.dropcap,
            .has-drop-cap:not(:focus)::first-letter,
            .is-style-dropcap::first-letter {
                float: none;
                margin-right: 0;
                padding-left: 0;
                padding-right: 0;
                padding-top: 0;
                padding-bottom: 0;
                font-family: 'Bungee Shade', display;
                font-size: clamp(1.125rem, 2.05vw, 1.313rem);
                line-height: 140%;
                --tw-text-opacity: 1;
                color: rgb(0 0 0/var(--tw-text-opacity))
            }

            @media(min-width:1024px) {

                span .wpsdc-drop-cap,
                span.dropcap,
                .has-drop-cap:not(:focus)::first-letter,
                .is-style-dropcap::first-letter {
                    padding-left: 0;
                    padding-right: 0
                }
            }