.checkbox-lg {
    width: 20px;
    height: 20px;
}

/* buttons shamlessly stolen from https://codepen.io/sundaisun/pen/ZpVBQW give em some love*/
/* Mixins */
.bg-1 {
    color: #fa7e29;
}

.bg-gradient1 span,
.bg-gradient1:before {
    background: #fa7e29;
    background: -moz-linear-gradient(180deg, #fa7e29 0%, #F6682F 80%, #F6682F 100%);
    background: -webkit-linear-gradient(180deg, #fa7e29 0%, #F6682F 80%, #F6682F 100%);
    background: linear-gradient(180deg, #fa7e29 0%, #F6682F 80%, #F6682F 100%);
}

.bg-2 {
    color: #F6C137;
}

.bg-gradient2 span,
.bg-gradient2:before {
    background: #F6C137;
    background: -moz-linear-gradient(180deg, #F6C137 0%, #F6A636 80%, #F6A636 100%);
    background: -webkit-linear-gradient(180deg, #F6C137 0%, #F6A636 80%, #F6A636 100%);
    background: linear-gradient(180deg, #F6C137 0%, #F6A636 80%, #F6A636 100%);
}

.bg-3 {
    color: #FF2874;
}

.bg-gradient3 span,
.bg-gradient3:before {
    background: #FF2874;
    background: -moz-linear-gradient(180deg, #FF2874 0%, #FF3D3C 80%, #FF3D3C 100%);
    background: -webkit-linear-gradient(180deg, #FF2874 0%, #FF3D3C 80%, #FF3D3C 100%);
    background: linear-gradient(180deg, #FF2874 0%, #FF3D3C 80%, #FF3D3C 100%);
}

.bg-4 {
    color: #e9ec27;
}

.bg-gradient4 span,
.bg-gradient4:before {
    background: #e9ec27;
    background: -moz-linear-gradient(180deg, #e9ec27 0%, #d7d12d 80%, #d7d12d 100%);
    background: -webkit-linear-gradient(180deg, #e9ec27 0%, #d7d12d 80%, #d7d12d 100%);
    background: linear-gradient(180deg, #e9ec27 0%, #d7d12d 80%, #d7d12d 100%);
}

.bg-5 {
    color: #f35283;
}

.bg-gradient5 span,
.bg-gradient5:before {
    background: #f35283;
    background: -moz-linear-gradient(180deg, #f35283 0%, #d246ac 80%, #d246ac 100%);
    background: -webkit-linear-gradient(180deg, #f35283 0%, #d246ac 80%, #d246ac 100%);
    background: linear-gradient(180deg, #f35283 0%, #d246ac 80%, #d246ac 100%);
}

/* General */


/* fancy Button */
.fancy-button {
    width: fit-content;
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
    display: inline-block;
    font-weight: 500;
    margin: 20px;
    color: #ffffff;
    position: relative;
}


.fancy-button.bg- {
    /* text-shadow: 0px 0px 1px #BF4C28; */
}

.fancy-button.bg-gradient2 {
    /* text-shadow: 0px 0px 1px #CEA22E; */
}

.fancy-button.bg-gradient3 {
    text-shadow: 0px 0px 1px #bd0b1a;
}

.fancy-button:before {
    content: "";
    display: block;
    position: absolute;
}

.fancy-button span {
    display: inline-block;
    padding: 30px 34px;
    border-radius: 50em;
    position: relative;
    will-change: transform, filter;
    transition: all 0.3s ease-out;
}

.fancy-button:focus {
    color: #ffffff;
}

.fancy-button:hover {
    color: #ffffff;
}

.fancy-button:hover span {
    filter: brightness(0.9) contrast(1.2);
    transform: scale(0.96);
}

.fancy-button:hover:before {
    bottom: 3px;
    filter: blur(6px) brightness(0.8);
}

.fancy-button:active span {
    filter: brightness(0.75) contrast(1.7);
}

.fancy-button.pop-onhover span {
    border-radius: 4px;
}

.fancy-button.pop-onhover:before {
    opacity: 0;
    bottom: 10px;
}

.fancy-button.pop-onhover:hover:before {
    bottom: -7px;
    opacity: 1;
    filter: blur(16px);
}

.fancy-button.pop-onhover:hover span {
    transform: scale(1);
}

.fancy-button.pop-onhover:hover:active span {
    filter: brightness(1) contrast(1);
    transform: scale(1);
    transition: all 0.2s ease-out;
}

.fancy-button.pop-onhover:hover:active:before {
    bottom: 0;
    filter: blur(5px) brightness(0.85);
    transition: all 0.2s ease-out;
}

.rainbow {
    /* Rainbow Gradient */
    background: linear-gradient(
            270deg,
            #ff0000,
            #ff9900,
            #ffff00,
            #33cc33,
            #0066ff,
            #6600cc,
            #ff3399,
            #ff0000
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: rainbowMove 5s linear infinite;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

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