/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */
:root {
        --blog-width: 71.5vw;
        --blog-height: fit-content;
        --left-sidebar-size: 400px;
        --left-sidebar-top-distance: 5vh; /* think of it like percentge from top */
        --content-gap: 10px;
        
        --banner-height: 200px;
        --banner-width: 1200px;
        --margins: 30px 350px 10px 350px;
        
        --body-font: "cupid de locke";
        --font-color: #ecdddd;

        --focus-color: #e81f1f;

        --header-font: "starshine";
        --header-color: #dd5e85;
        --h1-deco: url(https://files.catbox.moe/w8vuu4.webp);
        --h2-deco: url(https://files.catbox.moe/dcuirc.webp);

        --bold: #f53e84;
        --italics: #f5a6d0;
        --blockquote: #101010;
        --accent: #9b2053;
        --font-on-accent: #ffffff;

        --quote-color: #400000;

        --background: #141515;
        --background-image: url(https://file.garden/ada5K90piBQ5xaQK/purple%20lace.jpg);

        --links: #f77abd;
        --links-hover: #ffffff;

        --borders: #d8618e;
        --body-bg: #1a1818;
        --body-shadows: rgba(242, 125, 183, 0.41);

        --nav-bg-hover: #620d1d;
        --nav-text-hover: #ffffff;

        --footer-text: #ffffff;
        --footer-link: #ea7878;
        
        --marquee-duration: 30s;
        
        --L-pearphone-W: 635px;
        --L-pearphone-H: 399px;
        --L-profile-W: 110px;
        --L-profile-H: 114px;
        
        --pearphone-W: 426px;
        --pearphone-H: 266px;
        --profile-H: calc(var(--pearphone-H)/3);
        --profile-W: calc(var(--pearphone-W)/4);
}

* {
  cursor: url('https://cdn.cursors-4u.net/previews/cute-polka-dotted-purple-bow-tie-ribbon-ea8a9deb-32.webp') 32 32, auto !important;
}

@font-face { 
    font-family: cupid de locke; 
    font-display: swap;
    src: url(https://file.garden/ada5K90piBQ5xaQK/CupidDeLocke-RqeW.ttf);
}

@font-face {
    font-family: "starshine";
    font-display: swap;
    src: url(https://file.garden/ada5K90piBQ5xaQK/Starshines.ttf);
}

/* basics */

body {
    font-family: cupid de locke;
    background-color: #1a1818;
    background-image: url(https://file.garden/ada5K90piBQ5xaQK/purple%20lace.jpg);
    background-attachment: fixed;
    color: var(--font-color);
    font-size: 1em;
    justify-content: center;
}

h1 {
  font-family: cupid de locke;
  background-color: #330D73;
  background-image: url(https://file.garden/ada5K90piBQ5xaQK/purple%20background.jpg);
  background-attachment: fixed;
  border: 3px solid #AE9CDB;
  color: #AE9CDB;
  font-size: 17px;
  text-align: center;
  margin: 0;
  padding: 5px;
  z-index: 2;
}

.underhead {
  overflow: scroll !important;
  max-height: inherit;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  
  &::-webkit-scrollbar {
    display: none;
  }
}

#home {
  border: 30px solid transparent;
  border-image: url(https://file.garden/ada5K90piBQ5xaQK/stained%20glass%20resize%201.png) 150 round;
  margin-top: 30px;
  margin-bottom: 10px;
  margin-right: calc((100%/3)/2);
  margin-left: calc((100%/3)/2);
}

center-container { 
  display: flex;
  flex-direction: column;
  background: #1F1138;
  padding: 10px;
  }

main-content {
  height: fit-content;
  width: 100%;
}

row-one {
 display: flex;
 flex-direction: row;
}

row-two {
 display: flex;
 flex-direction: row;
}

row-three {
 display: flex;
 flex-direction: row;
}

border-img {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 30px;
  overflow: hidden;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* basics end */

.banner {
  display: flex;
  flex-direction: row;
  max-height: 180px;
  margin: 10px;
}

.banner img {
  max-height: 180px;
  margin: auto;
}

.banner title-img img {
 width: 550px; 
}

.nav-box {
  width: 350px;
  height: 450px;
  max-height: 450px;
  overflow: hidden;
  background-image: url(https://file.garden/ada5K90piBQ5xaQK/swirly%20background.jpg);
  padding: 10px;
  border: 15px solid transparent;
  border-image: url(https://file.garden/ada5K90piBQ5xaQK/large%20purple%20swirl.jpg) 200 round;
}

.nav-box ul {
  list-style-type: none;
  margin: auto;
  padding: 15px;
}

.nav-box li a {
  font-size: 17px;
  color: #fff;
  background-color: #37265E;
  display: block;
  text-align: center;
  padding: 5px;
  margin: 10px;
  border-radius: 5px;
  border: 3px solid #473178;
  text-decoration: none;
  
  &:hover {
    color: #F6D6FF;
    background-color: #5B3E9C;
  }
}

.intro-box {
  height: 400px;
  width: 778px;
  background-image: url(https://file.garden/ada5K90piBQ5xaQK/swirly%20background.jpg);
  border: 15px solid transparent;
  border-image: url(https://file.garden/ada5K90piBQ5xaQK/large%20purple%20swirl.jpg) 200 round;
  padding: 10px;
  margin: 0 0 0 15px;
  display: flex;
  flex-direction: row;
  z-index: 0;
}

.welcome-msg {
  position: relative;
  z-index: 1;
  font-size: 15.5px;
  line-height: 2;
  max-width: 500px;
  max-height: 300px;
  overflow: scroll;
  background-color: #37265E;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  border: 3px solid #473178;
  order: 2;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  
  &::-webkit-scrollbar {
    display: none;
  }
}

.welcome-doll {
  max-width: 210px;
  position: relative;
  z-index: 2;
  order: 1;
}

.welcome-doll img {
    height: 390px;
}

/* pear phone */
.pearphone {
  display: flex;
  flex-direction: row;
  position: relative;
  background-image: url(https://file.garden/ada5K90piBQ5xaQK/pearphone.png);
  width: var(--pearphone-W);
  height: var(--pearphone-H);
  margin: 10px;
}


blog-text { 
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 55px;
  left: 140px;
  border: 3px solid #21B4D9;
  border-radius: 10px;
  color: #730021;
}

.blog-msg {
  height: calc(var(--pearphone-H)/2.21);
  width: calc(var(--pearphone-W)/2.11);
  background-image: linear-gradient(180deg, #e3eef4 0%, #bfe5f0 50%, #abe4f7 100%);
  overflow: scroll;
  font-size: 14px;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; 
  webkit-line-clamp: 4;
  webkit-box-orient: vertical;
  
  &::-webkit-scrollbar {
    display: none;
  }
}

.blog-msg p {
 padding: 5px; 
}

.feeling-bar {
  width: calc(var(--pearphone-W)/2.11);
  height: calc(var(--pearphone-H)/12.09);
  background-color: #bfe5f0;
}

.feeling-bar p {
 margin: auto;
 padding: 5px;
}

profile {
  position: absolute;
  background-color: #FF1E94;
  top: 70px;
  left: 30px;
  border: 5px solid #FF1E94;
  border-radius: 10px;
  width: var(--profile-W);
  height: var(--profile-H);
  max-width: 120px;
  max-height: 125px;
  margin-right: 5px;
}

profile img {
  width: calc(var(--profile-W) - 15px);
  height: calc(var(--profile-H) - 15px);
  padding: 5px;
  max-width: 100px; 
  max-height: 100px;
}


.update-bar {
  max-width: 100px;
  max-height: 20px;
  position: absolute;
  color: #F5D327;
  padding: 2px;
}

/* pearphone end */

.socials {
  width: calc(100%/6.3);
  height: 350px;
  max-height: 350px;
  overflow: hidden;
  margin: 10px;
  background-image: url(https://file.garden/ada5K90piBQ5xaQK/swirly%20background.jpg);
  border: 10px solid transparent;
  border-image: url(https://file.garden/ada5K90piBQ5xaQK/large%20purple%20swirl.jpg) 200 round;
}

.socials ul {
  list-style-type: none;
  margin: auto;
  padding: 5px;
  z-index: 1;
}

.socials li a {
  font-size: 17px;
  color: #fff;
  display: block;
  text-align: center;
  padding: 5px;
  margin: 10px;
  border-radius: 5px;
  text-decoration: none;
  
  &:hover {
    transform: scale(1.2);
  }
}

.socials li a img {
  width: 115px;
  height: 20px;
}




/* responsiveness */

@media screen and (max-width: 1878px) {
 
 row-two {
 display: inline-grid;
 grid-template-columns: 1fr 1fr;
 margin-left: 50px;
 margin-right: 50px;
 
}
 
  gifypet {
    display: none;
  }
  
  /* pear phone */
.pearphone {
  display: flex;
  flex-direction: row;
  position: relative;
  background-image: url(https://file.garden/ada5K90piBQ5xaQK/2026_06_10_0k2_Kleki__1_-removebg-preview.png);
  width: var(--L-pearphone-W);
  height: var(--L-pearphone-H);
  margin: 10px;
}


blog-text { 
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 75px;
  left: 210px;
  border: 3px solid #21B4D9;
  border-radius: 10px;
  color: #730021;
}

.blog-msg {
  height: calc(var(--L-pearphone-H)/2.21);
  width: calc(var(--L-pearphone-W)/2.11);
  background-image: linear-gradient(180deg, #e3eef4 0%, #bfe5f0 50%, #abe4f7 100%);
  overflow: scroll;
  font-size: 14px;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; 
  webkit-line-clamp: 4;
  webkit-box-orient: vertical;
  
  &::-webkit-scrollbar {
    display: none;
  }
}

.blog-msg p {
 padding: 5px; 
}

.feeling-bar {
  width: calc(var(--L-pearphone-W)/2.11);
  height: calc(var(--L-pearphone-H)/12.09);
  background-color: #bfe5f0;
}

.feeling-bar p {
 margin: auto;
 padding: 5px;
}

profile {
  position: absolute;
  background-color: #FF1E94;
  top: 110px;
  left: 92px;
  border: 5px solid #FF1E94;
  border-radius: 10px;
  width: var(--L-profile-W);
  height: var(--L-profile-H);
  max-width: 120px;
  max-height: 125px;
  margin-right: 5px;
}

profile img {
  width: calc(var(--L-profile-W) - 15px);
  height: calc(var(--L-profile-H) - 15px);
  padding: 5px;
  max-width: 100px; 
  max-height: 100px;
}


.update-bar {
  max-width: 100px;
  max-height: 20px;
  position: absolute;
  color: #F5D327;
  padding: 2px;
}

/* pearphone end */

.socials {
  width: 203px;
  height: 350px;
  max-height: 350px;
  overflow: hidden;
  margin: 10px;
  background-image: url(https://file.garden/ada5K90piBQ5xaQK/swirly%20background.jpg);
  border: 10px solid transparent;
  border-image: url(https://file.garden/ada5K90piBQ5xaQK/large%20purple%20swirl.jpg) 200 round;
}

.socials ul {
  list-style-type: none;
  margin: auto;
  padding: 5px;
  z-index: 1;
}

.socials li a {
  font-size: 17px;
  color: #fff;
  display: block;
  text-align: center;
  padding: 5px;
  margin: 10px;
  border-radius: 5px;
  text-decoration: none;
  
  &:hover {
    transform: scale(1.2);
  }
}

.socials li a img {
  width: 115px;
  height: 20px;
}



}