/* These styles are used in the backend editor AND in the Theme (frontend) */

/* Most themes nowadays provide an extra stylesheet of classes which WordPress itself then */
/* applies to the backend editor TinyMCE. However, custom CSS - set in Plugins, in the WP  */
/* Customizer or in Theme options, will normally not be reflected to TinyMCE. So better to */
/* put such styles all here, where they will apply to TinyMCE *and* the frontend.          */

/* The goal is not only to make the visual editor display look as much like the frontend as    */
/* possible, but also to make sure that all important CSS classes are available for convenient */
/* selection in TinyMCEs "Formats" dropdown - so do not forget to configure the TinyMCE styles */
/* dropdown with elements to match those here.                                                 */

/* If you do not need this file then upload an empty one (zero bytes) which will not be loaded at all. */

/* Suggested general non-tag-specific visual styles */

.list       { margin: 0.35rem 0; }
.topless    { margin-top: 0 !important; }
.bottomless { margin-bottom: 0 !important; }
.beforelist { margin-bottom: 0.5rem; }
.lastitemem { margin-bottom: 0; padding-bottom: 1.3rem; }

strong { font-weight: bold; }
/* Revert to normal text within strong */
.notstrong { font-weight: normal; }

.smaller { font-size: 0.95rem; line-height: 1.25; }
.small   { font-size: 0.89rem; line-height: 1.2; }

.screen-reader-text, .dispnone { display: none; }

/* Append your site-specific styles here */

/* ---------------------------------------------------------------------------------- */
/* Marker */
.highlight-red {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(255, 20, 0, 0.2),
    rgba(255, 20, 0, 0.7) 95%,
    rgba(255, 20, 0, 0.1)
  );
}

.highlight-yellow {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(255, 224, 0, 0.2),
    rgba(255, 224, 0, 0.7) 95%,
    rgba(255, 224, 0, 0.1)
  );
}

.highlight-green {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(182, 229, 216, 0.2),
    rgba(182, 229, 216, 0.7) 95%,
    rgba(182, 229, 216, 0.1)
  );
}

.highlight-blue {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(143, 221, 231, 0.2),
    rgba(143, 221, 231, 0.7) 95%,
    rgba(143, 221, 231, 0.1)
  );
}
/* ---------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------- */
/* Glowing Box Effect */
@keyframes animated-border-1 {
	0% {
		box-shadow: 0 0 0 0 #3498dba6;
	}
	100% {
		box-shadow: 0 0 0 10px #3498db00;
	}
}

.glowing_box {
	animation: animated-border-1 5s infinite;
	/* color: #3498dba6; */
	border: 1px dotted #3498dba6;
	border-radius: 10px;
	margin-bottom: 10px;
	padding: 10px;
}

.glowing_box p {
	margin-bottom: 0px
}
/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/* Bubbling Effect */
.bubbles {
	position: relative;
	z-index: -1;
}

.individual-bubble {
	position: relative;
	border-radius: 100%;
	bottom: 2px;
	background-color: #3498dba6;
	z-index: -1;
}

/* ---------------------------------------------------------------------------------- */
.box-1{
  background: #fff;
  padding: 10px;
  box-shadow:
	  inset #009688 0 0 0 5px, 
    inset #059c8e 0 0 0 1px, 
    inset #0cab9c 0 0 0 10px, 
    inset #1fbdae 0 0 0 11px, 
    inset #8ce9ff 0 0 0 16px, 
    inset #48e4d6 0 0 0 17px, 
    inset #e5f9f7 0 0 0 21px, 
    inset #bfecf7 0 0 0 22px;
  text-shadow: 3px 3px 1px #bfecf7;
}


/* CSS */
.button-89 {
  --b: 3px;   /* border thickness */
  --s: .45em; /* size of the corner */
  --color: #373B44;
  
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .6em;
  font-size: 16px;

  border: 0;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-89:hover,
.button-89:focus-visible{
  --_p: 0px;
  outline-color: var(--color);
  outline-offset: .05em;
}

.button-89:active {
  background: var(--color);
  color: #fff;
}

/* CSS */
.button-85 {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-85:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}


.box-2 {
  display: flex;
  justify-content: center;
}

.box-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(131.83deg, #FFFAFA 0%,     #FFF7F7 99.21%);
  width: 300px;
  text-align: center;
  height: 300px;
  border-radius: 16px;
  position: relative;
}

.box-2:not(:last-child) {
  margin-right: 100px;
}
.box-2::before {
  position: absolute;
  content: "";
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  background-image: linear-gradient(312.25deg, #FFC4BC 0%,     rgba(255, 255, 255, 0) 66.19%);
  z-index: -1;
  border-radius: 18px;
}


.box-3 {
  --box-border--border: linear-gradient(105deg, rgb(255 46 144) 0%, rgb(61 35 185) 100%);
  
  /* classic 9-slide-scaling with 2px border 4px rounded corners. change `rx` and `ry` parameters to adjust border-radius */
  --box--border__top-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__top: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='1' x2='101' y2='1' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__top-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='1' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  --box--border__left: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='1' y1='-1' x2='1' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__right: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='9' y1='-1' x2='9' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='-9' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__bottom: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='9' x2='101' y2='9' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='-9' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  
  padding: 1rem;
  position: relative;
  resize: both;
  overflow: hidden;
  font-weight: 700;
  width: 100%;
  max-width: 30ch;
}

.box-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--box-border--border);
  mask:
    var(--box--border__top-left) 0 0 / .625rem .625rem,
    var(--box--border__top) .625rem 0 / calc(100% - 1.25rem) .625rem,
    var(--box--border__top-right) 100% 0 / .625rem .625rem,
    var(--box--border__left) 0 .625rem / .625rem calc(100% - 1.25rem),
    var(--box--border__right) 100% .625rem / .625rem calc(100% - 1.25rem),
    var(--box--border__bottom-left) 0 100% / .625rem .625rem,
    var(--box--border__bottom) .625rem 100% / calc(100% - 1.25rem) .625rem,
    var(--box--border__bottom-right) 100% 100% / .625rem .625rem;
  mask-repeat: no-repeat;
}
/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
.fancy-border {
  padding: 6px;
  border: 10px solid #B88846;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none' stroke='%23B88846' stroke-width='2'%3E%3Cpath d='M1 1h73v73H1z'/%3E%3Cpath d='M8 8h59v59H8z'/%3E%3Cpath d='M8 8h16v16H8zM51 8h16v16H51zM51 51h16v16H51zM8 51h16v16H8z'/%3E%3C/g%3E%3Cg fill='%23B88846'%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Ccircle cx='59' cy='16' r='2'/%3E%3Ccircle cx='59' cy='59' r='2'/%3E%3Ccircle cx='16' cy='59' r='2'/%3E%3C/g%3E%3C/svg%3E") 25;
}
/* ---------------------------------------------------------------------------------- */