:root {
  /* bg img -----*/
  --headerImg: url("../img/pfp/kurapfp-swap-mist-alpha-2-redeye.png");
  --bgImg: url("../img/bg/crow-rabbit-mistgb-none.png");
  --bgImg2: url("../img/bg/purplesky.gif");
  --mark-s: 1px 0px 2px var(--color-red2);
  --mark-c: #ff9999;
}

@font-face {
  font-family: "Chococooky";
  src: url("../font/Chococooky.ttf");
}

@font-face {
  font-family: "PottaOne";
  src: url("../font/PottaOne-Regular.ttf");
}

@font-face {
  font-family: "PrincessSofia";
  src: url("../font/PrincessSofia-Regular.ttf");
}

/* init -----*/
* {margin: 0; padding: 0;}
* {box-sizing: border-box;}
li {list-style: none;}

/* font -----*/
.font-1, body, #themeSelect, button {font-family: "Chococooky";}
/* .font-1, body, #themeSelect, button {font-family: "PottaOne";} */
.font-2, p.name, .menu h1, .signature {font-family: "PrincessSofia";}
.font-3, mark {font-family: "PottaOne";}
.italic, .signature {font-style: italic;}
.bold, p.name {font-weight: bold;}
p.name, .menu h1, .settings button {text-shadow: 2px 2px 10px var(--col-4);}
/* a {text-decoration: none;} */
#mood a, #links a {text-decoration: none;}

/* header img -----*/
.header {background: var(--headerImg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  /* background-size: 65vw; */
  background-position-x: 50%;
  background-position-y: 46%;
}

/* bg img -----*/
.body {
  background-image: var(--bgImg);
  background-size: 100%;
  background-attachment: fixed;
}

.bgImg-div {
  /* display: none; */
  background-image: var(--bgImg);
  background-size: contain;
  /* background-size: 100%; */
  background-repeat: no-repeat;
  padding-bottom: 10px;
  /* justify-self: center; */
  /* width: 100%; */
  /* width: 100%; */
  /* min-width: 250px; */
  min-height: 130px;
  /* height: 130px; */
  /* width: fit-content; */
  /* height: fit-content; */
}

.bgImg-img {
  width: 100%;
  padding-inline: 5px;
  /* width: auto; */
  /* height: 5rem; */
}

/* scroll -----*/
/* .bg-img {
  width: 100%; height: 100%;
  background-image: var(--bgImg);
  background-size: 100%;
  background-attachment: fixed; */

  /* display: flex;
  overflow: hidden;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
} */

/* body {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
} */

/* @keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
} */

/* pfp img -----*/
.pfp-img {background-image: var(--headerImg); background-size: cover;}

/* bg col -----*/
.heading, hr {background-color: var(--col-1);}
body, .divider {background-color: var(--col-2);}
.header, .left, .right {background-color: var(--col-3);}
.nav, .bottom, .box {background-color: var(--col-4);}

button, select, .heading {background-color: var(--col-1a);}
.divider {background-color: var(--col-2b);}
.header, .left, .right, .main, .option-theme:hover {background-color: var(--col-3a);}
.nav, .bottom, .inner {background-color: var(--col-4a);}
.box, .header, .pfp-img {background-color: var(--col-4b);}

/* txt col -----*/
.col-1 {color: var(--col-1);}
.col-2, h1, h2, h3, p, a, li, ul, #themeSelect, option, button, mark {color: var(--col-2);}
.col-3 {color: var(--col-3);}
.col-4 {color: var(--col-4);}

/* mark {text-shadow: 1px 0px 2px var(--mark-c)} */
/* mark, .mark-c {color: var(--mark-c);} */
mark {background-color: transparent;}

.nav a {color: var(--col-2a);}
a.active {color: var(--col-1);}

/* size -----*/
.container {width: 100vw; height: 100vh;}
.container {max-width: 1080px;}

.header {width: 100%; height: 50px;}
.nav {height: 35px;}
.main {height: 100%;}

#themeSelect {width: fit-content}
.top, .bottom {height: fit-content;}

.left, .menu {width: 40%;}
.right {width: 60%;}
.menu {max-width: 432px;}
.left, .right {min-height: 200px;}
.menu {max-height: 70vh;}
/* .menu {height: 70vh;} */

.box {height: fit-content;}

.divider {height: 10px;}
.pfp-img {min-width: 150px; min-height: 150px;}
.status {width: 100%;}
/* .pfp .heading {height: fit-content;} */
/* .pfp .heading {min-height: 1rem;} */
/* .pfp .heading {display: flex;} */

/* txt size -----*/
/* chococooky ----- */
p, a, li, ul, h3, h4, h5, h6, #themeSelect, button {font-size: 1rem;}
h1, h2 {font-size: 1rem;}
/* a.active {font-size: 1.25rem;} */
p.name {font-size: 2rem;}
.menu h1 {font-size: 2rem;}
.sitemap a, .signature {font-size: 1.5rem;}
mark {font-size: 0.5rem;}

/* princess sofia ----- */
/* .heading,
#themeSelect,
.settings button { */
  /* font-family: "PrincessSofia"; */
  /* font-weight: bold; */
  /* font-size: 1.2rem; */
  /* padding-block: 0px; */
  /* padding-inline: 5px; */
/* } */

/* potta one ----- */
/* p, a, li, ul, h3, h4, h5, h6, #themeSelect, button {font-size: 0.5rem;} */
/* h1, h2 {font-size: 0.5rem;} */
/* .sitemap a {font-size: 1rem;} */

/* hr -----*/
hr {width: 97%;}
hr {height: 1px;}
hr {justify-self: center;}
hr {border-style: none;}
hr {border-color: var(--col-1);}

/* overflow -----*/
.left, .right {overflow-y: scroll;}
.left, .right, .menu {overflow-x: hidden;}
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-thumb {border-radius: 1px;}
::-webkit-scrollbar-track {background: linear-gradient(var(--col-2), var(--col-4));}
::-webkit-scrollbar-thumb {background: var(--col-1);}

/* sticky -----*/
.container {overflow: hidden;}
.main {overflow: hidden;}



/* flex -----*/
.flex, .container, .main, .nav, .footer-links, .pfp-status, .list {display: flex;}
.container, .left, .right, .list {flex-direction: column;}
.top, .nav, .main, .bottom, .pfp-status {flex-direction: row;}
.footer-links {flex-wrap: wrap;}
.right {flex-grow: 1;}
/* .pfp {display: grid;} */
/* .pfp {grid-template-columns: auto auto;} */

/* justify -----*/
/* .nav {justify-content: left;} */
/* .nav {justify-content: center;} */
/* .nav {justify-content: flex-start;} */
.bottom {justify-items: center;}
.container {justify-self: center;}

/* align -----*/
/* .nav {align-items: end;} */
.nav {align-items: center;}

/* margin -----*/
/* .main {margin-inline: 70px;} */
/* .nav li::after, */
.footer-links li::after {margin: 10px;}
/* .nav li:after, */
.footer-links li::after {content: "|";}
/* .nav li:last-child:after, .footer-links li:last-child:after {content: "";} */
.inner, hr {margin: 5px;}
/* .box {margin-bottom: 1rem;} */
/* .pfp {margin-inline: 10px;} */

/* padding -----*/
/* .container {padding-inline: 70px;} */
.nav {padding: 5px;}
.left {padding-right: 5px;}
.right {padding-left: 5px;}
.heading, .inner {padding: 5px;}
.pb {padding-bottom: 1rem;}
/* .bottom {padding: 2px;} */
p.name {padding-inline: 10px; padding-block: 5px;}
.mood {margin-top: 10px;}
button {padding: 2px;}

/* border -----*/
/* .left, .right {border: solid 2px var(--col-1);} */
.inner, #themeSelect,.pfp-img, button {border: solid 1px var(--col-1);}
.inner, #themeSelect, button {border-radius: 5px;}

/* spacehey fren com -----*/
.fren-list img, .fren-com img {width: 100px; height: 100px;}
.fren-com li {width: 100%;}
.com-l {width: 35%;}
.com-r {width: 65%;}

.fren-com li {display: flex;}
.fren-list, .com-l  {display: grid;}
.fren-list {grid-template-columns: repeat(5, 1fr);}
.com-l {grid-template-columns: auto;}

.com-l {justify-items: center;}
.fren-list p {justify-self: center;}

.fren-com {margin: 5px;}
.fren-list li, .fren-com li, .com-l, .com-r {padding: 5px;}

.fren-list img, .fren-com img, .com-l, .com-r {border: solid 1px var(--col-1);}
.fren-com li {border-radius: 5px;}

/* menu -----*/
.margin-left-auto {margin-left: auto;}

.menu, .sitemap, .settings {display: flex;}
.menu, .sitemap {flex-direction: column;}
/* .settings {flex-direction: row;} */
.menu {position: fixed;}
/* .settings {justify-self: right;} */
/* .settings {justify-content: space-evenly;} */
/* .settings button {flex-grow: 1;} */


.menu {background-color: var(--col-4a);}
.sitemap a, #links p a {border-bottom: 2px solid var(--col-2a);}
#links li {border-bottom: 2px solid transparent;}
#links li {border-bottom: 2px solid var(--col-2);}
.sitemap a, #links p a {text-decoration: none;}
.settings button {margin: 5px;}
.menu h1, .menu a {padding-block: 5px;}
.menu h1, .menu a {padding-inline: 15px;}
.sitemap, .menu {text-align: right;}

/* links */
#links p {
  display: flex;
  flex-direction: column;
}

/* #links details li {list-style: circle;} */

#links details,
#links details li,
#links p a {
  padding: 5px;
}

/* moodvid ----- */
/* .mood .inner:nth-child(1) {} */
.mood-vid {
  display: block;
  visibility: hidden;
  height: 0px;
  transition:  height 1s;
}

/* imgs ----- */
.img-screen {
  float: right;
  /* padding T R B L */
  padding: 0px 5px 10px 10px;
  width: 25%;
}

.img-screen-mobile {
  /* padding T R B L */
  padding: 10px 5px 0px 5px;
  /* width: 50%; */
  width: 100%;
  display: none;
}

.zoom-img {
  transform: scale(100%);
  transition: transform 100ms;
}

.buttons {
  justify-content: space-between;
  flex-wrap: wrap;
  
}

.img-button, .img-neo {
  width: 88px;
  height: auto;
  flex-grow: 1;
  padding: 5px;
}

/* hover for desktop -----*/
@media only screen and (min-width: 751px) {
  /* hover ----- */
  #mood:hover, a:hover, .nav a:hover, .sitemap a:hover, #links li:hover, summary:hover {color: var(--col-1);}
  /* .menu a {background-color: var(--col-4a);} */
  .sitemap a:hover, #mood:hover, #links p a:hover {text-decoration: underline;}
  #links li:hover {border-bottom: 2px solid var(--col-1);}
  a.active:hover {color: var(--col-2);}
  #themeSelect:hover, button:hover {box-shadow: 1px 1px 5px 2px var(--col-2a);}

  .zoom-img:hover {
    transform: scale(105%);
    transition: transform 200ms;
  }

  .zoom-img-2:hover {
    transform: scale(101%);
    transition: transform 200ms;
  }

  /* cursor -----*/
  #mood, #themeSelect, button {cursor: pointer;}
}

/* for mobile -----*/

@media only screen and (max-width: 750px) {
  /* .header {background-size: 50vw;} */
  /* .left {width: fit-content;} */
  
  .left, .menu {width: 165px;}
  .left, .menu {min-width: 165px;}
  .right {width: fit-content;}
  p.name {text-align: center;}
  .pfp-status {flex-direction: column;}
  /* .status, .mood {max-width: 150px;} */

  /* make left right scroll together, good for mobile */
  /* .left {height: 100%;} */
  .left {height: fit-content;}
  .left {overflow-y: hidden;}
  .right {height: fit-content;}
  .right {overflow-y: hidden;}
  .main {overflow: auto;}

  /* imgs */
  .img-screen {
    display: none;
  }

  .img-screen-mobile {
    display: block;

  }

  .bgImg-div {
    min-height: 50px;
  }

  .buttons {
    width: 100%;
    padding: 5px;
  }

  /* for later - read mode ----- */
  /* .left {
    display: none;
    position: absolute;
    border: solid var(--col-2);
    width: 60%;
    background-color: var(--col-3a)!important;
  }
  .pfp-status {flex-direction: row;}
  p.name {text-align: center;} */
  
}