/* hardcode home button
*/

@import "allcolors.css";
/* @import /_assets/font-awesome/css/fontawesome.css
    <link href="/_assets/font-awesome/css/fontawesome.css" rel="stylesheet" />
    <link href="/_assets/font-awesome/css/solid.css" rel="stylesheet" /> */

:root{
  --text: var(--textd);
  --bg: var(--pink4d);
  --shelf: url(../_assets/bookshelf_dark.png);
  --switch: url(../_assets/lightswitch_dark.jpg);
  --light_icon: "\f185"; 
  --window: url(../_assets/window_dark.png);
  --about: url(../_assets/about_book_dark_test.png);
  /*--carpet: url(../_assets/DARKMODEcarpet.jpg);*/
  --carpet: url(../_assets/carpet_dark.jpg);/* var(--red1d); */
 /* --border: url(../_assets/border1.png);
  --borderx: #564C4D;
  --border2: #232023; */
  --imgbg: var(--purple1d);
  --border: var(--purple3d);
  --lamp: url(../_assets/lamp_dark.png);
  --shadow: var(--pink5d);
 /* --poster1: url(../_assets/poster1also.png) */
--about_bg: var(--pink5d);
--link: var(--red1d);
--visitedlink: var(--pink4d);
--hoverlink: var(--red3d);
--activelink: var(--purple1d);
--scroll: var(--purple5d);
--cv: url(../_assets/cv_book_dark.jpg);
--map:url(../_assets/map_frame_dark.png);
--outlet: url(../_assets/cord_dark.png);
--laptop: url(../_assets/laptop_dark.png);
--shelfFront: var(--red2d);
--contact_bg: url(../_assets/contact_bg_dark.png);
--info_books: url(../_assets/info_test_2.png);
}

[data-theme="light"]{
  --text: var(--textl);
  --bg: var(--pink4l);
  --shelf: url(../_assets/bookshelf_light.png);
  --switch: url(../_assets/lightswitch_light.jpg);
  --light_icon: "\f186"; 
  --window: url(../_assets/window_light.png);
  --about: url(../_assets/about_book_light.png);
  /*--carpet: url(../_assets/LIGHTMODEcarpet.jpg);*/
    /*--carpet: var(--red1l); */
    --carpet: url(../_assets/carpet_light.jpg);
 /* --border: url(../_assets/border1.png);
  --border2: #232023; */
   --imgbg: var(--purple1l);
  --border: var(--purple3l);
    --lamp: url(../_assets/lamp_light.png);
  --shadow: var(--pink5l);
  --about_bg: var(--pink5l);

  /*--poster1: url(../_assets/poster1.png) */
--link: var(--red1l);
--visitedlink: var(--purple4l);
--hoverlink: var(--red3l);
--activelink: var(--purple1l);
--scroll: var(--purple5l);
--cv: url(../_assets/cv_book_light.jpg);
--map:url(../_assets/map_frame_light.png);
--outlet: url(../_assets/cord_light.png);
--laptop: url(../_assets/laptop_light.png);
--shelfFront: var(--red2l);
--contact_bg: url(../_assets/contact_bg_light_test.png);


}
/* end of variables happening*/


#poster1 {
  background-image: var(--poster1);
  background-size: contain;
  position: absolute;
  width: 12vw;
  height: 8vw;
  left: 75vw;
  bottom: 27vw;
 /* box-shadow: 0px 4px 4px rgba(0,0,0,0.3); */
}

#site_info {
  background-image: var(--info_books);
  background-size: contain;
  position: absolute;
  width: 6.27vw;
  height: 5vw;
  left: 20vw;
  bottom: 8.9vw;
}

#map{
  background-image: var(--map);
  background-size: contain;
  position: absolute;
  left: 31vw;
  top: 7vw;
  width: 16.2vw;
  height: 12.3vw;
  box-shadow: 0px 4px 8px var(--shadow);
}


[data-theme="light"] #map{
   box-shadow: 1px -1px 8px var(--shadow);
}

#laptop{
  background-image: var(--laptop);
  background-size: contain;
  position: absolute;
  width: 12vw;
  height: 8vw;
  left: 21vw;
  bottom: 30.6vw;
  z-index: 30;
}

#lamp{
  background-image: var(--lamp);
  background-size: contain;
  position: absolute;
  width: 12vw;
  height: 15vw;
  left: 0vw;
  bottom: 7vw;
}


#window{
  background-image: var(--window);
  background-size: contain;
  position: absolute;
  width: 25vw;
  height: 12vw;
  left: 55vw;
  bottom: 35vw;

}

  #border {
  /*background-image: var(--border);
  background-size: cover; */
  background-color: var(--border);
  position: absolute;
 /* box-shadow: 0px 4px 4px rgba(0,0,0,0.6); */
  bottom: 10.1vw;
  left: 0vw;
  width: 100vw;
  height: 2vw;
  z-index: -1;
}


#shelf {
  background-image: var(--shelf);
  background-size: contain;
  position: absolute;
 /* box-shadow: -100px 20px 4px rgba(0,0,0,0.4), -100px 200px 4px rgba(0,0,0,0.4); */
	bottom: 8vw; 
  left: 17vw;
  width: 30.6vw;
  height: 23.5vw;
  z-index: 3;
}

div::after{
  content: "";
  position: absolute;
  transform: skewX(300deg);
  left: 27%;
  height: 20%;
  width:38%;
  /*box-shadow: 0px 25px 9px 0 rgba(0,0,0, .8), -90px 15px 4px 0 rgba(0,0,0, .8); */
}

#about_book {
  background-image: var(--about);
  background-size: contain;
  width: 1.442vw;
  height: 6.5vw; 
  bottom: 15.94vw; 
  left: 2vw;
  z-index: 100;
}

#cv_book {
    background-image: var(--cv);
  background-size: contain;
  width: 0.864vw;
  height: 5.7vw; 
  bottom: 16.05vw; 
  left: 3.5vw;
  z-index: 100;
}

#light-toggle {
  background-image: var(--switch);
  background-size: contain;
  width: 3.2vw;
  height: 4.5vw;
  bottom: 35vw;
} 

#floor {
  background-image: var(--carpet);
  background-size: cover; 
  /*background-color: var(--carpet); */
  position: fixed;
  left: 0;
  /*top: 45vw; */
  bottom: 0vw;
  width: 100vw;
  height: 11vw;
  z-index: -3;
}

#outlet {
  background-image: var(--outlet);
  background-size: cover;
  position: fixed;
  left: -1vw;
  bottom: 10vw;
  width: 8vw;
  height: 8vw;
  z-index: 0;
}


#border2 {
  filter:blur(2px);
  background-color: var(--border2);
  position: fixed;
  left: 0;
  width: 100vw;
  height: 0.3vw;
  z-index: -1;
}

#shelf_shadow_v_d{
  width: 2.5vw;
  height: 23.7vw;
  left: 14.5vw;
  bottom: 7.5vw;
  transform: skewY(340deg);
}

#shelf_shadow_h_d{
  width: 32.6vw;
  height: 7vw;
  left: 10.8vw;
  bottom: 1vw;
  transform: skewX(310deg);
}

/*hidden when [data-theme="light"]*/
[data-theme="light"] #shelf_shadow_v_d,
[data-theme="light"] #shelf_shadow_h_d {
  display: none; 
}


[data-theme="light"] #lamp_shadowd {
  display: none; 
}


#shelf_shadow_v_l{
  width: 2.5vw;
  height: 23.82vw;
  left: 47.6vw;
  bottom: 8.6vw;
  transform: skewY(-25deg);
  z-index: 1;
}

#shelf_shadow_h_l{
  width: 32.1vw;
  height: 1.5vw;
  left: 17.5vw;
  bottom: 31.5vw;
  transform: skewX(150deg); 
  z-index: 1;
}

/*hidden when [data-theme="dark"]*/
[data-theme="dark"] #shelf_shadow_v_l,
[data-theme="dark"] #shelf_shadow_h_l {
  display: none; 
}

/*hidden when [data-theme="dark"]*/
[data-theme="dark"] #lightl{
  display: none; 
}

[data-theme="dark"] #lamp_shadowl{
  display: none; 
}


#profile_pic{
  position: fixed;
  width: 28vw;
  height: auto;
  top: 5vw;
  right: 8vw;
}

.shadow {
  background-color: var(--shadow);
  opacity: 0.9;
  position: fixed;
}

.elem{
  border-style: none;
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: absolute;
}

.elem img {
  width: 100%;
  height: auto;
}

/* from ribo.zone */ 
.elem span {
  opacity: 0;
  position: absolute;
  top: 140%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.3vw;
  color: #FFF;  /* probably set this to inherit from theme*/
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.elem:hover span, .elem:focus span{
  opacity: 1;
  z-index: 6;

}
a.elem:hover, a.elem:focus{
  /* add hover effects like transform or filter to your images here! */
  /*transform: rotate(3deg)  */ /* i don't love the rotate effect -- change? */
  filter: sepia(60%);
}


.dot {
  border-radius: 21%;
  display: inline-block;
  position: absolute;
}


.sticky {
  background-image: url(../_assets/sticky_note.png);
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block; 
  height: 13vw;
  width: 13vw;
}


a:link {
  color: var(--link);
  text-decoration: none;
}
a:visited {
  color: var(--visitedlink);
  text-decoration: none;
}
a:hover {
  color: var(--hoverlink);
  text-decoration: underline;
}
a:active {
  color: var(--activelink);
  text-decoration: underline;
}

.home {
  background-color: var(--imgbg);
  height: 2vw;
  width: 8vw;
  position: absolute;
  display: block;
  text-align: center;
  left: 3.5vw;
  border-radius: 0.5vw;


}  /* this should be a home button class */

.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.icon {
  color: var(--text);
  position: relative;  
}

.icon:hover {
  color: var(--hoverlink); 
}

.light_icon::before {
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  content: var(--light_icon);
}

.light_icon span {
  opacity: 0;
  position: absolute;
  top: 140%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.3vw;
  color: #FFF;  /* probably set this to inherit from theme*/
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.light_icon:hover span, .light_icon:focus span{
  opacity: 1;
  z-index: 6;

}

.linkedin::before { 
  font-family: "Font Awesome 7 Brands";
  font-weight: 400;
  font-style: normal;
  content:"\f08c" 

}

.github::before{
  font-family: "Font Awesome 7 Brands";
  font-weight: 400;
  font-style: normal;
  content: "\f09b"
}

.email::before{
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  content: "\f0e0"
}


i.icon light_icon:hover, i.icon light_icon:focus{
  /* add hover effects like transform or filter to your images here! */
  /*transform: rotate(3deg)  */ /* i don't love the rotate effect -- change? */
  filter: sepia(60%);
}

* {
    image-rendering: pixelated;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-color: var(--scroll) gainsboro;
    overscroll-behavior: none;
}

header {
  width: fit-content;
  padding: 10px;
  margin: 10px auto -7px auto;
  text-wrap: balance;
  position: absolute;
  z-index: 100;
  display: block;
  top: 4vw;
  left: 17vw;
}

h1 {
  position: relative;
  margin:0;
  text-align: left;
  font-size: 3vw;
  font-weight: 400;
}

main {
display: block;
unicode-bidi: isolate;
}

body {
  padding: 2vw;
  color: var(--text);
  font-size: 1.5vw;
  font-family: "Jersey 20", sans-serif;
  font-weight: 550;
  font-style: normal;
  background-color: var(--bg);
}

div {
  display: block;
  unicode-bidi: isolate;
}



/* --------------*/