/*-section-1-*/
:root, [data-theme="light"]{
  --bg:ghostwhite;
  --text:black;
  --text:#956161;
  --link:#ca51f3;
  --bg-accent:#f9e8f7;
  --text-accent:;
  --img-accent:honeydew;
  --img-border:blueviolet;
  --bgimg:url('https://cinni.net/img/site/polkadot-pinky.png');
  --theme:'☾';
  --filter:brightness(1) hue-rotate(10deg);
  --imood:url('https://moods.imood.com/display/uname-cinni/fg-a0522d/bg-ffefd5/imood.gif');
  --red:#ffeeeb;
  --orange:#fff0ea;
  --yellow:#f9f5df;
  --green:#f2ffe5;
  --blue:#e9fcff;
  --purple:#eae9ff;
  --indigo:#ffdcfb;
  --rainbow:#fff9f8;
  --header-img:url('https://cinni.net/fruitykitty/clip-1.png');
  --audiofilter:sepia(100%) hue-rotate(295deg) saturate(600%) contrast(60%) brightness(210%);
  
}
[data-theme="dark"]{
  --bg:#1e1e1e;
  --bg:#3f2f2b;
  --text:linen;
  --link:pink;
  --bg-accent:#3a3a3a;
  --bg-accent:black;
  --bg-accent:#251b1b;
  --text-accent:;
  --img-accent:#3a3a3a;
  --img-border:#86568a;
  --bgimg:url('https://cinni.net/img/site/pink-star-checker-inv.png');
  --theme:'🔆';
    --filter:brightness(1.8) hue-rotate(40deg);
  --imood:url('https://moods.imood.com/display/uname-cinni/fg-e8a0ae/bg-372c38/imood.gif');
  --red:#5d4141;
  --orange:#544230;
  --yellow:#4c4933;
  --green:#475244;
  --blue:#3c4a4e;
  --purple:#3e354c;
  --indigo:#664450;
  --rainbow:#3a3026;
  --header-img:url('https://cinni.net/fruitykitty/clip-2.png');
--audiofilter:sepia(100%) hue-rotate(295deg) saturate(600%) contrast(60%) brightness(210%);

}
::selection {
  color: white;
  background: grey;
}
*{
  box-sizing: border-box;
}
@font-face {
  font-family: "basiic";
  src: url(https://cinni.net/fonts/Basiic%20Sans%2012pt.ttf);
}
@font-face {
  font-family: "title";
  src: url(https://cinni.net/fonts/Basiic%20Style%20Sans.ttf);
}
@font-face{
  font-family:'unicode';
  src: url(https://cinni.net/fonts/unifont.ttf);
}

/*-section-2-*/
body{
  color:var(--text);
  background-color:var(--bg);
  background-image:var(--bgimg);
  font-family: "basiic", "unicode", "ＭＳ Ｐゴシック", verdana, sans-serif;
  max-width:900px;
  margin:0 auto;
  padding:10px;
  letter-spacing:1px;
}
container{
    display:flex;
}
a{
  color:var(--link);
}
h1,h2,h3,h4,h5,h6{
  font-family:"title";
}
h2{
  margin:0;
  padding:5px;
  border-bottom:1px solid var(--link);
  
}
h3{
  margin:0;
  padding:5px;
  border-bottom:1px solid var(--link);
  border-top:1px solid var(--link);
}

audio{
  background:white;
  filter:var(--audiofilter);
  height:20px;
  border-radius:15px;
  margin-left:20px;
  margin-top:20px;
}


img{
  max-width:100%;
}
ul{
  list-style:square;
}

header,nav,main,footer,div,section{
  background-color:var(--bg);
}
container{
  border:1px solid var(--link);
  background-color:var(--bg);
}
header{
  background-color:var(--bg-accent);
  border-bottom:1px solid var(--link);
}
header h1{
  margin:0;
  padding:5px;
}
header button{
  float:right;
  margin:8px;
  color:var(--text);
}
#themeSwitcher{
  height:35px;
  width:35px;
  font-weight:bold;
  font-size:1.2rem;
  padding:0;
  background-color:var(--bg);
  border:1px solid var(--link);
}
#themeSwitcher:after{
  content:var(--theme);
}


/*-section-3-*/
main{
  display:flex;
}
section p{
  margin:10px;
}
section{
  border-left:1px solid var(--link);
  max-width:100%;
  width:667px;
}
hr{
  border:none;
  border-bottom:1px solid var(--link);
}
small{
  padding:0 5px;
}
footer{
  border-top:1px solid var(--link);
}


.flex{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}


/*-section-EMOJIS-*/
nav{
  top: 0;
  position: sticky;
  z-index:99;
  height:fit-content;
}
nav h2:nth-child(1){
  margin:0;
  border-bottom:1px solid var(--link);
  background-color:var(--bg-accent);
  padding:3px 10px;
}
nav hr{
  margin:0;
}

nav ul{
  padding-left:0px;
  list-style:none;
  line-height:1rem;
  margin:0;
}
nav ul li{
  height:24px;
}

.even{
  background-color:var(--bg);
}

nav ul li a{
  top:-5px;
  position:relative;
}

nav ul li img{
  margin:1px 5px;
  padding:1px;
  border:1px solid var(--img-border);
  border-radius:2px;
  top:6px;
  position:relative;
  background-color:var(--bg);
  filter:var(--filter);
  image-rendering:pixelated;
}

#sidebar{
  margin:0;
  border:none;
  background-color:var(--bg-accent);
  border-left:1px solid var(--link);
}
#sidebar div{
  top: 0;
  position: sticky;
  padding-top:5px;
  background:none;
}

#sidebar p{
  padding:0;
  margin:5px;
  /*border:1px solid var(--link);
  border-radius:2px;*/
  width:35px;
  height:35px;
  text-align:center;
  /*background-color:var(--bg);*/
}

#menu-toggle{
  display:none;
}
  #menu-container{
    display:block;
  }

#tooltip-container{
  border-bottom:1px solid var(--link);
  width:100%;
  display:inline-block;
  background:var(--bg);
  position:sticky;
  top:0;
  z-index:98;
  display:none;
}

#tooltip{
  display:inline-block;
  margin:0;
  padding:0;
}
#tooltip:after{
  content:'testing';
}

#tooltip-container:hover #tooltip:after{
  content:'euuugggghhhhh';
}

#tooltip-about{
  content:'about cinni da webmaster of this website!'
}
main a:hover#about{
  
}


.weatherIcon{
  filter:var(--filter);
/*  width:32px;*/
  image-rendering:pixelated;
  margin-bottom:-5px;
}
#current{
	display:inline-block;
	padding:0;
	font-family:'ＭＳ Ｐゴシック';
  font-family:"unicode";
	background:var(--bg-accent);
	color:var(--link);
	line-height:1rem;
}
#current:before{
content:'[ ';
}
#current:after{
	content:' ]';
}

#time{
	display:inline-block;
	padding:0;
	line-height:1rem;
	background:var(--accent-bg);
	font-family:'ＭＳ Ｐゴシック';
  font-family:"unicode";
	font-size:.9rem;
	font-weight:bold;
}
#time:before{
content:'[ ';
}
#time:after{
	content:' ]';
}

#imood{
  content:var(--imood);
  image-rendering: pixelated;
}

.lastfm{
	display:inline-block;
	line-height:1rem;
	
}
#statuscafe{
	padding:0 10px;
	text-align:justify;
  border:none;
  border-top:1px solid var(--link);
  border-bottom:1px solid var(--link);
  margin:0;
  background-color:var(--bg-accent);
  display:flex;
  flex-wrap:wrap-reverse;
  flex-direction:row-reverse;
  align-items:flex-end;
}
#statuscafe-username{
  border:none;
  background:none;
  font-family: 'unicode';
}
#statuscafe-username a{
  position:relative;
  top:-2px;
  font-family:'basiic';
}

#statuscafe-username:before{
	content:'- ';
}
#statuscafe-content:before, #statuscafe-content:after{
	content:'"';
}
#statuscafe-content{
  border:none;
  background:none;
  
}

.icon{
	vertical-align: text-bottom;
}


figure{
	border-right:1px solid var(--link);
	border-bottom:1px solid transparent;
	margin:0;
	padding:0;
}
figcaption{
	text-align:center;
	width:100%;
}


.red{
  background:var(--red);
}
.orange{
  background:var(--orange);
}
.yellow{
  background:var(--yellow);
}
.green{
  background:var(--green);
}
.blue{
  background:var(--blue);
}
.purple{
  background:var(--purple);
}
.indigo{
  background:var(--indigo);
}
















@media screen and (max-width: 600px) {

#themeSwitcher{
  margin-top:10px;
  height:35px;
  width:35px;
  padding:0;
  border:1px solid var(--link);
  font-weight:bold;
  font-size:1.4rem;
  margin-right:10px;
  margin-bottom:5px;
}
  
container,main{
  display:block;
  }
  nav{
    border-right:none;
  }
  nav ul{
    display:flex;
    flex-wrap:wrap;
    align-content: space-between;
  }
  nav li{
    margin:5px 10px;
    width:135px;
  }

  section{
    border-left:none;
  }

  #sidebar div{
    display:flex;
  }
  
#menu-toggle{
  width:20px;
  height:20px;
  Margin:5px;
  float:right;
  font-family:'basiic';
  font-size:1rem;
  display:block;
  border:1px solid var(--link);
}
#menu-toggle:hover{
  cursor:pointer;
}

  #menu-container{
    display:none;
    margin:0;
    border:none;
    border-bottom:1px solid var(--link);
    z-index:3;
    position:relative;
  }
#menu-container.mobile-active {
  display: block;
}

nav{
  border-bottom:none;
}

.even{
  background:none;
}
.ul-even{
    background-color:var(--bg-accent);
  }
  
  #sidebar{
    border-left:none;
    border-top:1px solid var(--link);
    display:flex;
    flex-wrap:wrap;
  }
  #sidebar div{
    flex-wrap:wrap;
  }
  #sidebar p{
    margin-right:0px;
  }

  nav .red,nav .orange, nav .yellow, nav .green, nav .blue, nav .purple, nav .indigo{
    background:none;
  }
  
}