/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

        /*font*/
        .monsieur-la-doulaise-regular {
            font-family: "Monsieur La Doulaise", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .jersey-10-regular {
            font-family: "Jersey 10", sans-serif;
            font-weight: 400;
            font-style: normal;
        }

        .petit-formal-script-regular {
            font-family: "Petit Formal Script", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .diphylleia-regular {
            font-family: "Diphylleia", serif;
            font-weight: 400;
            font-style: normal;
        }

        .jacquard-24-charted-regular {
            font-family: "Jacquard 24 Charted", system-ui;
            font-weight: 400;
            font-style: normal;
        }

        .imperial-script-regular {
            font-family: "Imperial Script", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .jacquard-12-regular {
            font-family: "Jacquard 12", system-ui;
            font-weight: 400;
            font-style: normal;
        }

        .song-myung-regular {
            font-family: "Song Myung", serif;
            font-weight: 400;
            font-style: normal;
        }




        /*special effects*/
        /*scalloped box*/
        .lacescr {
            border-width: 7px;
            border-style: solid;
            border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
            width: 95%;
            height: fit-content;
            overflow-y: auto;
            justify-content: center;
            box-sizing: border-box;
            margin-right: auto;
            margin-left: auto;
        }

        .prinzessin mark {
            font-family: "Imperial Script", cursive;
            font-size: 1.2em;
            font-weight: bold;
            background: none;
            color: white;
            animation: princess 2s infinite;
            animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1);
        }

        .prinzessin mark:nth-child(1) {
            animation-delay: 0s;
            display: inline-block;
        }

        .prinzessin mark:nth-child(2) {
            animation-delay: 0.2s;
            display: inline-block;
        }

        .prinzessin mark:nth-child(3) {
            animation-delay: 0.4s;
            display: inline-block;
        }

        .prinzessin mark:nth-child(4) {
            animation-delay: 0.6s;
            display: inline-block;
        }

        .prinzessin mark:nth-child(5) {
            animation-delay: 0.8s;
            display: inline-block;
        }

        .prinzessin mark:nth-child(6) {
            animation-delay: 1s;
            display: inline-block;
        }

        .prinzessin mark:nth-child(7) {
            animation-delay: 1.2s;
            display: inline-block;
        }

        .prinzessin mark:nth-child(8) {
            animation-delay: 1.4s;
            display: inline-block;
        }

        .prinzessin mark:nth-child(9) {
            animation-delay: 1.6s;
            display: inline-block;
        }

        .prinzessin mark:nth-child(10) {
            animation-delay: 1.8s;
            display: inline-block;
        }

        @-webkit-keyframes princess {
            from {
                transform: scale(0.90);
                color: white;
            }

            50% {
                transform: scale(1);
                color: #a94064;
                ;
            }

            to {
                transform: scale(0.90);
                color: white;
            }
        }

        @keyframes princess {
            from {
                transform: scale(0.90);
                color: white;
            }

            50% {
                transform: scale(1);
                color: #a94064;
                ;
            }

            to {
                transform: scale(0.90);
                color: white;
            }
        }

        .glowpad {
            margin: 5px auto;
            padding: 5px;
            width: 85%;
            box-sizing: border-box;
        }

        .glow {
            margin: 5px auto;
            width: 85%;
            height: fit-content;
            border: 3px solid pink;
            background: pink;
            border-radius: 10px;
            box-shadow: 0px 0px 10px pink, 0px 0px 10px pink, 0px 0px 10px pink, 0px 0px 10px pink, 0px 0px 14px pink;
            color: black;
            box-sizing: border-box;
        }

        glowpad-w {
            margin: 15px auto;
            padding: 5px;
            width: 85%;
            box-sizing: border-box;
        }

        .glow-w {
            margin: 15px auto;
            width: 85%;
            height: fit-content;
            border: 3px solid white;
            background: white;
            border-radius: 10px;
            box-shadow: 0px 0px 10px white, 0px 0px 10px white, 0px 0px 10px white, 0px 0px 10px white, 0px 0px 14px white;
            color: black;
            box-sizing: border-box;
        }

        .float {
            animation-name: floating;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        @keyframes floating {
            0% {
                transform: translate(0, 0px);
            }

            50% {
                transform: translate(0, 15px);
            }

            100% {
                transform: translate(0, -0px);
            }
        }

        .tumblrwob {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            white-space: pre;
        }

        .wobble:nth-child(4n+1) {
            -webkit-animation: tumblrwobble 4s ease-in-out -.5s infinite;
            animation: tumblrwobble 4s ease-in-out -.5s infinite
        }

        @keyframes tumblrwobble {
            0% {
                transform: translateY(5%) skew(3deg)
            }

            25% {
                transform: translateY(-5%)
            }

            50% {
                transform: translateY(5%) skew(-3deg)
            }

            75% {
                transform: translateY(-5%)
            }

            to {
                transform: translateY(5%) skew(3deg)
            }
        }

        @-webkit-keyframes tumblrwobble {
            0% {
                transform: translateY(5%) skew(3deg)
            }

            25% {
                transform: translateY(-5%)
            }

            50% {
                transform: translateY(5%) skew(-3deg)
            }

            75% {
                transform: translateY(-5%)
            }

            to {
                transform: translateY(5%) skew(3deg)
            }
        }

        .wobble:nth-child(4n+2) {
            -webkit-animation: tumblrwobble 4s ease-in-out -1s infinite;
            animation: tumblrwobble 4s ease-in-out -1s infinite;
        }

        .wobble:nth-child(4n+3) {
            -webkit-animation: tumblrwobble 4s ease-in-out -1.5s infinite;
            animation: tumblrwobble 4s ease-in-out -1.5s infinite;
        }

        .wobble:nth-child(4n) {
            -webkit-animation: tumblrwobble 4s ease-in-out 0s infinite;
            animation: tumblrwobble 4s ease-in-out 0s infinite;
        }




        /*basics*/
        a {
            text-decoration: none;
        }

        html {
            background-image: url("./background.png");
            background-size: cover;
            background-attachment: fixed;
            overflow: scroll;
            overflow-x: hidden;
        }

        ::-webkit-scrollbar {
            width: 0;
            /* remove scrollbar space */
            background: transparent;
            /* to make scrollbar invisible */
        }

        ::-webkit-scrollbar-thumb {
            background: transparent;
        }

        body {
            background-color: transparent;
        }

        section {
            text-align: center;
        }

        p {
            text-align: left;
        }


        .rotate180 {
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .align-left {
            text-align: left;
            justify-content: left;
        }

        /*header, top box*/
        .header {
            border: 45px solid transparent;
            border-image: url(./header-border.png) 400 round;
            background-image: url('./header.gif');
            background-size: cover;
            background-clip: padding-box;
            border-image-slice: fill;
            width: calc(60%);
            height: 15vh;
            margin: 0 auto;
            padding: 0px;
        }

        #header-style {
            font-family: "Monsieur La Doulaise", cursive;
            font-size: 5.5em;
            color: white;
            text-shadow: 2px 2px 4px #000000;
            letter-spacing: 0px;
            position: absolute;
            top: 0.7em;
            left: calc(55%);
        }

        @media screen and (max-width:980px) {
            .header {
                max-height: 15vw;
            }
        }

        /*basic structure*/
        .wrapper {
            display: flex;
            justify-content: center;
            top: 15vh;
        }

        .container {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 50%;
            justify-content: center;
            margin: 0px;
        }

        .sidebar {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 15%;
            justify-content: center;
            margin: 0px;
        }

        /*main, side, apply to all*/
        /*Layer 1: Most Outer Boxes*/
        .box {
            background-clip: padding-box;
            width: 100%;
            height: fit-content;
            min-height: 80vh;
            margin-right: auto;
            margin-left: auto;
            text-align: center;
            box-sizing: border-box;
            justify-content: center;
        }

        /*Layer 2: The scalloped boxes--lacescr*/

        /*Layer 3:pale pink box*/
        .box2 {
            border: 1px solid white;
            border-radius: 3%;
            background-color: #fae6e8;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            margin-right: auto;
            margin-left: auto;
            text-align: center;
            justify-content: center;
            box-sizing: border-box;
        }

        /*main*/
        /*bio*/
        .bio-style {
            font-family: "Jersey 10", sans-serif;
            font-size: 1.5em;
            color: #a94064;
            letter-spacing: 0px;
            margin: 10px;
            margin-right: 10px;
            margin-left: 10px;
        }

        /*Credit footer*/
        .credit-style {
            font-family: "Jersey 10", sans-serif;
            color: white;
            letter-spacing: 0px;
            margin: 10px;
            margin-right: 10px;
            margin-left: 10px;
            display: inline-block;
        }

        /*left*/
        /*Layer 4: PFP*/
        .pfp {
            border: 30px solid transparent;
            border-image: url('./frillborder.png') 200 round;
            border-image-slice: ROUND;
            background-image: url('./markhairpush.gif');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-clip: padding-box;

            width: 100%;
            height: 25vh;
            margin: 0px;
            margin-right: auto;
            margin-left: auto;
            justify-content: center;
            text-align: center;
            box-sizing: border-box;
        }

        @media screen and (max-width:980px) {
            .sidebar>.lacescr>.box2>.pfp {
                max-height: 15vw;
            }
        }

        /*Layer 4: Currently*/
        .currently-style {
            font-family: "Imperial Script", cursive;
            font-size: 1.5em;
            color: white;
            letter-spacing: 0px;
            margin: 0px;
            display: inline-block;
            word-wrap: break-word;
        }

        .currently-obj {
            font-family: "Jersey 10", sans-serif;
            font-size: 1.5em;
            color: #bbbbbb;
            letter-spacing: 0px;
            margin: 0px;
            display: inline-block;
            word-wrap: break-word;
            text-align: left;
        }

        .currently-subj {
            font-family: "Jacquard 12", system-ui;
            font-size: 1.5em;
            color: pink;
            letter-spacing: 0px;
            margin: 0px;
            display: inline-block;
            word-wrap: break-word;
            text-align: left;
            margin: 0 auto;
        }

        .currently-subjkr {
            font-family: "Song Myung", serif;
            font-size: 1.5em;
            display: inline-block;
            word-wrap: break-word;
            text-align: left;
            margin: 0 auto;
        }

        /*Layer 4: social*/
        .social-style {
            font-family: "Jacquard 24 Charted", system-ui;
            font-size: 2.5em;
            color: #ff8bc6;
            letter-spacing: 0px;
            margin: 0px auto;
            display: inline-block;
        }

        /*right*/
        /*To do*/
        .ToDo-title {
            font-family: "Jacquard 12", system-ui;
            font-size: 2em;
            color: white;
            letter-spacing: 0px;
            margin: 1px;
            text-align: center;
        }

        ul.emptysquare {
            list-style-type: "\2610 ";
            text-align: left;
        }

        .todo-text {
            font-family: "Jacquard 12", system-ui;
            font-size: 1.5em;
            color: pink;
            display: inline-block;
            word-wrap: break-word;
            text-align: left;
        }

        .todo-textkr {
            font-family: "Song Myung", serif;
            font-size: 0.8em;
            color: pink;
            display: inline-block;
            word-wrap: break-word;
            text-align: left;
        }

        /*Navigation*/

        .navi {
            font-family: "Imperial Script", cursive;
            font-size: 1.5em;
            color: white;
            letter-spacing: 0px;
            margin: 0px;
        }

        button {
            box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
            filter: drop-shadow(0px 0px 1px #424242);
            -webkit-filter: drop-shadow(0px 0px 1px #424242);
            background: pink;
            color: black;
            width: calc(100% - 20px);
            height: fit-content;
            max-height: 100px;
            overflow-y: auto;
            border-radius: 10px;
            padding: 8px 10px 10px 10px;
            box-sizing: border box;
            margin: 0 auto;
            font-family: "Jacquard 12", system-ui;
            font-size: 1.2em;
            color: white;
        }
        
        * {
            cursor: url(https://cur.cursors-4u.net/special/spe-3/spe300.ani), url(https://cur.cursors-4u.net/special/spe-3/spe300.png), auto !important;
        }