body {
    /* background-image: url('../images/home_reference_twitch.png'); */
    background-image: url('../images/bg.png');
    background-attachment: fixed;
    background-size: cover;
    /* background: #fef8f1; */
    overflow-x: hidden;
}


/* <-- Hero --> */

.Hero {
    position: relative;
    /* background-image: url("../images/bg.png");
    background-size: contain; */
}

.Hero .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 56.25vw;
    z-index: -10;
}

.Hero .signature {
    display: flex;
    justify-content: center;
}

.Hero .signature img {
    width: 69%;
    height: calc(0.45 * 69vw);
    padding: 10px 40px;
    margin-top: 13px;
    margin-left: 10px;
}

@media screen and (max-width: 1000px) {
    .Hero .signature img {
        width: 100%;
        height: calc(0.45 * 100vw);
        padding: 10px 40px;
        margin-top: 25px;
        margin-left: 10px;
    }
    .Hero .aboutme {
        margin-top: 25px;
    }
}


/* <--- end ---> */


/* <--- About Me ---> */

.aboutme {
    display: flex;
    justify-content: space-around;
    width: 85%;
    margin: 13px auto;
    margin-bottom: 75px;
    background-color: #f6e5d8;
    border: 5px solid white;
    /* background-image: url("../images/about-me-reference.png"); */
    background-repeat: no-repeat;
    background-size: cover;
}

.aboutme .column {
    position: relative;
    width: 49%;
    height: auto;
    text-align: left;
    /* margin-bottom: 10px;
    padding: 20px 75px; */
    /* background-color: rgba(255, 0, 0, 0.26); */
}

.aboutme .column .abtmeCont {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.aboutme .column #character {
    float: right;
    width: 90%;
    margin-top: 2%;
}

.squiggle {
    position: absolute;
    transform: translateX(0);
    animation-name: go;
    animation-duration: 250ms;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    -webkit-animation-direction: alternate-reverse;
}


/* 
@keyframes go {
    from {
        transform: translateX(0) rotate(0deg);
    }
    to {transform: translateX(0.1px) rotate(1deg)}
} */

.aboutme .column .xo {
    top: 0;
    right: 0;
    margin-top: 26%;
    margin-right: 1%;
    width: 7%;
}

.aboutme .column .diamond {
    top: 0;
    left: 0;
    margin-top: 27%;
    margin-left: 39%;
    width: 11%;
    transform: scaleX(-1);
}

.aboutme .column .legs {
    bottom: 0;
    right: 0;
    margin-bottom: 11%;
    margin-right: 12%;
    width: 15%;
}

.aboutme .column .tail {
    bottom: 0;
    left: 0;
    margin-bottom: 33%;
    margin-left: 17%;
    width: 15%;
}

.aboutme .column .head {
    top: 0;
    left: 0;
    margin-top: 9%;
    margin-left: 39%;
    width: 15%;
}

.aboutme .column h1:before,
.aboutme .column h2:before,
.aboutme .column h3:before,
.aboutme .column h4:before {
    position: absolute;
    -webkit-text-stroke: 10px white;
    left: 0;
    z-index: -1;
}

.aboutme .column h1,
.aboutme .column h2,
.aboutme .column h3,
.aboutme .column h4 {
    z-index: 1;
}

.aboutme .column h1:before {
    content: "About Me";
}

.aboutme .column h1 {
    position: absolute;
    color: #9a67ff;
    font-family: 'Mabook', sans-serif;
    font-size: 3.7vw;
}

.aboutme .column .title {
    top: 11.6%;
    right: 31%;
    transform: rotate(10deg);
}

.aboutme .column h2:before {
    content: "Mysterious";
}

.aboutme .column h2 {
    position: absolute;
    color: #ff7392;
    font-family: 'Mabook', sans-serif;
    font-size: 1.7vw;
}

.aboutme .column .name {
    top: 22.1%;
    left: 20%;
}

.aboutme .column h3:before {
    content: "Any pronouns";
}

.aboutme .column h3 {
    position: absolute;
    color: #65c3ff;
    font-family: 'Milky Honey', sans-serif;
    font-size: 1.7vw;
}

.aboutme .column .pronouns {
    top: 29.2%;
    left: 18%;
}

.aboutme .column h4:before {
    content: "Artist/Streamer";
}

.aboutme .column h4 {
    position: absolute;
    color: #b58fff;
    font-family: 'Milky Honey', sans-serif;
    font-size: 1.4vw;
}

.aboutme .column .titles {
    top: 36.5%;
    left: 29%;
}

.aboutme .column p {
    position: absolute;
    color: #c3a3ff;
    font-family: 'Milky Honey', sans-serif;
    font-size: 1.35vw;
}

.aboutme .column .paragraph1:before,
.aboutme .column .paragraph2:before,
.aboutme .column .paragraph3:before {
    position: absolute;
    -webkit-text-stroke: 5px white;
    left: 0;
    z-index: -1;
}

.aboutme .column .paragraph1,
.aboutme .column .paragraph2,
.aboutme .column .paragraph3 {
    z-index: 1;
    top: 0;
    left: 0;
}

.aboutme .column .paragraph1:before {
    content: "Hey! I'm Mysterious, a self taught artist and animator. I been doing art my whole life and started digitally 5+ years ago.";
}

.aboutme .column .paragraph {
    position: absolute;
    width: 69%;
    min-height: 59%;
    top: 45.3%;
    left: 8%;
}

.aboutme .column .paragraph2:before {
    content: "My work mainly consists of characters and illustrations, I use Clip Studio Paint Pro and Toon Boom Harmony for my work.";
}

.aboutme .column .paragraph2 {
    top: 25.9%;
}

.aboutme .column .paragraph3:before {
    content: "I Hope one day I can become successful with my art and make it a career for myself :)";
}

.aboutme .column .paragraph3 {
    top: 52.3%;
}

.aboutme .column .socials {
    position: absolute;
    z-index: 1;
    top: 72%;
    margin: 0px auto;
    text-align: center;
    width: 100%;
}

.aboutme .column .socials a {
    text-decoration: none;
    font-size: 1.5vw;
    color: #fcf5ea;
    display: inline-block;
    justify-content: space-between;
    border-radius: 50%;
    cursor: default;
}

.aboutme .column .socials a:nth-of-type(1):hover {
    color: #d9b4ff;
}
.aboutme .column .socials a:nth-of-type(2):hover {
    color: #ff95a4;
}
.aboutme .column .socials a:nth-of-type(3):hover {
    color: #bbe3fe;
}
.aboutme .column .socials a:nth-of-type(4):hover {
    color: #ffed9b;
}
.aboutme .column .socials a:nth-of-type(5):hover {
    color: #d9b4ff;
}
.aboutme .column .socials a:nth-of-type(6):hover {
    color: #ff95a4;
}

.aboutme .column .socials a:nth-of-type(1) div {
    background-color: #d9b4ff;
}
.aboutme .column .socials a:nth-of-type(2) div {
    background-color: #ff95a4;
}
.aboutme .column .socials a:nth-of-type(3) div {
    background-color: #bbe3fe;
}
.aboutme .column .socials a:nth-of-type(4) div {
    background-color: #ffed9b;
}
.aboutme .column .socials a:nth-of-type(5) div {
    background-color: #d9b4ff;
}
.aboutme .column .socials a:nth-of-type(6) div {
    background-color: #ff95a4;
}

.aboutme .column .socials a:hover div {
    background-color: #fcf5ea;
}

.aboutme .column .socials a div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3vw;
    height: 3vw;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    border: 6px solid;
    border-color: #fcf5ea;
    background-color: #f8e6da;
    cursor: pointer;
}

.aboutme .column .egg {
    z-index: 0;
    top: 0;
    left: 0;
    margin-top: 7%;
    margin-left: 17.5%;
    width: 13%;
}

.aboutme .column .red {
    z-index: 0;
    top: 0;
    left: 0;
    margin-top: 3%;
    margin-left: 24%;
    width: 7%;
    transform: rotate(-10deg);
}

.aboutme .column .star {
    z-index: 0;
    top: 0;
    right: 0;
    margin-top: 7%;
    margin-right: 31%;
    width: 6%;
}

.aboutme .column .h {
    z-index: 0;
    top: 0;
    right: 0;
    margin-top: 14%;
    margin-right: 26%;
    width: 11.5%;
}

.aboutme .column .blue {
    z-index: 0;
    bottom: 0;
    left: 0;
    margin-bottom: 28.5%;
    margin-left: 1.75%;
    width: 11%;
    transform: rotate(-10deg);
}

@media screen and (max-width: 1200px) {
    .aboutme {
        display: block;
        justify-content: none;
        width: 85%;
        height: auto;
        margin: 13px auto;
        background-color: #f6e5d8;
        border: 5px solid white;
    }
    .aboutme .column {
        position: relative;
        width: 100%;
        text-align: left;
    }
    .aboutme .column .abtmeCont {
        position: relative;
        min-width: 100%;
        min-height: 100vw;
        margin-top: 6%;
    }
    .aboutme .column #character {
        float: none;
        width: 90%;
        margin-top: 4%;
        margin-left: 4%;
    }
    .aboutme .column .xo {
        top: 0;
        right: 0;
        margin-top: 26%;
        margin-right: 8%;
        width: 7%;
    }
    .aboutme .column .diamond {
        top: 0;
        left: 0;
        margin-top: 27%;
        margin-left: 32%;
        width: 11%;
        transform: scaleX(-1);
    }
    .aboutme .column .legs {
        bottom: 0;
        right: 0;
        margin-bottom: 11%;
        margin-right: 19%;
        width: 15%;
    }
    .aboutme .column .tail {
        bottom: 0;
        left: 0;
        margin-bottom: 33%;
        margin-left: 10%;
        width: 15%;
    }
    .aboutme .column .head {
        top: 0;
        left: 0;
        margin-top: 9%;
        margin-left: 32%;
        width: 15%;
    }
    .aboutme .column h1 {
        font-size: 8.35vw;
    }
    .aboutme .column .title {
        top: 0;
        right: 0;
        top: 2.5%;
        right: 25%;
        transform: rotate(10deg);
    }
    .aboutme .column h2 {
        font-size: 4.35vw;
    }
    .aboutme .column .name {
        top: 0;
        left: 0;
        top: 9.5%;
        left: 19%;
    }
    .aboutme .column h3 {
        font-size: 4.35vw;
    }
    .aboutme .column .pronouns {
        top: 0;
        left: 0;
        top: 15%;
        left: 17%;
    }
    .aboutme .column h4 {
        font-size: 4.05vw;
    }
    .aboutme .column .titles {
        top: 0;
        left: 0;
        top: 21%;
        left: 31%;
    }
    .aboutme .column p {
        font-size: 5vw;
    }
    .aboutme .column .paragraph {
        position: relative;
        display: inline-block;
        width: 93%;
        min-height: 100%;
        margin-top: 45%;
        padding-left: 7%;
        margin-bottom: 5%;
        z-index: 10;
        top: 0;
        left: 0;
    }
    .aboutme .column .paragraph1 {
        position: relative;
    }
    .aboutme .column .paragraph2 {
        position: relative;
        margin-top: 10%;
    }
    .aboutme .column .paragraph3 {
        position: relative;
        margin-top: 10%;
    }
    .aboutme .column .socials {
        position: relative;
        z-index: 1;
        margin: 0px auto;
        margin-top: 10%;
        text-align: center;
        width: 100%;
    }
    .aboutme .column .socials a {
        text-decoration: none;
        font-size: 4.25vw;
        color: #fcf5ea;
        display: inline-block;
        justify-content: space-between;
        border-radius: 50%;
        cursor: default;
    }
    .aboutme .column .socials a div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 10vw;
        height: 10vw;
        min-width: 40px;
        min-height: 40px;
        border-radius: 50%;
        border: 6px solid;
        border-color: #fcf5ea;
        background-color: #f8e6da;
        cursor: pointer;
    }
    .aboutme .column .egg {
        z-index: 0;
        top: 0;
        left: 0;
        margin-top: -2%;
        left: 0%;
        width: 16%;
    }
    .aboutme .column .red {
        z-index: 0;
        top: 0;
        left: 0;
        margin-top: -7%;
        left: 1.5%;
        width: 9%;
        transform: rotate(-10deg);
    }
    .aboutme .column .star {
        z-index: 0;
        top: 0;
        right: 0;
        margin-top: 0%;
        right: -4.5%;
        width: 6%;
    }
    .aboutme .column .h {
        z-index: 0;
        top: 0;
        right: 0;
        margin-top: 4%;
        right: -9%;
        width: 14.5%;
    }
    .aboutme .column .blue {
        z-index: 0;
        left: auto;
        bottom: 12%;
        right: 3.5%;
        width: 11%;
        transform: rotate(-10deg);
    }
    .aboutme {
        margin-top: 25px;
    }
}


/* <--- end ---> */


/* <--- About Me ---> */

.commissions {
    position: relative;
    display: flex;
    justify-content: space-around;
    background-color: #f8e6da;
    margin-top: 50px;
}

.commissions .tier {
    position: relative;
    margin: 50px auto;
    min-width: 550px;
    width: 30%;
}

.commissions .tier:last-of-type {
    margin-bottom: 0px;
}

.commissions .tier .tierimage {
    position: absolute;
    width: 285px;
    height: 285px;
    overflow: hidden;
    border-radius: 50%;
    border-width: 10px;
    border-style: solid;
    background-color: #f7efed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.commissions .tier .tierimage img {
    width: 100%;
    height: auto;
}

.commissions .tier:nth-of-type(1) .image img {
    transform: scale(1.05) translate(5%, 10%);
}

.commissions .tier .display {
    width: auto;
    margin: auto 20px;
    margin-top: 142.5px;
    background-color: #fef9f1;
    z-index: 0;
    border-width: 10px;
    border-style: solid;
    text-align: center;
}

.commissions .tier .display .title {
    font-family: 'LuloCleanW01-OneBold', sans-serif;
    letter-spacing: -6px;
    font-size: 47Pt;
    margin-top: 142.5px;
    color: white;
    -webkit-text-stroke-width: 3px;
}

.commissions .tier .display .price {
    font-family: 'LuloCleanW01-OneBold', sans-serif;
    letter-spacing: -6px;
    font-size: 47Pt;
    color: white;
    -webkit-text-stroke-width: 3px;
}

.commissions .tier .display .seperator {
    height: 4px;
    width: 85%;
    margin: auto auto;
}

.commissions .tier .display .perks {
    width: 85%;
    margin: auto auto;
}

.commissions .tier .display .perks ul li {
    display: flex;
    padding-top: 20px;
}

.commissions .tier .display .perks ul li .lowop {
    opacity: 45%;
}

.commissions .tier .display .perks ul li i {
    color: white;
    -webkit-text-stroke-width: 3px;
    font-size: 40px;
    text-align: center;
    width: 15%;
    float: left;
}

.commissions .tier .display .perks ul li p {
    font-family: 'Louis George Cafe', sans-serif;
    font-weight: 550;
    letter-spacing: 1.5px;
    font-size: 25pt;
    -webkit-text-stroke-width: 3px;
    width: 80%;
    float: right;
    text-align: left;
    -webkit-text-stroke-width: 0;
}

.commissions .tier .display .learnmore {
    display: block;
    text-decoration: none;
    font-family: 'LuloCleanW01-OneBold', sans-serif;
    letter-spacing: -5px;
    font-size: 25pt;
    color: white;
    margin: 25px auto;
    margin-bottom: 30px;
    padding-top: 15px;
    width: 65%;
    padding-bottom: 16px;
    border-radius: 40px;
    -webkit-text-stroke-width: 0px;
    cursor: pointer;
}

@media screen and (max-width: 1650px) {
    .commissions {
        margin-top: 50px;
        position: relative;
        display: block;
        background-color: #f8e6da;
        margin-top: 50px;
    }
    .commissions .tier {
        padding-top: 50px;
        min-width: 550px;
        max-width: 850px;
        width: 80%;
    }
    .commissions .tier:last-of-type {
        padding-bottom: 50px;
    }
}


/* <--- end ---> */


/* <--- Twitch ---> */

.twitch {
    display: flex;
    visibility: hidden;
    position: absolute;
    width: 100%;
    /* background-color: rgba(255, 0, 0, 0.096); */
    margin: 210px auto;
    justify-content: space-around;
}

.twitch .textcont {
    width: 30%;
    margin: auto 20px;
    z-index: 0;
    text-align: center;
    margin-left: 100px;
}

.twitch .textcont p {
    font-family: 'LuloCleanW01-OneBold', sans-serif;
    letter-spacing: -9px;
    font-size: 53.85pt;
    color: white;
    -webkit-text-stroke-width: 3px;
}

.twitch .textcont .totwitch {
    display: block;
    text-decoration: none;
    font-family: 'LuloCleanW01-OneBold', sans-serif;
    letter-spacing: -5px;
    font-size: 25pt;
    color: white;
    margin: 25px auto;
    margin-bottom: 30px;
    padding-top: 15px;
    width: 300px;
    padding-bottom: 16px;
    border-radius: 40px;
    -webkit-text-stroke-width: 0px;
    cursor: pointer;
}

.twitch .player {
    display: inline-block;
    margin-right: 100px;
    justify-content: center;
    height: 640px;
    width: 55%;
}

.twitch .player #stream {
    height: 100%;
    width: 100%;
}

@media screen and (max-width: 1700px) {
    .twitch {
        display: block;
        width: 100%;
        height: auto;
        margin: 250px auto;
    }
    .twitch .textcont {
        position: relative;
        margin: auto auto;
        z-index: 0;
        text-align: center;
        width: 50%;
        margin-bottom: 250px;
    }
    .twitch .player {
        display: block;
        position: relative;
        margin: auto auto;
        height: 50.63vw;
        width: 90vw;
    }
}


/* <--- end ---> */


/* <--- Gallery ---> */

.gallery {
    display: flex;
    width: 100%;
    background-color: transparent;
    margin: 0px auto;
    padding: 75px 0px;
    justify-content: space-around;
}

.gallery .textcont {
    width: 35%;
    margin: auto 20px;
    z-index: 0;
    text-align: center;
    justify-content: center;
    margin-left: 100px;
}

.gallery .textcont .bigtext {
    font-family: 'LuloCleanW01-OneBold', sans-serif;
    letter-spacing: -9px;
    font-size: 53.85pt;
    color: white;
    -webkit-text-stroke-width: 3px;
}

.gallery .textcont div {
    display: flex;
    justify-content: center;
    width: 100%;
}

.gallery .textcont div .smalltext {
    font-family: 'Poppins', sans-serif;
    font-size: 25pt;
    font-weight: bolder;
    width: 85%;
}

.gallery .textcont .seeall {
    display: block;
    text-decoration: none;
    font-family: 'LuloCleanW01-OneBold', sans-serif;
    letter-spacing: -5px;
    font-size: 25pt;
    color: white;
    margin: 70px auto;
    margin-bottom: 30px;
    padding-top: 15px;
    width: 300px;
    padding-bottom: 16px;
    border-radius: 40px;
    -webkit-text-stroke-width: 0px;
    cursor: pointer;
}

.gallery .images {
    margin-right: 100px;
    justify-content: center;
    width: 50%;
}

.gallery .images .row {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

.gallery .images .row:first-of-type {
    margin-bottom: 30px;
}

.gallery .images .row .image:first-of-type {
    margin-right: 30px;
}

.gallery .images .row .image {
    width: 22vw;
    height: 22vw;
    overflow: hidden;
    border-width: 9px;
    border-style: solid;
    background-color: white;
    text-align: center;
    justify-content: center;
    z-index: 1;
}

.gallery .images .row .image img {
    width: 100%;
    bottom: 0;
    margin-left: 50%;
    transform: translate(-50%);
    align-self: center;
    transition: transform 1.5s cubic-bezier(.14,.4,.09,.99)!important;
}

.gallery .images .row .image img:hover {
    transform: translate(-50%) scale(1.1);
}

@media screen and (max-width: 1450px) {
    .gallery {
        position: relative;
        display: block;
        width: 100%;
        margin: 0px auto;
        padding: 150px 0px;
    }
    .gallery .textcont {
        position: relative;
        width: 70%;
        margin: auto auto;
        z-index: 0;
        text-align: center;
        justify-content: center;
        margin-bottom: 200px;
    }
    .gallery .textcont div .smalltext {
        width: 80%;
    }
    .gallery .images {
        margin: 100px auto;
        margin-bottom: 0px;
        justify-content: center;
        width: 85%;
    }
    .gallery .images .row .image {
        width: 37vw;
        height: 37vw;
    }
}


/* <--- end ---> */