@import url("https://fonts.googleapis.com/css2?family=Jost&display=swap");
:root {
  --heading-color: #363636;
  --bg-color: #f6f9fc;
  --font-color: #7a7a7a;
  --box-color: #ffffff;
  --hr-color: #e7e4e4;
  --button-color: #ffffff;
  --card-shadow: rgba(0,0,0,0.1);
  --notif-col: #2160c4;
  --modal-bg: #f8faff;
  --img-opacity: 1;
  --text-opacity: 1;
  --border-card: #e6e6e6;
  --borderh-card: #d1d1d1;
  --quote: #605f5f;
  --quote-title: #202020;
  --switch: #f5deb3;
  --notif: #eef3fc;
  --notif-text: #2160c4;
  --last-text: #ffffff;
  --theme-bg: #ffffff;
  --about-bg: #ffffff;
  --about-bor: #d3f3ae;
  --notif-bl: #feecf0;
  --notif-bltxt: #cc0f35;
  --bio-text: #9e9e9e;
  --head-title: #181817;
  --drop-bg: #97aed352;
  --drop-text: #1c4e99;
  --bordery: #f1f1f1;
}

[data-theme="dark"] {
  --heading-color: #aebbe4;
  --bg-color: #1F2023;
  --font-color: #f2f2ff;
  --box-color: #27292D;
  --hr-color: #7e7474;
  --button-color: #3b3b3b;
  --card-shadow: rgba(255, 255, 255, 0.041);
  --notif-col: #c6c6ff;
  --modal-bg: #1F2023;
  --img-opacity: 0.9;
  --text-opacity: 0.9;
  --border-card: #474747;
  --borderh-card: #424242;
  --quote: #a3a3a3;
  --quote-title: #f2f2ff;
  --switch: #ff95b5;
  --notif: #abc6f883;
  --notif-text: #c6d5ee;
  --last-text: #ffffff;
  --theme-bg: #4b4b4b;
  --about-bg: #1e2b46;
  --about-bor: #405673;
  --notif-bl: #d3788c;
  --notif-bltxt: #F1DCe0;
  --bio-text: #b4b4b9;
  --head-title: #96c5ec;
  --drop-bg: #d3f3ae44;
  --drop-text: #d3f3ae;
  --bordery: #2b2b2b;
}

html, body {
  font-family: 'Jost', sans-serif;
  font-weight: 200;
  font-size: 14px;
  margin: 0;
  scroll-behavior: smooth;
  background-color: var(--bg-color);
}

.image.is-96x96 {
  height: 98px;
  width: 98px;
}

img {
  opacity: var(--img-opacity);
  pointer-events: none;
}

hr {
  width: 50px;
  background-color: var(--hr-color);
}

a:hover {
  color: var(--font-color);
}

.navbar {
  background-color: var(--bg-color);
}

.hero .navbar {
  background-color: transparent;
}

.navbar-end {
  float: right;
}

@media screen and (max-width: 1023px) {
  .navbar.is-fixed-top {
    position: absolute;
  }
  .is-small {
    padding: 1.5rem 1.5rem;
  }
}

/*      Navbar Item For Mobile      */
.nav-mobile {
  background-color: var(--bg-color) !important;
}

.navbar-item, .navbar-link {
  color: var(--font-color);
}

a.navbar-item:focus,
a.navbar-item:hover {
  background-color: var(--bg-color);
  color: var(--heading-color);
}

@media screen and (max-width: 1023px) {
  .navbar-menu {
    background-color: var(--bg-color);
  }
}

.icon-nav {
  -webkit-transform: translate(0px, 2px);
          transform: translate(0px, 2px);
}

/*      card    */
.card {
  -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  border-radius: 12px;
  background-color: var(--box-color);
}

.card:hover {
  -webkit-box-shadow: var(--card-shadow) 0 27px 55px 0;
          box-shadow: var(--card-shadow) 0 27px 55px 0;
  -webkit-transform: translateY(-0.15rem);
          transform: translateY(-0.15rem);
}

.card .media:not(:last-child) {
  margin-bottom: 0;
}

.c-vertical {
  border-radius: 6px;
  border: 1px solid var(--border-card);
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 1.5rem 0;
}

.c-vertical:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 1px solid var(--borderh-card);
  -webkit-transform: translateY(-0.15rem);
          transform: translateY(-0.15rem);
}

.bd-anchors {
  position: fixed;
}

.last-card {
  border: 1px solid #f14668;
}

#about-bg {
  background-color: var(--about-bg);
  border: 2px solid var(--about-bor);
}

#header-card {
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}

#about-card {
  -webkit-transform: translateX(-150px);
          transform: translateX(-150px);
  opacity: 0;
}

#last-card {
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  opacity: 0;
}

#adore-card {
  -webkit-transform: translateX(150px);
          transform: translateX(150px);
  opacity: 0;
}

#song-card {
  -webkit-transform: translateY(150px);
          transform: translateY(150px);
  opacity: 0;
}

#random-card {
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}

#social-card {
  -webkit-transform: translateX(-150px);
          transform: translateX(-150px);
  opacity: 0;
}

#else-card {
  -webkit-transform: translateY(150px);
          transform: translateY(150px);
  opacity: 0;
}

#recent-card {
  -webkit-transform: translateX(150px);
          transform: translateX(150px);
  opacity: 0;
}

/*     modal card   */
.modal-card {
  border-radius: 15px;
  -webkit-box-shadow: var(--card-shadow) 0 7px 25px 0;
          box-shadow: var(--card-shadow) 0 7px 25px 0;
}

.modal-card-body {
  background-color: var(--box-color);
}

.modal-close {
  background-color: rgba(10, 10, 10, 0.2);
}

.modal-background {
  background-color: var(--modal-bg);
}

.title {
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
  color: var(--heading-color);
  opacity: var(--text-opacity);
}

.subtitle {
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
  color: var(--font-color);
  opacity: var(--text-opacity);
}

span {
  opacity: var(--text-opacity);
}

/*  Button  */
.button,
.button:hover::before {
  color: var(--font-color);
  background-color: var(--button-color);
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: none;
  border-radius: 290486px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 7px 25px 0;
          box-shadow: rgba(0, 0, 0, 0.1) 0 7px 25px 0;
}

.button:hover,
.button:focus,
.button::after {
  color: var(--font-color);
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 27px 55px 0;
          box-shadow: rgba(0, 0, 0, 0.1) 0 27px 55px 0;
  -webkit-transform: translateY(-0.25rem);
          transform: translateY(-0.25rem);
}

.my-edits {
  -webkit-box-shadow: rgba(255, 56, 56, 0.25) 0 7px 25px 0;
          box-shadow: rgba(255, 56, 56, 0.25) 0 7px 25px 0;
}

.my-edits:hover {
  -webkit-box-shadow: rgba(255, 56, 56, 0.25) 0 27px 55px 0;
          box-shadow: rgba(255, 56, 56, 0.25) 0 27px 55px 0;
}

.tooltip-yellow {
  --balloon-color: rgb(255, 237, 134);
}

/*      Dark Mode Toogle Switch     */
.theme-switch-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  float: right;
}

.theme-switch-wrapper em {
  margin-left: 10px;
  font-size: 1rem;
}

.theme-switch {
  display: inline-block;
  height: 32px;
  position: relative;
  width: 32px;
  background-color: var(--theme-bg);
  border-radius: 32px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 7px 25px 0;
          box-shadow: rgba(0, 0, 0, 0.1) 0 7px 25px 0;
}

.theme-switch input {
  display: none;
}

.slider {
  width: 50%;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  bottom: 4px;
  content: '';
  -webkit-mask: url(../img/sun.svg);
          mask: url(../img/sun.svg);
  -webkit-mask-size: cover;
          mask-size: cover;
  background-color: #b6b600;
  height: 24px;
  position: absolute;
  -webkit-transition: .4s;
  transition: .4s;
  width: 24px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  left: 4px;
}

input:checked + .slider:before {
  content: '';
  -webkit-mask: url(../img/moon.svg);
          mask: url(../img/moon.svg);
  background-color: #c6c1ff;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

/*  Media   */
@media screen and (max-width: 768px) {
  .media-content {
    overflow-x: visible;
  }
}

/*  Media Border    */
.media + .media {
  border-top: 1px solid;
  border-color: var(--hr-color);
  border-radius: 2px;
}

/*  Text Border */
.text-border {
  display: inline-block;
  padding-bottom: 5px;
  text-decoration: none;
}

.text-border::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  border-radius: 5px;
  background: #fc7171;
  -webkit-transition: width .3s;
  transition: width .3s;
}

.text-border:hover::after {
  width: 100%;
}

/*  notification */
.notification {
  background-color: var(--notif-bg);
  color: var(--notif-col);
}

#notification:hover {
  color: #ffa886;
}

.notification.is-link.is-light {
  background-color: var(--notif);
  color: var(--notif-text);
}

.notif-below {
  background-color: var(--notif-bl);
  color: var(--notif-bltxt);
}

/*  scrollbar */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--bg-color);
}

::-webkit-scrollbar {
  width: 4px;
  background-color: var(--bg-color);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #555;
}

.see-more::after {
  display: inline-block;
  padding-left: 3px;
  content: "\0279E";
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}

.see-more:hover::after {
  -webkit-transform: translateX(3px);
          transform: translateX(3px);
}

.skills {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.skill {
  color: var(--font-color);
  -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  margin-right: 7px;
  opacity: var(--text-opacity);
}

.skill.snooze:hover {
  color: #7cb6f8;
}

.skill.geek:hover {
  color: #0fdb64;
}

.skill.care:hover {
  color: #db140d;
}

.skill.space:hover {
  color: #8719c7;
}

.skill.cat:hover {
  color: #dbdf14;
}

.web {
  margin-bottom: 1rem;
}

.web-hover {
  -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  opacity: var(--img-opacity);
}

.web-hover:hover {
  opacity: 1;
}

.box-video {
  -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  border-radius: 16px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 7px 25px 0;
          box-shadow: rgba(0, 0, 0, 0.1) 5px 7px 25px 0;
  padding: 25px 20px 20px;
  width: 100%;
  height: 100%;
  background-color: var(--box-color);
}

#photo {
  display: block;
}

#video {
  display: none;
}

#video-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#photo-btn {
  display: none;
}

.quote {
  font-weight: normal;
  color: var(--quote);
  margin: 20px 20px 20px 50px;
  border-left: 1px solid #e6e6e6;
  padding: 0 0 0 20px;
}

.quote:before {
  content: '\201F';
  font-size: 2.5em;
  left: 35px;
  top: 25px;
  position: absolute;
}

.quote .title-quote {
  padding: 0;
}

.title-quote {
  color: var(--quote-title);
  font-size: 1.2em;
  padding: 20px;
  line-height: 1.4em;
  font-weight: 500;
}

.source {
  margin-top: 5px;
}

.media-content {
  margin: auto;
}

.last-image {
  -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 1;
  pointer-events: visible;
}

.middle {
  -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(65%, 140%);
          transform: translate(65%, 140%);
}

.last-img-hover:hover .last-image {
  opacity: 0.6;
}

.last-img-hover:hover .middle {
  opacity: 1;
}

.text {
  color: var(--last-text);
}

.else-img {
  margin-top: 1.4rem;
  border-radius: 6px;
}

.else-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 1023px) {
  .else-img {
    height: 320px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .else-button {
    display: -ms-inline-grid;
    display: inline-grid;
  }
}

.header-title {
  font-family: 'Caveat', cursive;
  background: -webkit-linear-gradient(#eee, var(--head-title));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2rem !important;
}

.header-vid {
  border-radius: 12px;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 1023px) {
  .header-vid {
    height: 250px;
  }
}

.little-bio {
  margin-top: 1.5rem;
}

.bio {
  display: inline;
  margin-right: 1rem;
  color: var(--bio-text);
}

.bio-ico {
  margin-right: 0.3rem;
}

.gradient-border {
  --borderWidth: 3px;
  position: relative;
  border-radius: var(--borderWidth);
}

.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f795338c, #f36f556c, #ef4e7c7e, #a166ab63, #5073b852, #1098ad67, #07b39c5d, #6fba8262);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  -webkit-animation: animatedgradient 3s ease alternate infinite;
          animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@-webkit-keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.dropdown-content {
  background-color: var(--box-color);
  border-radius: 12px;
}

.dropdown-item {
  -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
  font-size: 1.05rem !important;
  color: var(--font-color);
  margin: 0.5rem 0rem;
}

.dropdown-item:hover {
  background-color: var(--drop-bg) !important;
  color: var(--drop-text) !important;
}

.drop-button {
  background-color: #f1ffe2;
}

.drop-button:hover {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.drop-ico {
  margin-right: 0.3rem;
}

.drop-href {
  font-weight: 600;
}

#bordery {
  border: 1px solid var(--bordery);
  border-radius: 16px;
}
/*# sourceMappingURL=maevewiley.css.map */