@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700;900&display=swap');
:root{
      --main-cta-color: #edbc67;
      --main-cta-color-alpha50: #edbc6740;
      --main-cta-color-alpha10: #edbc6710;
      --sec-cta-color: #3da8c1;
      --sec-cta-color-alpha50: #3da8c140;
      --main-contrast-color: #212a3d;
      --main-white-color: #edbc67;
      --ig-color:#F77737;
      --linkedin-color:#0077b5;
      --email-color:#aaaaaa;
      --ig-color-alpha50:#F7773790;
      --linkedin-color-alpha50:#0077b590;
      --email-color-alpha50:#aaaaaa90;
    }
/* RESET */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: 'Raleway', sans-serif;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

html,
body {
	height:100%;
      margin: 0;
      padding: 0;
      display: block;
      overflow: auto;
}
/* /END RESET */
body {
	background: var(--main-cta-color-alpha10);
	font-family: 'Raleway', sans-serif;
	font-size: 12px;
}

p {
	line-height: 150%;
	margin: 0 0 10px;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--main-contrast-color);
	font-family: 'Raleway', sans-serif;
      font-weight: bold;
}

h1 {
	font-size: 20px;
	margin: 0 0 15px;
}

h2 {
	font-size: 18px;
	margin: 0 0 12px;
}

h3 {
	font-size: 15px;
	margin: 0 0 12px;
}


h4, h5, h6 {
	margin: 5px 0 5px;
}

a img {
	border: none;
	outline: none;
}

a {
	color: var(--main-contrast-color);
	text-decoration: none;
      position: relative;
}

/* remove dotted lines on some links in FF browser */

a,
a:active,
a:visited,
a img {
	outline: none;
}

code[class*=language-], pre[class*=language-]{
      font-size: 16px;
      border-radius: 10px;
}
/* / */
	
/* CLEARFIX */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

* {
      box-sizing: border-box;
      margin: 0;
      padding:0;
    }
/* /END CLEARFIX */

.container{
      max-width: 940px;
      width: 100%;
      margin: 0 auto;
      padding: 10px;
}
.header-block{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-top:10px;
      padding-bottom: 10px;
}
.header-logo{
      padding: 10px;
      font-size: 16px;
      font-weight: 900;
}
.header-menu{
      padding: 10px;
      font-size: 20px;
      font-weight: 500;
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap:10px;
}
.header-menu #night{
      background-color: transparent;
      border: none;
      font-size: 28px;
      cursor: pointer;
}
.header-menu #night:hover{
      color: var(--main-cta-color);
}

html.night .categories .highlight:hover, html.night .post-info .highlight:hover, html.night .post-page-under .highlight:hover{
      color: var(--main-contrast-color);
}
html.night a.highlight:hover, html.night .page-post-content a:hover{
      color: var(--main-contrast-color);
}

.header-info{
      display:flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
}

.header-info .profilepic{
      position: relative;
      padding: 10px;
      -webkit-mask-image: url('../media/brush-y.svg');
      mask-image: url('../media/brush-y.svg');

      -webkit-mask-size: 80% 100%;
      mask-size: 80% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      mask-position: center top;
      -webkit-mask-position: center top;
}
.header-info .profilepic img{
      width: 300px;
      height: auto;
}
.header-info .profile-description{
      padding: 10px;
}
.header-info .profile-description h1, .about h1{
      font-size: 24px;
      color: var(--main-contrast-color);
      font-weight: 900;
}
.header-info .profile-description p{
      font-size: 18px;
      color: var(--main-contrast-color);
      font-weight: 500;
      text-align: justify;
}
.header-info .profile-description .socials-menu{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 10px;
}
.header-info .profile-description .socials-menu a{
      font-size: 14px;
      padding: 5px 10px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
      font-weight: bold;
      border-radius: 5px;
      transition: all 0.2s ease-in-out;
      font-size: 18px;
      color: var(--main-contrast-color);
}
.socials-menu .instagram{
      background-color: var(--ig-color-alpha50);
}
.socials-menu .instagram:hover{
      background-color: var(--ig-color);
}
.socials-menu .linkedin{
      background-color: var(--linkedin-color-alpha50);
}
.socials-menu .linkedin:hover{
      background-color: var(--linkedin-color);
}
.socials-menu .envelope{
      background-color: var(--email-color-alpha50);
}
.socials-menu .envelope:hover{
      background-color: var(--email-color);
}

@media(max-width: 880px){
      .header-info .profilepic img{
            width: 300px;
            height: auto;
      }
}
@media(max-width: 500px){
      .header-info .profile-description .socials-menu{
            flex-direction: column;
      }
}
@media(max-width: 660px){
      .header-info{
            flex-direction: column;
      }
}


.post-list-group{
      display: flex;
      flex-direction: column;
      gap: 10px;
      justify-content: flex-start;
      align-items:flex-start;
}
.post-list-group .post-block{
      width:100%;
      display:flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
}
.post-list-group .post-block .post-text{
      width:80%;
      padding: 10px 20px;
}
.post-list-group .post-block .post-feature{
      width:200px;
      height:120px;
      background-size: cover;
      background-position: center center;
      display: flex;
      border-radius: 8px;
      box-shadow: rgba(0,0,0,0.2) 1px 1px 5px;
      -webkit-mask-image: url('../media/brush-y.svg');
      mask-image: url('../media/brush-y.svg');
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: cover;
      mask-size: cover;
}
.post-list-group .post-block a{
      width: 100%;
      font-size: 24px;
      font-weight: 700;
      color: var(--main-contrast-color);
}
@media(max-width: 500px){
      .post-list-group .post-block{
            flex-direction: column;
      }
      .post-list-group .post-block .post-text{
            width:100%;
            padding: 10px;
      }
}
.highlight{
      position: relative;
      font-weight: bold;
}
.highlight::before{
content: "";
position: absolute;
left: -5px;
bottom: -5%;
width: 0;
height: 110%;
z-index: -1;
transition: all 0.2s ease-in-out;
opacity:0.9;
-webkit-mask-image: url('../media/brush-y.svg');
mask-image: url('../media/brush-y.svg');
}
.highlight:hover::before{
width: calc(120%);
opacity:1;
}

.highlight-y::before{
      background-color: var(--main-cta-color);
}
.highlight-r::before{
      background-color: var(--sec-cta-color);
}

.highlight-br-y {
      background: url('../media/brush-y.svg');
      margin: -2px -6px;
      padding:  5px  6px;
      color: var(--main-contrast-color);
}
.highlight-br-r {
      background: url('../media/brush-r.svg');
      margin: -2px -6px;
      padding:  5px  6px;
      color: var(--main-white-color);;
}
.highlight-br-b {
      background: url('../media/brush-b.svg');
      margin: -2px -6px;
      padding:  5px  6px;
      color: var(--main-white-color);;
}
.post-list-group .post-block .post-info{
      display: flex;
      flex-direction: row;
      gap: 10px;
      padding: 0 10px;
}
.post-list-group .post-block .post-info p{
      font-size: 16px;
      padding-top: 10px;
      margin:0;
}
.post-list-group .post-block .post-info a{
      font-size: 14px;
      font-weight: 600;
}

.post-list-group .post-excerpt{
      font-size: 18px;
      padding: 5px;
      font-weight: 400;
      text-align: justify;
}
.post-list-group-name h2, .contact h2{
      font-size: 24px;
      font-weight: 700;
}
.contact p{
      font-size: 18px;
      font-weight: bold;
      text-align: center;
}
.contact a{
      color: var(--main-cta-color);
      text-decoration: underline;
}
.contact a:hover{
      color: var(--main-cta-color-alpha50);
}
.post-page-header{
      padding-top:20px;
      padding-bottom: 20px;
}
.post-page-header .feature-image{
      width: 100%;
      max-width: 500px;
      height: 200px;
      margin:0 auto;

      background-position: center center;
      background-size:cover;
      border-radius: 20px;

      -webkit-mask-image: url('../media/brush-y.svg');
      mask-image: url('../media/brush-y.svg');
}
.post-list-group .post-block a:hover{
      color: var(--main-contrast-color);
}

.post-page-info .post-page-title h1{
      font-size: 32px;
      font-weight: 900;
      text-align: center;
}
.post-page-header .post-page-info{
      padding: 20px;
}
.post-page-header .post-page-info .post-page-under{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-weight: 600;
      gap: 15px;
}
.post-page .page-post-content{
      padding:15px;
}
.post-page .page-post-content p{
      font-size: 20px;
      font-weight: 400;
      text-align: justify;
}
.post-page .page-post-content h2{
      font-size: 24px;
      font-weight: 900;
}
.post-page .page-post-content img{
      max-width: 100%;
      margin: 0 auto;
}
.post-page .page-post-content figure{
      text-align: center;
      padding-top:10px;
      padding-bottom: 10px;
}
.post-page .page-post-content figcaption{
      font-size: 16px;
      font-style:italic;
      padding-top:10px;
}
.archive-page .post-list-group-name{
      padding: 5px;
}
.archive-page .post-list-group-name h1{
      font-size: 32px;
      font-weight: 900px;
}
.archive-page .post-list-group-name p{
      font-size: 20px;
      font-weight: 600px;
}
.archive-page .post-list-group-name a{
      font-size: 18px;
      font-weight: 600;
}
.archive-page .post-list-group-name .categories{
      display:flex;
      flex-direction: row;
      gap:20px;
      flex-wrap: wrap;
}
.archive-page .post-list-group-name .categories span{
      font-size: 18px;
      font-weight: 600;
      margin:0;
      opacity:0.5;
}
.post-page .page-post-content a{
      background-color: var(--main-cta-color);
      color: var(--main-contrast-color);
      font-weight: bold;
      padding: 1px 4px;
      border-radius: 5px;
      transition: all 0.2s ease-in-out;
}
.post-page .page-post-content a:hover{
      background-color: var(--main-cta-color-alpha50);
}
.post-page .page-post-content video{
      max-width: 900px;
      width:100%;
      height: auto;

}
.highlight-solid{
      background-color: var(--sec-cta-color-alpha50);
      color: var(--main-contrast-color);
      font-weight: bold;
      padding: 1px 4px;
      border-radius: 5px;
      transition: all 0.2s ease-in-out;
}
.highlight-solid:hover{
      background-color: var(--sec-cta-color);
}
.h-y{
      background-color: var(--main-cta-color-alpha50);
}
.h-y:hover{
      background-color: var(--main-cta-color);
}
.archive-page .no-posts p{
      font-size: 14px;
      font-weight: 600;
      font-style:italic;
}
#footer{
      display:flex;
      justify-content: space-between;
      margin: 0 auto;
      width:100%;
      max-width: 940px;
      padding:10px;
      box-sizing: border-box;
      margin-top:50px;
      font-size: 14px;
    }

    #footer a{
      font-weight: bold;
      text-decoration: none;
    }
    #footer a:hover{
      opacity:0.8;
    }

    #page404{
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      position: relative;
      min-height: calc(100vh - 170px);
      gap: 20px;
    }
    
    #page404 #arrow404{
      position: absolute;
      display: block;
      right:150px;
      top:0;
      width:150px;
      height: 150px;
    }
    #page404 .img404 img{
      width: 200px;
      height: auto;
      color:var(--main-cta-color);
    }
    #page404 .text404 h1{
      font-size: 24px;
    }
    #page404 .text404 p{
      font-size: 16px;
    }
    @media(max-width:480px) {
            
      #footer{
            flex-direction: column;
            justify-content: center;
            text-align: center;
      }
      .post-title .highlight{
            width: 100%;
            display: flex;
      }
            .post-title .highlight::before{
            left: -2.5%;
            bottom: -2.5%;
            height: calc(105%);
            width: calc(105%);
            opacity:1;
      }
      html.night .post-title .highlight{
            color: var(--main-contrast-color)  !important;
      }
      .post-page .page-post-content a{
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
            
      }
      .post-page .page-post-content a:hover{
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
      }
      
}
html.night, html.night p, html.night a, html.night h1, html.night h2, html.night div {
      color: var(--main-white-color);
}
html.night body{
      background-color: var(--main-contrast-color);
}
html.night .header-menu #night, html.night .contact a{
      color: var(--main-cta-color);
}
html.night .contact a:hover{
      color: var(--main-cta-color-alpha50);
}
html.night .header-menu #night:hover{
      color: var(--main-white-color);;
}
html.night .header-info .profile-description p, html.night .header-info .profile-description h1, html.night .post-list-group .post-block a{
      color: var(--main-white-color);;
}
html.night .post-list-group .post-block a:hover{
     color: var(--main-contrast-color);
}
html.night .btn__container a{
      color: var(--main-contrast-color);
}

.likeblock{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap:10px;
}
.share-like #ratingbtn{
      width:50px;
      height:50px;
      border:none;
      background-color:transparent; 
      position: relative; 
}

.share-like #ratingbtn::before{
      content: '❤️';
      font-size: 30px;
      opacity: 70%;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor:pointer;
      transition: all 0.2s ease-in-out;
      top:0;
      left:0;
      animation: beat .75s infinite alternate;
	transform-origin: center;
}

.share-like #ratingbtn:hover::before{
      opacity: 100%;
      animation: beat .25s infinite alternate;
	transform-origin: center;
}
.share-like #ratingbtn:focus::before{
      opacity: 100%;
}

.share-like #rating-value{
      font-size: 18px;
      font-weight: bold;
}
.share-like #liketxt{
      font-size: 18px;
}

@keyframes beat{
	to { transform: scale(1.4); }
}
@keyframes fullbeat{
	to { transform: scale(2); }
}
.currently-working{
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
}
.currently-working p{
      margin:0;
      font-size: 14px;
      font-weight: bold;
}
.red-dot{
      display:block;
      width: 10px;
      height: 10px;
      margin-bottom: 3px;
      background-color: red;
      border-radius: 50%;
      animation-name: blink;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      box-shadow: rgba(255, 0, 0, 0.16) 0px 10px 36px 0px, rgba(255, 0, 0, 0.06) 0px 0px 0px 1px;
}

@keyframes blink {
      50% {opacity: 0.25;box-shadow: rgba(255, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(255, 0, 0, 0.3) 0px 18px 36px -18px inset;}
    }


.btn__container {
display: flex;
justify-content: center;
align-items: center;
gap:10px;
}

.btn {
min-width: 110px;
background-color: var(--main-white-color);
padding: 1rem 2rem;
text-decoration: none;
color: var(--main-contrast-color);
display: flex;
transition: all 0.2s ease-in-out;
}
.btn i {
color: var(--main-contrast-color);
font-size: 20px;
padding-right: 10px;
transition: all 0.3s ease-in-out;
}
.btn span {
font-family: "Roboto", sans-serif;
align-self: center;
transform: translateX(0px);
transition: all 0.1s ease-in-out;
opacity: 1;
}
.btn:hover {

background: #08a0e925;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}
.btn:hover i {
transform: translateX(20px);
padding-right: 0;
color: #08a0e9;
}
.btn:hover span {
transform: translateX(30px);
opacity: 0;
}
.btn:active {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.btn-f {
min-width: 110px;
background-color: var(--main-white-color);
padding: 1rem 2rem;
text-decoration: none;
color: var(--main-contrast-color);
display: flex;
transition: all 0.2s ease-in-out;
}
.btn-f i {
color: var(--main-contrast-color);
font-size: 20px;
padding-right: 10px;
transition: all 0.3s ease-in-out;
}
.btn-f span {
font-family: "Roboto", sans-serif;
align-self: center;
transform: translateX(0px);
transition: all 0.1s ease-in-out;
opacity: 1;
}
.btn-f:hover {

background-color: #286ED625;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}
.btn-f:hover i {
transform: translateX(25px);
padding-right: 0;
color: #286ED6;
}
.btn-f:hover span {
transform: translateX(30px);
opacity: 0;
}
.btn-f:active {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.btn-l {
      min-width: 110px;
      background-color: var(--main-white-color);
      padding: 1rem 2rem;
      text-decoration: none;
      color: var(--main-contrast-color);
      display: flex;
      transition: all 0.2s ease-in-out;
      }
      .btn-l i {
      color: var(--main-contrast-color);
      font-size: 20px;
      padding-right: 10px;
      transition: all 0.3s ease-in-out;
      }
      .btn-l span {
      font-family: "Roboto", sans-serif;
      align-self: center;
      transform: translateX(0px);
      transition: all 0.1s ease-in-out;
      opacity: 1;
      }
      .btn-l:hover {
      background-color: #0077b525;
      box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
      }
      .btn-l:hover i {
      transform: translateX(25px);
      padding-right: 0;
      color: #0077b5;
      }
      .btn-l:hover span {
      transform: translateX(30px);
      opacity: 0;
      }
      .btn-l:active {
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
      }