@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700');
html.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
  transition: 0s !important;
  transition-delay: 0 !important;
}

/*--- TOOLTIPS ---*/
.tippy-tooltip.custom-theme {
    font-family:Montserrat, sans-serif;
    font-size:.9em;
    color:#fafafa;
    text-transform:lowercase;
    text-align:center;
    letter-spacing:.1em;
    background:#886ea2;
    box-shadow:4px 4px 8px rgba(0,0,0,.1);
    border-radius:10px;
    margin-bottom:.5em;
}

/*--- SCROLLBAR ---*/
::-webkit-scrollbar {
    width:5px; 
    height:5px;
    background:#fafafa;
}
 
::-webkit-scrollbar-track {
    background:#fafafa;
    border-radius:5px;
}
 
::-webkit-scrollbar-thumb {
    background:linear-gradient(to top, #6389a5, #93c0e2);
    border-radius:5px;
}

/*--- TEXT SELECTION ---*/
::-moz-selection { /* Code for Firefox */
    color:#fafafa;
    background:#886ea2;
}

::selection {
    color:#fafafa;
    background:#886ea2;
}

/*--- COMMON ---*/

body {
    font-family:'Poppins', sans-serif;
    font-size:13px;
    color: #666;
    background-color: #eee;
    line-height:140%;
    word-wrap:break-word;
    letter-spacing:.04em;
    margin:0;
}

a {
    color:#4685b3; 
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

a:hover {
    color: #886ea2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.description a {
  position:relative;
  white-space:nowrap;
  border-bottom:2px solid #ddd;
}

.description a:after {
  content:'';
  position:absolute;
  width:100%;
  transform:scaleX(0);
  height:2px;
  bottom:-2px;
  left:0;
  background-color:#4685b3;
  border-radius:5px;
  transform-origin:middle;
  transition: transform 0.25s ease-out;
}

.description a:hover:after {
  transform: scaleX(1);
  transform-origin:middle;
}

button {font-size:1em;}
        
blockquote {
    border-left:2px solid #ddd;
    padding-left:.75em;
    margin-left:1em;
}

li {list-style-type:circle;}
li::marker {color:#886ea2}

h1, h1 a, h2, h3, h4, h5 {
    font-family:Montserrat, sans-serif;
    letter-spacing:.1em;
    color:#333;
    font-weight:700;
}

h1 {font-size:1.2em;}
h2 {font-size:1.15em;}
h3 {font-size:1.1em; padding:0 0 .5em 0; margin:0; display:inline-block;}
h4 {font-size:1.05em;}
h5 {font-size:1.025em;}
h1 a:hover {color:#886ea2;}

h4 {margin:0 0 1em 0; text-align:center;}
h5 {margin:0; padding:0;}

small {font-size: 0.95em;}
big {font-size: 1.1em;}

hr {
    height: 1px;
    border: none;
    box-shadow: none;
    background-color: #ddd;
}

pre {
    line-height: inherit;
    font-size: inherit;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
 
b, strong {
    color:#333;
    font-weight:800;
}
 
b a:hover {
    color:#886ea2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

/*--- MAIN CONTAINERS ---*/

main {
    width:100%;
    display:flex;
    justify-content:center;
}

header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:calc(100% - 2em);
    height:60px;
    padding:0 1em 0 1em;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1em;
    background:#fafafa;
    z-index:9999;
}

.topleft {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:1em;
}

.topleft a {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:.5em;
    border-radius:100%;
    z-index:2;
}
.topleft a:after {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    background:#886ea2;
    border-radius:100%;
    z-index:-1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.topleft a:hover:after {opacity:.35;}

.topleft i {
    font-size:1.5em;
    color:#333;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.topleft a:hover i {
    color:#886ea2;
    text-shadow:0 0 10px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.topleft li {
    font-family:Montserrat, sans-serif;
    display:flex;
    flex-direction:column;
    line-height:120%;
}
.topleft li b {font-weight:600;}
.topleft li span {font-size:.85em;}

.topright {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:.5em;
}

/*--- CREDIT: DO NOT TOUCH ---*/
a.credit {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:.5em;
    border:1px solid #ddd;
    border-radius:100%;
    z-index:2;
}
a.credit:hover {border:1px solid transparent;}
a.credit:after {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    background:#886ea2;
    border-radius:100%;
    z-index:-1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
a.credit:hover:after {opacity:.35;}

a.credit i {
    font-size:1.5em;
    color:#333;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

a.credit:hover i {
    color:#886ea2;
    text-shadow:0 0 10px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    animation-name: bounce;
    -moz-animation-name: bounce;
}

@keyframes bounce {
	0% {
		-webkit-transform: translateY(0px);
		-ms-transform:     translateY(0px);
		transform:         translateY(0px)
	}
	25% {
		-webkit-transform: translateY(-3px);
		-ms-transform:     translateY(-3px);
		transform:         translateY(-3px)
	}
	50% {
		-webkit-transform: translateY(0px);
		-ms-transform:     translateY(0px);
		transform:         translateY(0px)
	}
	75% {
		-webkit-transform: translateY(-3px);
		-ms-transform:     translateY(-3px);
		transform:         translateY(-3px)
	}
	100% {
		-webkit-transform: translateY(0px);
		-ms-transform:     translateY(0px);
		transform:         translateY(0px)
	}
}

/*--- MAIN CONTENT ---*/

.mainwrap {
    position:relative;
    width:800px;
    max-height:calc(100vh - 60px - 2em);
    overflow-y:auto;
    margin-top:calc(80px + 1em);
    margin-left:2em;
    margin-right:2em;
    margin-bottom:1em;
    background:#fafafa;
    border-radius:10px;
}

section {
    position:relative;
    width:100%;
    height:100%;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
}

/* BANNER */
.banner {
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.bannerimg {
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.bannerimg img {
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:10px 10px 0 0;
}
.portraitimg {
    position:absolute;
    bottom:-50px;
    left:1em;
    width:calc(100% - 1em);
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}
.portraitimg img {
    width:96px;
    height:96px;
    object-fit:cover;
    padding:3px;
    background:linear-gradient(to right, #8d63a5, #c1a3d3);
    border-radius:100%;
}

/* main buttons */
.mainbuttons {
    position:absolute;
    right:0;
    bottom:-60px;
    width:fit-content;
    height:60px;
    padding:0 1em 0 1em;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:.5em;
    z-index:9999;
}
.mainbuttons a.mainlink {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:.5em;
    background:transparent;
    border-radius:100%;
    border:1px solid #ddd;
}
a#followbutton {padding:.5em 1em .5em 1em; border-radius:50px;}
a.mainlink:hover {border:1px solid transparent;}
a.mainlink i {
    font-size:1.5em;
    color:#333;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
a.mainlink:hover i {
    color:#886ea2;
    text-shadow:0 0 10px;
}
a.mainlink b {
    font-family:Montserrat, sans-serif;
    font-weight:600;
    color:#333;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
a.mainlink:hover b {color:#886ea2; text-shadow:0 0 10px;}
a.mainlink:after {
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0;
    background:#886ea2;
    border-radius:100%;
    border:1px solid #886ea2;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
a#followbutton:after {border-radius:50px;}
a.mainlink:hover:after {opacity:.25;}

/* more links dropdown */
a#morebutton {cursor:help;}
a#morebutton.more-click i {color:#886ea2;}
.moredrop {
    position:absolute;
    right:100%;
    top:50%;
    width:200px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fafafa;
    border-radius:10px;
    box-shadow:2px 2px 10px rgba(0,0,0,.1);
}
.moredrop a {
    position:relative;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:.5em;
    padding:.5em 1em .5em 1em;
    z-index:2;
    text-transform: uppercase;
    font: 400 15px Poppins;
}
.moredrop a:after {
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    opacity:0;
    background:#886ea2;
    z-index:-1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.moredrop a:hover:after {opacity:.35;}
.moredrop i {
    font-size:1.3em;
    color:#333;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.moredrop a:hover i {color:#886ea2; text-shadow:0 0 10px;}
.moredrop b {
    font-weight:normal;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.moredrop a:hover b {color:#886ea2;}

.links {
    margin: 0 10px;
}

.links a {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 5px;
  border-radius: 4px;
  color: #444444;
  background-color: #f1f1f1;
}

/* main title */
.maintitle {
    margin-top:50px;
    padding:1em;
    font-family:Montserrat, sans-serif;
    display:flex;
    flex-direction:column;
    gap:.25em;
}
.maintitle li {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:.5em;
}
.maintitle b {font-size:1.4em;}
.maintitle i {
    font-size:1.3em;
    color:#886ea2;
}

/* status */
.status {
    width:calc(100% - 2em);
    color:#333;
    padding:0 1em .5em 1em;
}
.status p {margin-bottom:0; margin-top:0;}

/* stats & blogs wrap */
.statwrap {
    display:flex;
    flex-direction:column;
    gap:1em;
    padding:.5em 1em 1em 1em;
    border-bottom:1px solid #ddd;
}

/* stats */
.stats {
    width:100%;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:wrap;
    gap:.5em;
}
.stats li {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:.25em;
}
.stats li i {
    position:relative;
    font-size:1.25em;
    color:#666;
    display:flex;
    align-items:center;
}
.stats li b {
    font-weight:normal;
    color:#666;
    white-space:nowrap;
    display:flex;
    align-items:center;
}

/* blogs */
.stats a {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:.5em;
}
.stats a img {
    width:1.5em;
    height:1.5em;
    object-fit:cover;
    border-radius:100%;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.stats a:hover img {transform:rotate(10deg);}
.stats a b {
    font-weight:normal;
    color:#c268a7;
    white-space:nowrap;
    line-height:100%;
    border-bottom:1px solid transparent;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.stats a:hover b {border-bottom:1px solid #886ea2;}

/* numbers */
.numbers {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:1em;
}
.numbers li {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:.25em;
}
.numbers a {color:#333;}

/* DESCRIPTION */
.description {
    width:calc(100% - 2em);
    height:calc(100% - 2em);
    overflow-y:auto;
    padding:1em;
    font: 400 12px Poppins;
}
.description::-webkit-scrollbar {
    width:4px; 
    height:4px;
    background:transparent;
}
.description::-webkit-scrollbar-track {background:transparent;margin-bottom:.25em;}

/*---- RESPONSIVENESS ---*/
 
@media only screen and (max-width: 800px) {
.mainwrap {width:100%;}
}

@media only screen and (max-width: 600px) {
.tmblr-iframe-compact .tmblr-iframe--unified-controls, a#controlsbutton {display:none;}
.moredrop {right:auto; top:100%;}
}

@media only screen and (max-width: 450px) {
body {background:#fafafa;}
.mainwrap {margin:0 0 0 0; width:100%; max-height:100vh; overflow-y:visible; border-radius:0;}
section {overflow-y:visible;}
.bannerimg img {border-radius:0;}
.description {overflow-y:visible;}
}