@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Karla:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css";

* {
  box-sizing: border-box;
}

.page-enter-active,
.page-leave-active {
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.page-enter,
.page-leave-to {
  opacity: 0;
  transform: translate3d(0, 15px, 0);
}

:root {
  --primary: #1b2172;
  --primaryDark: #0d1152;
  --primaryFocus: 0 0 0 0.125em rgb(27 33 114 / 25%);
  --highlight: #3ab8eb;
  --text: #333;
  --lightGray: #f6f7f9;
  --A1: #0770c8;
  --A2: #3ab8eb;
  --B1: #df246b;
  --B2: #c800a9;
  --C1: #f5821f;
  --C2: #ffc20f;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Poppins", Verdana, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 100%;
  color: var(--text);
}

a {
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
}

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

.navbar-item {
  color: #fff;
}

a.navbar-item:hover {
  color: var(--primaryDark);
}

.navbar-brand a.navbar-item:hover {
  color: #fff;
}

a.category {
  color: var(--text);
}

a:hover .title:hover {
  color: var(--primary);
}

.awesome {
  font-family: "Poppins", Verdana, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  margin-left: 5px;
  text-transform: uppercase;
}

.awesome:hover {
  color: #fff;
}

.big-preview {
  border-radius: 2px;
  overflow: hidden;
}

.box {
  border-radius: 2px;
}

.btn-primary,
.button.is-primary {
  border: none;
  background-color: var(--primary) !important;
  color: #fff;
  font-size: 0.8rem;
  transition: all ease-in-out 0.25s;
}

.btn-primary:hover,
.button.is-primary:hover {
  border: none;
  background-color: var(--primaryDark);
  font-size: 0.8rem;
}

.btn-primary:focus,
.button.is-primary:focus,
.btn-primary:active,
.button.is-primary:active {
  background-color: var(--primaryDark) !important;
  box-shadow: var(--primaryFocus) !important;
}

.buttons:last-child {
  margin-right: 10px;
}

.buttons.button {
  font-size: 0.6rem;
}

.button {
  font-size: 0.8rem;
  border-radius: 2px;
}

.card-header {
  box-shadow: none;
}

.category {
  background-color: #fff;
  border-radius: 25px;
  cursor: pointer;
  padding: 5px 10px;
  box-shadow: 0 0.1em 1em -0.1em rgba(10, 10, 10, 0.1),
    0 0 0 1px rgba(10, 10, 10, 0.02);
  margin-bottom: 8px;
  margin-right: 8px;
  transition: all ease-in-out 0.25s;
}

.category:hover {
  color: #fff;
  background-color: var(--primary);
}

.catList {
  font-weight: 600;
}

.center {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  text-align: center;
}

.comments {
  border-top: 1px solid #f5f5f5;
  padding-top: 10px;
}

.confetti {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: -10px;
  text-align: center;
  z-index: -1;
  transition: all 1s ease;
}

.content a {
  font-weight: 600;
}

.logoContainer:hover .confetti {
  transform: scale(1.1);
}

label.error {
  color: #f14668;
  display: block;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.footer {
  padding: 24px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter", Verdana, Helvetica, sans-serif;
}

.icon {
  margin: 0px 5px;
}

.info-text {
  padding-left: 5px;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 35px;
}

.input {
  border-radius: 2px;
  font-family: "Poppins", Verdana, Helvetica, sans-serif;
}

.input:active,
.input:focus,
.is-active.input,
.is-active.textarea,
.is-focused.input,
.is-focused.textarea,
.select select.is-active,
.select select.is-focused,
.select select:active,
.select select:focus,
.textarea:active,
.textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--primaryFocus);
}

ion-icon {
  pointer-events: none;
}

.like {
  height: 35px;
  width: 35px;
  background-color: #fff;
  border: 1px solid var(--primary);
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
  box-shadow: 0 0.2em 1em -0.2em rgba(10, 10, 10, 0.2),
    0 0 0 1px rgba(10, 10, 10, 0.02);
  margin: auto;
  margin-right: 0;
  line-height: 35px;
  text-align: center;
  font-size: 1.5rem;
  display: flex;
}

.like:hover {
  color: var(--primary);
}

.section.logo {
  margin-top: 52px;
}

.logo {
  padding-bottom: 0;
}

.logo .image {
  width: 100%;
}

.markdown ul {
  margin-left: 20px;
}

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

.navbar-end {
  font-family: "Poppins", Verdana, Helvetica, sans-serif;
}

.navbar-end {
  font-family: "Poppins", Verdana, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.navbar-burger {
  color: #fff;
}

a.navbar-burger:hover {
  color: #fff;
}

.post-sub,
.post-sub.subtitle.is-6 {
  font-family: "Karla", Verdana, Helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 0.9rem;
  padding-top: 5px;
  color: #555555;
}

.pulse-text {
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% {
    color: #1B2172;
  }
  50% {
    color: #C800A9;
  }
}

.wave-text {
  background: linear-gradient(
      to right,
      #1B2172 10%,
      #C800A9 30%,
      #C800A9 70%,
      #1B2172 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 500% auto;
  animation: waveText 3s ease-in-out infinite;
}
@keyframes waveText {
  0% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

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

/* 1px	0.06rem
// 2px	0.13rem
// 3px	0.19rem
// 4px	0.3rem
// 5px	0.3rem
// 6px	0.4rem
// 8px	0.5rem
// 10px	0.6rem
// 12px	0.8rem
// 14px	0.9rem
// 15px	0.9rem
// 16px	1rem
// 18px	1.1rem
// 20px	1.3rem
// 24px	1.5rem
// 25px	1.6rem
// 28px	1.8rem
// 32px	2rem
// 36px	2rem
// 40px	3rem
// 44px	3rem
// 48px	3rem
// 50px	3rem
// 56px	4rem
// 64px	4rem
// 72px	5rem
// 75px	5rem
// 80px	5rem
// 90px	6rem
// 100px	6rem
*/