/* font */
p {
    font: 14px Pixelify Sans;
}
a {
    font: 14px Pixelify Sans;
}
li {
    font: 14px Pixelify Sans;
}
h3 {
    color: rgb(0, 0, 0);
    font-size: 25px;
    font-family: "Jacquard 12";
}
h4 {
    color: rgb(0, 0, 0);
    font-size: 23px;
    font-family: "Jacquard 12";
}
a:link {
    color: rgb(100, 100, 105);
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: grey;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: black;
    background-color: transparent;
    text-decoration: underline;
    font-family: "Italianno";
    font-size: 22px;
} 
a:active {
    color: #f57ac8;
    background-color: transparent;
    text-decoration: underline;
}


/* falling items*/
@-webkit-keyframes snowflakes-fall {
    0% {
        top: -10%
    }
    100% {
        top: 100%
    }
}

@-webkit-keyframes snowflakes-shake {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    50% {
        -webkit-transform: translateX(80px);
        transform: translateX(80px)
    }
}

@keyframes snowflakes-fall {
    0% {
        top: -10%
    }
    100% {
        top: 100%
    }
}

@keyframes snowflakes-shake {
    0%,
    100% {
        transform: translateX(0)
    }
    50% {
        transform: translateX(80px)
    }
}

.snowflake {
    position: fixed;
    top: -10%;
    z-index: 9999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-animation-name: snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration: 10s, 3s;
    -webkit-animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: running, running;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running
}

.snowflake:nth-of-type(0) {
    left: 1%;
    -webkit-animation-delay: 0s, 0s;
    animation-delay: 0s, 0s
}

.snowflake:nth-of-type(1) {
    left: 10%;
    -webkit-animation-delay: 1s, 1s;
    animation-delay: 1s, 1s
}

.snowflake:nth-of-type(2) {
    left: 20%;
    -webkit-animation-delay: 6s, .5s;
    animation-delay: 6s, .5s
}

.snowflake:nth-of-type(3) {
    left: 30%;
    -webkit-animation-delay: 4s, 2s;
    animation-delay: 4s, 2s
}

.snowflake:nth-of-type(4) {
    left: 40%;
    -webkit-animation-delay: 2s, 2s;
    animation-delay: 2s, 2s
}

.snowflake:nth-of-type(5) {
    left: 50%;
    -webkit-animation-delay: 8s, 3s;
    animation-delay: 8s, 3s
}

.snowflake:nth-of-type(6) {
    left: 60%;
    -webkit-animation-delay: 6s, 2s;
    animation-delay: 6s, 2s
}

.snowflake:nth-of-type(7) {
    left: 70%;
    -webkit-animation-delay: 2.5s, 1s;
    animation-delay: 2.5s, 1s
}

.snowflake:nth-of-type(8) {
    left: 80%;
    -webkit-animation-delay: 1s, 0s;
    animation-delay: 1s, 0s
}

.snowflake:nth-of-type(9) {
    left: 90%;
    -webkit-animation-delay: 3s, 1.5s;
    animation-delay: 3s, 1.5s
}

.snowflake:nth-of-type(10) {
    left: 25%;
    -webkit-animation-delay: 2s, 0s;
    animation-delay: 2s, 0s
}

.snowflake:nth-of-type(11) {
    left: 65%;
    -webkit-animation-delay: 4s, 2.5s;
    animation-delay: 4s, 2.5s
}
/* falling end*/



:root {
    --black: rgb(26, 26, 26);
    --brown: #887a80;
    --pink: #f6e6ed;
}
body {
    background-color: var(--black);
    background-image: url(https://i.postimg.cc/44WfDpCn/background-Tile.webp);
    background-repeat: repeat;
}
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(87, 72, 80, 0.48) 50%, rgb(0 0 0 / 0%) 50%);
    /*background: linear-gradient(rgba(103, 93, 103, 0.48) 50%, rgba(0, 0, 0, 0) 50%);*/
    z-index: 9998;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}
#app {
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 100;
    margin: auto 0;

}
#frame1 {
    top: 0;
    left: 0;
    right: 0;
}
#frame2 {
    bottom: 0;
    left: 0;
    right: 0;
    transform: scale(-1, -1);
}
#frame1, #frame2 {
    background-image: url(https://i.postimg.cc/zX3z8357/lace.webp);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center;
    height: 50px;
    position: absolute;
    z-index: 120;
}
#photo {
    position: absolute;
    margin-top: -250px;
    margin-left: 150px;
    transform: rotate(-10deg);
    z-index: 10;
}
#photo:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.container {
    border-color:var(--black);
    border-width: 3.5px;
    border-style: solid;
    border-radius: 12px;
    height: 650px;
    width: 50%;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 1px 20px 70px 40px var(--black);
    overflow: hidden;
}
.main {
    display: flex;
    flex-direction: row;
    height: 60%;
}

.header {
    background-color: white;
    height: 25%;
    border-bottom-color: var(--black);
    border-bottom-width: 3px;
    border-bottom-style: dashed;
}
.footer {
    height: 15%;
    width: 100%;
    background-color: black;
    border-top-color: white;
    border-top-width: 1px;
    border-top-style: dashed;
    text-align: center;
}
#footerText {
    margin-top: 5px;
    color: white;
    font-family: Pixelify Sans;
    font-size: 14px;
}
#headerTitle {
    font-size: 50px;
    padding: none;
    text-align: center;
    margin-top: 0;
}
#louPic {
    margin-top: 14px;
    margin-bottom: -22px;
}
#topHeaderImg {
    background-image: url(https://i.postimg.cc/yYWZtVG4/header-Lace.webp);
    background-position: center top;
    background-repeat: repeat-x;
    background-size: contain;
    background-position: center;
    height: 70px;
}

.inter {
    height: 30px;
    background-image: url(https://i.postimg.cc/MGWdW79H/interBG.webp);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
    background-color: black;
}
.interBottom {
    background-image: url(https://i.postimg.cc/MGWdW79H/interBG.webp);
    transform: rotate(180deg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
    background-color: black;
    height: 30px;
}



/* LEFT */



.left {
    width: 60%;
    background-color: black;
}
.leftP {
    background-color: white;
    background-image: url(https://i.postimg.cc/X7hC0RMZ/bioBG.webp);
    background-repeat: repeat-x;
    background-size: contain;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 12px;
    border-style: dashed;
    border-color: var(--black);
    height: 350px;
    display: flex;
}
#wobble {
    color: rgb(0, 0, 0);
    font-size: 25px;
    font-family: "Jacquard 12";
}
.bio {
    text-align: center;
    width: 60%;
    height: 200px;
    overflow: auto;
    margin-left: auto;
    margin-right: 20px;
    margin-top: 65px;
    z-index: 2;
}
#welcomeS {
    margin-bottom: -5px;
}
#drawing {
    align-self: flex-end;
    position: absolute;
    z-index: 1;
    margin-left: -10px;
    margin-bottom: 15px;
}
.divider1, .divider2 {
    width: 31%;
    height: 80px;
    z-index: 5;
    position: absolute;
    background-image: url(https://i.postimg.cc/MpQjZ9x9/bioLace.webp);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
}
.divider2 {
    transform: scaleY(-1);
    align-self: flex-end;
}


/* MIDDLE */


.middle {
    width: 20%;
    background-image: url(https://i.postimg.cc/0Qh42664/pinkTile.webp);
    border-left-color: black;
    border-left-style: dashed;
    border-right-color: var(--brown);
    border-right-style: dashed;
    z-index: 6;
}
#navTitle {
    margin-left: 15px;
}
#linkS {
    list-style-type: none; 
    width: 100%;
    margin-left: -23px;
}
#linkSS {
    list-style-type: inherit;
    margin-left: -40px;
}


/* RIGHT */


.right {
    width: 19.63%;
    background-image: url(https://i.postimg.cc/yYqkCbJV/black-White-Tiles.webp);
    overflow: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
}

.right::-webkit-scrollbar {
  display: none;
}
.updates, .pet, .notes, .socials {
    border-radius: 12px;
    border-color: var(--brown);
    border-style: dashed;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    overflow: auto;
    background-image: radial-gradient(white, white, var(--pink), rgb(241, 198, 221));
}
.updates {
    background-color: var(--pink);
    height: 150px;
}
.updateText {
    margin-left: 15px;
}
#updatesTitle {
    margin-bottom: -5px;
    color: rgb(0, 0, 0);
    font-size: 25px;
    font-family: "Jacquard 12";
}
.updatesText {
    margin-top: -7px;
}
.pet {
    background-color: var(--pink);
    height: 150px;
    text-align: center;
}
#tPet {
    margin-top: 10px;
}
.socials {
    background-color: var(--pink);
    height: 150px;
}
#socialsTitle {
    margin-left: 5px;
    margin-bottom: -5px;
}
.notes {
    background-color: var(--pink); 
    height: 150px;
    margin-bottom: 20px;
}
#notesTitle {
    margin-left: 5px;
    margin-bottom: -5px;
}

#uTitle {
    margin-bottom: -10px;
    margin-top: -5px;
}
#sFooterText {
    margin-top: 2px;
}
/* mobile */

/*@media only screen and (max-width: 600px) {
    .container {
        width: 95%;
        margin-left: 10px;
        margin-right: 10px;
    }
}*/