/* ~ Color Palettes */
@import url("IWYR.css");
@import url("idolLine.css");
@import url("dolcetTech.css");
@import url("moji.css");


:root {
    --globalBorderRadius: 10px;
    --detailBarHeight: 20px;
    --fontStack: cafesweet, "MaruMonica";
    --headerFontStack: diegovainilla, "MaruMonica";
}

/* ~ Pixel Fonts */

@font-face {
    font-family: cafesweet;
    src: url('/Assets/fonts/16ptpixels/CafeSweet.ttf');
}

@font-face {
    font-family: MaruMonica;
    src: url('/Assets/fonts/16ptpixels/MaruMonica.ttf');
    /* ? The unicode range means that this font will only convert japanese characters! */
    unicode-range: U+3000-303F, U+3041-3096, U+309B-30FF, U+31F0-31FF, U+3220-3243, U+3280-337F, U+FF00-FFEF, U+4E00-9FFF, U+20000-2A6DF;
}

@font-face {
    font-family: diegovainilla;
    src: url('/Assets/fonts/16ptpixels/DiegoVainilla.otf');
}

/* ~ Fancy Fonts */

@font-face {
    font-family: peachsundress;
    src: url('/Assets/fonts/peachsundress.ttf');
}

@font-face {
    /* use & _ - for connectors */
    font-family: heartstyle;
    src: url('/Assets/fonts/heartstyle.ttf');
}

@font-face {
    /* Use stylistic sets ss01 - ss06 for connectors*/
    font-family: maddison;
    src: url('/Assets/fonts/Maddison.ttf');
}

/* ~ Cute Fonts */

/* ? Fuzzy Font! Used on the credits page */
@font-face {
    font-family: FoxRelish;
    src: url('/Assets/fonts/FoxRelish.ttf');
}

/* ? Used in Your Tome */
@font-face {
    font-family: MagicStars;
    src: url('/Assets/fonts/MagicStars.otf');
}

/* ? Used in multiple places throughout the site */
@font-face {
    font-family: heartBlood;
    src: url('/Assets/fonts/yanFonts/HeartBlood.ttf');
}

/* ? Used in the Nav App */
@font-face {
    font-family: brightHeart;
    src: url('/Assets/fonts/yanFonts/BrightHeart.otf');
}

/* ? Used in Bloom Retro. Might try and use it in some other places! */
@font-face {
    font-family: cyberpunk;
    src: url('/Assets/fonts/CyberPunk.ttf');
}

/* ? Used on the Yan Shrine and Updates */
@font-face {
    font-family: doodles;
    src: url('/Assets/fonts/dingbatFonts/DoodlesDecorate.ttf');
}


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

html {
    width: 100vw;
}

* {
    scrollbar-width: thin;
    box-sizing: border-box;

    scrollbar-color: var(--bubblegum) white;
}

*::-webkit-scrollbar,
*::-webkit-scrollbar-button {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: white;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--bubblegum);
}

body {
    position: relative;
    overflow: hidden;

    animation: fadeIn ease .55s forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* & Simplification */

.img-fluid {
    width: 100%;
}

.flex,
.flex2 {
    display: flex;
}

.flex2 {
    flex-wrap: wrap;
}

.columnFlex1,
.columnFlex2 {
    display: flex;
    flex-direction: column;
}

.columnFlex2 {
    flex-wrap: wrap;
}

/* & Global styling */

::selection {
    background-color: var(--driedBlood);
    color: white;
}

mark {
    background-color: var(--driedBlood);
    color: white;
}

quote {
    display: block;
    margin: 10px 0;
}

quote::before,
quote::after {
    font-size: larger;
}

quote::before {
    content: "❝";
    color: inherit;
}

quote::after {
    content: "❞";
    color: inherit;
}

/* Rainbow BG Pastel */
.rainbowbg {
    background: linear-gradient(90deg, rgba(255, 189, 200, 1) 0%, rgba(246, 255, 175, 1) 20%, rgba(205, 255, 167, 1) 40%, rgba(195, 241, 255, 1) 60%, rgba(241, 202, 245, 1) 80%, rgba(252, 206, 242, 1) 100%);
}

/* Rainbow BG Not Pastel */
.rainbowbg2 {
    background: linear-gradient(90deg, rgba(255, 71, 101, 1) 0%, rgba(254, 147, 65, 1) 10%, rgba(241, 205, 57, 1) 20%, rgba(102, 246, 70, 1) 30%, rgba(38, 191, 186, 1) 40%, rgba(65, 89, 225, 1) 50%, rgba(159, 20, 225, 1) 60%, rgba(173, 76, 254, 1) 70%, rgba(252, 64, 125, 1) 80%, rgba(255, 139, 177, 1) 90%, rgba(255, 255, 255, 1) 100%);
}

/* Drop Shadows and Text Shadows */

.textshadow {
    text-shadow: 2px 2px 0 var(--driedBlood), 2px -2px 0 var(--driedBlood), -2px 2px 0 var(--driedBlood), -2px -2px 0 var(--driedBlood), 2px 0px 0 var(--driedBlood), 0px 2px 0 var(--driedBlood), -2px 0px 0 var(--driedBlood), 0px -2px 0 var(--driedBlood);
}

.dropShadow {
    filter: drop-shadow(-1px 2px 3px rgba(0, 0, 0, 0.26));
}

.dropShadowOutlineF {
    filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white);
}

.dropShadowOutlineW2 {
    filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000002d);
}

.dropshadowPurple {
    box-shadow: 2px 2px 0 var(--wisteria), 2px -2px 0 var(--wisteria), -2px 2px 0 var(--wisteria), -2px -2px 0 var(--wisteria), 2px 0px 0 var(--wisteria), 0px 2px 0 var(--wisteria), -2px 0px 0 var(--wisteria), 0px -2px 0 var(--wisteria);
}

/* Details at the top */

.detailing {
    position: absolute;
    background: url('/Assets/pixels/headers/headerpink2.gif') repeat-x;
    background-size: contain;
    height: 58px;
    width: 100%;

    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

/* Border Styles */

.kerchiefBorder {
    border-style: solid;
    border-image: url("/Assets/borders/border2FP.png") 28 round;
    border-width: 28px;
    background-clip: padding-box;
}

.cloudBorder {
    border-style: solid;
    border-image: url("/Assets/borders/borderfilled.png") 8 round;
    border-width: 8px;
    background-clip: padding-box;
}

.blueberryBorder {
    border-style: solid;
    border-image: url("/Assets/borders/blueberryGingham.png") 8 round;
    border-width: 7px;
    background-clip: padding-box;
}

/* Phone */

#phoneSpot {
    position: fixed;
    bottom: 0;
    right: 0;

    height: 100px;
    width: 350px;

    z-index: 1001;
}

#phone {
    height: 650px;
    width: 320px;
    border: none;

    position: absolute;
    right: 20px;

    z-index: 1000;

    transition: bottom .5s ease-in-out, transform .25s;
}

#phone.hidden {
    bottom: -605px;

    /* ! For testing... PLEASE CHANGE WHEN NEEDED */
    /* bottom: 0 ; */
}

#phone.visible {
    bottom: 0;
    animation: none;
}

.bounce-phone {
    animation: bounce 0.8s 5s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* #phoneSpot::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);

    width: 200px;
    height: 100px;
    background: url('/Assets/myAssets/idolLineLogo/HoverIndicator.png') no-repeat center/contain;

    z-index: 1000;
    pointer-events: none;
    opacity: 0;
}

#phoneSpot.show-indicator::after {
    opacity: 1;
    animation: bounce2 2.5s ease-in-out infinite;
}

@keyframes bounce2 {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-15px);
    }
} */


/* Boring Shit */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
pre,
code {
    margin: 0;
}

ul {
    list-style-type: none;
}

iframe {
    border: none;
}

/* ? Media Queries */

@media (prefers-reduced-motion: reduce) {}

@media only screen and (max-width: 1024px) {}

@media only screen and (max-width: 810px) {
    .flex {
        flex-flow: column nowrap;
    }

    /* .flex2 {
        flex-flow: column wrap;
    } */
}

@media only screen and (max-width: 500px) {
    #phone {
        right: 50%;
        transform: translateX(50%);
    }
}