@font-face {
    font-family: 'Be My Glittertine';
    src: url(../fonts/BeMyGlittertine.woff2) format('woff2'),
        url(../fonts/BeMyGlittertine.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@keyframes slide-hearths {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 320px -160px; 
  }
}

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

html, body {
    touch-action: none; 
    /* Also include these to prevent selecting/copying text which can trigger zoom on some devices */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

iframe {
    border: 0;
}

.wrapper {
    position: absolute;
    width: 100%;
    height: 400%;
    background: #FE9091;
    background: radial-gradient(circle, rgba(254, 144, 145, 1) 0%, rgba(0, 0, 0, 1) 80%);
    top: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
}

.wrapper:after {
    content: " ";
    display: block;
    position: absolute;
    width: 120%;
    height: 50%;
    background-image: url(../images/pixelHearth.png);
    background-repeat: repeat;
    background-size: 50px;
    background-position: 0 0;
    animation: slide-hearths 30s linear infinite;
    opacity: 0.25;
    mix-blend-mode: multiply;
    transform: rotate(-10deg)
}

.content {
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: 25%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    --sb-track-color: #060606;
    --sb-thumb-color: #fe9091;
    --sb-size: 5px;
}

.content::-webkit-scrollbar {
  width: var(--sb-size)
}

.content::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 4px;
}

.content::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 4px;
  
}

.spanner {
    display: none;
}

@media (max-width: 999px) {
    .spanner {
        display: block;
        height: 40px;
    }
}

@supports not selector(::-webkit-scrollbar) {
  .content {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

header {
    width: 800px;
    background-image: url(../images/headerImage.png);
    background-size: auto calc(100% - 20px);
    background-repeat: no-repeat;
    background-position: bottom right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    flex-grow: 0;
    flex-shrink: 0;
}

.homepage header {
    height: 500px;
}

.secondary-page header {
    height: 300px;
}

@media (max-width: 560px) {
    .spanner {
        display: block;
        height: 80px;
    }

    header {
        background-size: auto calc(100% - 60px);
    }
}


@media (max-width: 880px) {
    header {
        width: calc(100vw - 80px);
    }
}

header .callouts {
    flex-grow: 0;
    flex-shrink: 0;
}

header h1 {
    font-family: 'Be My Glittertine', Arial, sans-serif;
    font-size: 75px;
    color: #FFFFFF;
    text-shadow: -4px 4px 0px #FF0068;
    font-weight: normal;
    margin: 0 0 0 5px;
    flex-grow: 0;
    flex-shrink: 0;
}

header .callouts p {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 24px;
    line-height: 36px;
    color: #FFFFFF;
}

header .social-links {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
}

header .social-links .social {
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 40px;
    height: 40px;
    font-size: 0;
    margin-right: 30px;
    text-decoration: none;
}

header .social-links .social:hover {
    opacity: 0.6;
}

header .social-links .social.x {
    background-image: url(../images/xLogo.svg);
}

header .social-links .social.patreon {
    background-image: url(../images/patreonLogo.svg);
}

/*
#ADDSOCIAL# Sample to add a new social. Copy-paste and replace:
- CLASS: Name of the class, can be anything as long as it's valid (stick to letters and dashes to be safe). Must be the same used in the html file.
- COVER_NAME: The name of the image in the `assets` folder (size: 40x40)

// CODE BELOW

header .social-links .social.<CLASS> {
    background-image: url(../images/<COVER_NAME>.svg);
}
*/

@media (max-width: 630px) {
    header h1 {
        font-size: 52px;
    }

    header .callouts p {
        font-size: 18px;
        line-height: 24px;
    }

    header .social-links .social {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 560px) {
    header {
        height: auto;
    }

    header h1 {
        padding: 20px 0;
    }

    header .callouts {
        padding-bottom: 20px;
    }

    header .social-links {
        padding-bottom: 40px;
    }
}

main {
    border: 2px solid rgba(254, 144, 145, 0.8);
    border-radius: 32px;
    background-color: rgba(0,0,0,0.8);
    margin-bottom: 30px;
}

main, footer {
    width: 800px;
}

@media (max-width: 880px) {
    main, footer {
        width: calc(100vw - 80px);
    }
}

@media (max-width: 630px) {
    main, footer {
        width: calc(100vw - 40px);
    }
}

main h2 {
    font-family: 'Be My Glittertine', Arial, sans-serif;
    font-size: 62px;
    color: #FFFFFF;
    /* text-shadow: -4px 4px 0px #FF0068;*/
    font-weight: normal;
    margin: 0 0 0 5px;
    text-align: center;
    padding: 20px 0;
}

@media (max-width: 630px) {
    main h2 {
        font-size: 48px;
    }
}

main .tributes, main .programs, main .any-page {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.tribute-link {
    background-size: 100%;
    width: 740px;
    height: 254px;
    border-radius: 16px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition-duration: 0.5s;
    transition-property: transform, box-shadow, opacity;
    transition-timing-function: ease;
}

.tribute-link::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 240%;
    height: 240%;
    background: linear-gradient(0deg, transparent, transparent 30%, rgba(254, 144, 145,0.3));
    transform: rotate(-45deg);
    transition: all 0.5s ease;
    opacity: 0;
}

.tribute-link:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(254, 144, 145,0.5);
}

.tribute-link:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

.tribute-link p {
    font-family: 'Be My Glittertine', Arial, sans-serif;
    font-size: 62px;
    color: #FFFFFF;
    font-weight: normal;
    margin: 0 0 0 5px;
    text-align: right;
}

.tribute-link span {
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    opacity: 0.3;
    text-transform: uppercase;
    font-size: 18px;
    text-align: right;
}

.tribute-link a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    text-decoration: none;
}

footer p {
    text-align: center;
    color: #FFFFFF;
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 40px;
    opacity: 0.6;
}

@media (max-width: 880px) {
    .tribute-link {
        width: calc(100vw - 160px);
        height: calc((100vw - 160px) / 740 * 254);
    }
}

@media (max-width: 630px) {
    .tribute-link {
        width: calc(100vw - 80px);
        height: calc((100vw - 80px) / 740 * 254);
    }
}

@media (max-width: 550px) {
    .tribute-link {
        padding: 10px;
    }

    .tribute-link p {
        font-size: 42px;
    }

    .tribute-link span {
            font-size: 16px;
    }
}

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    margin: 30px 0;
    width: 100%;
}

.cards .card {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border: 1px solid #FF0068;
    border-radius: 16px;
    overflow: hidden;
    background: #000000;
    background: radial-gradient(circle, rgba(254, 144, 145, 0.1) 0%, rgba(0, 0, 0, 0.1) 80%);
    margin-bottom: 10px;
    box-sizing: border-box;

    position: relative;
    overflow: hidden;
    transition-duration: 0.5s;
    transition-property: transform, box-shadow, opacity;
    transition-timing-function: ease;
    cursor: pointer;
}

.cards .card.card-small .description {
    width: 100%;
    position: relative;
    padding: 10px 0;
}

.cards .card-small-wrapper {
    overflow: visible;
    border-top: 1px solid #FF0068;
    border-bottom: 1px solid #FF0068;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.cards .card-small-wrapper:after {
    content: " ";
    display: block;
    position: absolute;
    right: 10px;
    top: 10.5px;
    width: 80px;
    height: 60px;
    background-image: url(../images/poking.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

.cards .card.card-small {
    width: 100%;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
}

.cards .card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(0deg, transparent, transparent 30%, rgba(254, 144, 145,0.3));
    transform: rotate(-45deg);
    transition: all 0.5s ease;
    opacity: 0;
}

.cards .card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(254, 144, 145,0.5);
}

.cards .card.card-small:hover {
    transform: scale(1);
}

.cards .card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

.cards .card img {
    width: 100%;
    border-bottom: 1px solid rgba(220, 220, 220, 0.3);
}

.cards .card h3 {
    font-family: 'Be My Glittertine', Arial, sans-serif;
    font-size: 18px;
    color: #FF0068;
    font-weight: normal;
    text-align: left;
    margin: 10px;
    font-family: Arial, sans-serif;
}

.cards .card.card-small h3 {
    margin: 10px 18px;
    line-height: 24px;
}

.cards .card p {
    color: #FFFFFF;
    font-family: Arial, sans-serif;
    font-size: 16px;
    margin: 10px;
    opacity: 0.6;
    transition: opacity 0.1s ease;
}

.cards .card:hover p {
    opacity: 1.0;
}

.cards .card a, .cards .card .lbclicker {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.tribute-link.throne {
    background-image: url(../images/throneBackground.png);
    justify-content: flex-end;
    align-items: flex-end;
}

.tribute-link.paypal {
    background-image: url(../images/paypalBackground.png);
    justify-content: flex-end;
    align-items: flex-start;
}

/*
#ADDPAYMENT# Sample to add a new link. Copy-paste and replace:
- CLASS: Name of the class, can be anything as long as it's valid (stick to letters and dashes to be safe). Must be the same used in the html file.
- COVER_NAME: The name of the image in the `assets` folder (size: 740x254)
- TEXT_POSITION: Wheteher to display the text on the left side (flex-start) or right side (flex-end) of the box.

// CODE BELOW

.tribute-link.<CLASS> {
    background-image: url(../images/<COVER_NAME>.png);
    justify-content: flex-end;
    align-items: <TEXT_POSITION>;
}
*/

/* MENU */

#menu-toggle {
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;

    z-index: 2;

    -webkit-user-select: none;
    user-select: none;
}

#menu-toggle-background {
    display: none;
    position: fixed;
    top: 22px;
    left: 27px;
    z-index: 1;
    width: 60px;
    height: 60px;
    background-color: #00000090;
    border-radius: 5px;
    backdrop-filter: blur(8.3px);
    -webkit-backdrop-filter: blur(8.3px);
}

#menu-toggle ul:after {
    content: " ";
    background-image: url(../images/menu-backdrop.png);
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    mix-blend-mode: color-dodge;
    opacity: 0.6;
    background-size: 80% auto;
    position: absolute;
    width: 100%;
    height: 96%;
    top: 0;
    left: 0;
    pointer-events: none;
}

@media (max-width: 999px) {
    #menu-toggle-background {
        display: block;
    }
}

#menu-toggle a {
    text-decoration: none;
    font-family: Arial, sans-serif;
    color: #ffffff;

    transition: color 0.3s ease;
}

#menu-toggle a:hover {
    color: #FF0068;
}


#menu-toggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    
    cursor: pointer;
    
    opacity: 0;
    z-index: 3;
    
    -webkit-touch-callout: none;
}

#menu-toggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    
    background: #cdcdcd;
    border-radius: 3px;
    
    z-index: 2;
    
    transform-origin: 4px 0px;
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}

#menu-toggle span:first-child {
    transform-origin: 0% 0%;
}

#menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menu-toggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #c8c8c8;
}

#menu-toggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menu-toggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
    position: fixed;
    max-width: 400px;
    width: 100vw;
    height: calc(100vh + 100px);
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #202020;

    background: rgb(25 25 25 / 51%);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.3px);
    -webkit-backdrop-filter: blur(8.3px);
    border: 1px solid rgb(72 72 72 / 48%);

    list-style-type: none;
    -webkit-font-smoothing: antialiased;

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
    padding: 10px 0;
    font-size: 22px;
    backdrop-filter: none;
    -webkit-backdrop-filter:  none;
}

#menu li.separ-bar {
    content: " ";
    display: block;
    width: calc(100% + 40px);
    height: 1px;
    background-color: #ffffff30;
    margin-left: -20px;
    margin-bottom: 20px;
    padding: 0;
}

#menu li.menu-header {
    background-color: #161616;
    border-radius: 25px;
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#menu li.menu-header img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 0 20px;
}

#menu li.menu-header p {
    color: #FFFFFF;
    font-size: 24px;
    font-family: 'Be My Glittertine', Arial, sans-serif;
}

#menu li label {
  cursor: pointer;
}

#menu-toggle input:checked ~ ul {
  transform: none;
}

#menu li.menu-selected a {
    text-shadow: -1px 1px 0px #FF0068;
    color: #ffffff;
    cursor: none;
    pointer-events: none;
    padding-left: 10px;
}

#menu li.menu-selected a:hover {
    text-shadow: -1px 1px 0px #FF0068;
    color: #ffffff;
}

@media (min-width: 1360px) {
    .content {
        width: calc(100% - 300px);
        left: 300px;
    }

    #menu-toggle #menu-checkbox, #menu-toggle span {
        display: none;
    }

    #menu {
        transform: none;
        max-width: 300px;
        padding-top: 85px;
    }

    #menu li.menu-header {
        width: calc(100% + 40px);
        margin-left: -20px;
    }

    #menu li.menu-header p {
        font-size: 20px;
    }
}

.popform {
    display: none;
    width: 100%;
}

.controlcb {
    display: none;
}

/* Handles up to 100 possible forms */
#cb1:checked ~ .form-1 { display: block; }
#cb2:checked ~ .form-2 { display: block; }
#cb3:checked ~ .form-3 { display: block; }
#cb4:checked ~ .form-4 { display: block; }
#cb5:checked ~ .form-5 { display: block; }
#cb6:checked ~ .form-6 { display: block; }
#cb7:checked ~ .form-7 { display: block; }
#cb8:checked ~ .form-8 { display: block; }
#cb9:checked ~ .form-9 { display: block; }
#cb10:checked ~ .form-10 { display: block; }
#cb11:checked ~ .form-11 { display: block; }
#cb12:checked ~ .form-12 { display: block; }
#cb13:checked ~ .form-13 { display: block; }
#cb14:checked ~ .form-14 { display: block; }
#cb15:checked ~ .form-15 { display: block; }
#cb16:checked ~ .form-16 { display: block; }
#cb17:checked ~ .form-17 { display: block; }
#cb18:checked ~ .form-18 { display: block; }
#cb19:checked ~ .form-19 { display: block; }
#cb20:checked ~ .form-20 { display: block; }
#cb21:checked ~ .form-21 { display: block; }
#cb22:checked ~ .form-22 { display: block; }
#cb23:checked ~ .form-23 { display: block; }
#cb24:checked ~ .form-24 { display: block; }
#cb25:checked ~ .form-25 { display: block; }
#cb26:checked ~ .form-26 { display: block; }
#cb27:checked ~ .form-27 { display: block; }
#cb28:checked ~ .form-28 { display: block; }
#cb29:checked ~ .form-29 { display: block; }
#cb30:checked ~ .form-30 { display: block; }
#cb31:checked ~ .form-31 { display: block; }
#cb32:checked ~ .form-32 { display: block; }
#cb33:checked ~ .form-33 { display: block; }
#cb34:checked ~ .form-34 { display: block; }
#cb35:checked ~ .form-35 { display: block; }
#cb36:checked ~ .form-36 { display: block; }
#cb37:checked ~ .form-37 { display: block; }
#cb38:checked ~ .form-38 { display: block; }
#cb39:checked ~ .form-39 { display: block; }
#cb40:checked ~ .form-40 { display: block; }
#cb41:checked ~ .form-41 { display: block; }
#cb42:checked ~ .form-42 { display: block; }
#cb43:checked ~ .form-43 { display: block; }
#cb44:checked ~ .form-44 { display: block; }
#cb45:checked ~ .form-45 { display: block; }
#cb46:checked ~ .form-46 { display: block; }
#cb47:checked ~ .form-47 { display: block; }
#cb48:checked ~ .form-48 { display: block; }
#cb49:checked ~ .form-49 { display: block; }
#cb50:checked ~ .form-50 { display: block; }
#cb51:checked ~ .form-51 { display: block; }
#cb52:checked ~ .form-52 { display: block; }
#cb53:checked ~ .form-53 { display: block; }
#cb54:checked ~ .form-54 { display: block; }
#cb55:checked ~ .form-55 { display: block; }
#cb56:checked ~ .form-56 { display: block; }
#cb57:checked ~ .form-57 { display: block; }
#cb58:checked ~ .form-58 { display: block; }
#cb59:checked ~ .form-59 { display: block; }
#cb60:checked ~ .form-60 { display: block; }
#cb61:checked ~ .form-61 { display: block; }
#cb62:checked ~ .form-62 { display: block; }
#cb63:checked ~ .form-63 { display: block; }
#cb64:checked ~ .form-64 { display: block; }
#cb65:checked ~ .form-65 { display: block; }
#cb66:checked ~ .form-66 { display: block; }
#cb67:checked ~ .form-67 { display: block; }
#cb68:checked ~ .form-68 { display: block; }
#cb69:checked ~ .form-69 { display: block; }
#cb70:checked ~ .form-70 { display: block; }
#cb71:checked ~ .form-71 { display: block; }
#cb72:checked ~ .form-72 { display: block; }
#cb73:checked ~ .form-73 { display: block; }
#cb74:checked ~ .form-74 { display: block; }
#cb75:checked ~ .form-75 { display: block; }
#cb76:checked ~ .form-76 { display: block; }
#cb77:checked ~ .form-77 { display: block; }
#cb78:checked ~ .form-78 { display: block; }
#cb79:checked ~ .form-79 { display: block; }
#cb80:checked ~ .form-80 { display: block; }
#cb81:checked ~ .form-81 { display: block; }
#cb82:checked ~ .form-82 { display: block; }
#cb83:checked ~ .form-83 { display: block; }
#cb84:checked ~ .form-84 { display: block; }
#cb85:checked ~ .form-85 { display: block; }
#cb86:checked ~ .form-86 { display: block; }
#cb87:checked ~ .form-87 { display: block; }
#cb88:checked ~ .form-88 { display: block; }
#cb89:checked ~ .form-89 { display: block; }
#cb90:checked ~ .form-90 { display: block; }
#cb91:checked ~ .form-91 { display: block; }
#cb92:checked ~ .form-92 { display: block; }
#cb93:checked ~ .form-93 { display: block; }
#cb94:checked ~ .form-94 { display: block; }
#cb95:checked ~ .form-95 { display: block; }
#cb96:checked ~ .form-96 { display: block; }
#cb97:checked ~ .form-97 { display: block; }
#cb98:checked ~ .form-98 { display: block; }
#cb99:checked ~ .form-99 { display: block; }
#cb100:checked ~ .form-100 { display: block; }

.cover-image {
    width: 100%;
}