/* ####### WORKING ON LAST: THEME / DARK MODE */

/* --- APPLIES CSS TO ALL PAGES --- */

/* ========================================================== */
/*                            GENERAL                         */
/* ========================================================== */
/* CUSTOM FONTS */
@font-face {                  
font-family: 'header-font';
src: url(https://file.garden/Zdp-ila93Ho4OeVL/neocities-v3/fonts/Comico-Regular.otf);
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'general-font';
src: url(https://file.garden/Zdp-ila93Ho4OeVL/neocities-v3/fonts/Satoshi-Medium.otf);
font-weight: normal;
font-style: normal;
} 

/* keeps width of main content consistent. float: right, margin: 0 auto; or margin-left to change position main content */
.everything{width:70%;background:none;margin-left:30%;}

* {margin: 0;
padding:0;
box-sizing:border-box;
font-family: var(--body-font), sans-serif;
letter-spacing:1px;}

html, body{height:100vh;}

body{
background-color:var(--body-bg-color);
background-image:var(--accent-image);
background-position:center;
background-size:cover;
background-repeat:repeat;
background-attachment:fixed;
}

a, a:visited{color:var(--link-color);
transition:.3s;}
a:hover,  a:active, a:focus{color:var(--link-hover);
transition:.3s;}

h3{/*border:solid 1px #e8e8e8;
background: linear-gradient(90deg,#f0f3f4 50%, rgba(254, 254, 254, 1) 100%);*/
padding:5px;
border-color:var(--border);
font-family:var(--header-font);
font-size:var(--header-font-size);}
p, li{font-size:var(--body-font-size);}
h3, p{color:var(--flex-item-font);}

.li-list{margin-left:20px; margin-bottom:10px;}

hr{margin-bottom:15px;
  border-top: 2px dashed;
  border-bottom:none;
  color:var(--flex-item-font);
}

/* -- blogbutton filters -- */
.tag{background:var(--bg-header); color:var(--text-color); padding:6px; border-radius:3px; border:var(--border); font-size:var(--body-font-size); margin:8px; text-align:center; width:auto; float:right; transition-duration:0.5s;}

/* ========================================================== */
/*                            HEADER                          */
/* ========================================================== */
.row {
  display: flex;
}

.header{background-color:var(--bg-header);
color:var(--text-color);
font-size:var(--header-font-size);
padding:10px;}

.header a{color:var(--header-footer-text);}
.header a:hover{color:var(--link-hover);}

.header-col-left {
  flex: 3%;
}
.header-col-middle {
  flex: 90%;
  margin-left:2px;
  font-family:var(--title-font);
  font-size:var(--title-font-size);
}
header-col-right{
  flex:7%;
}

.header-img{
background-image: var(--divider-image)!important;
     background-color:var(--bg-main);
    height:45px;
    background-position: center;
    background-size: fill;
    background-repeat: repeat;
    /*background-attachment:fixed;  parallax effect */
    border-right:solid var(--bg-border) 3px;
    }

/* theme switcher styling */
select{
  background:var(--desktop-button-bg); 
  border:2px solid var(--border);
  border-radius:2px;
  padding:4px;
  width:130px;}

/* ========================================================== */
/*                          SIDEBAR                           */
/* ========================================================== */
.sidebar{margin-left:13%;
position: fixed;
z-index:1;
top:0;
left:0;
height:100%;
width:245px; /*85px*/
background:var(--desktop-bg);
background-image:url('#');
background-position: center;
background-size:fill;
padding: 25px 15px;
display:flex;
flex-direction:column;
transition: all 0.8s ease;
overflow-x:hidden;}

.sidebar-header{display:flex;
flex-direction:column;
align-items:center;
margin-top:0%; /*-50%*/}

.user-image{width:130px;
height:130px;
background-image: var(--user-image)!important; 
background-position:center;
background-size:cover;
transition-duration:.5s;
border-radius:2px;
border: solid 3px var(--border);}

.user-image:hover{rotate:5deg; transition-duration:.5s;}

.sidebar-links{
list-style:none;
overflow-y:auto;
color:#fff;
margin: 12px 0;
white-space:nowrap;
position:relative;}

.sidebar-links li a{
display:flex;
align-items:center;
gap: 0 10px; /* gap between icon and text */
color: var(--sidebar-link-color);
font-family:var(--body-font);
font-size:var(--body-font-size);
list-style:none;
padding:8px 10px;
white-space:nowrap;
text-decoration:none;
transition:all 0.5s ease;
margin:5px;
background:var(--desktop-button-bg);
border-left:solid var(--border) 0;
border:2px solid var(--desktop-border);
border-radius:2px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.sidebar-links li a:hover{
color:var(--sidebar-link-hover);
border-radius:2px;
border-left:solid var(--desktop-border) 6px;
margin-left: 8px;
transition:all 0.5s ease;
}

.sidebar-section{color:var(--text-color);
font-family:var(--sidebar-header-font);
  font-size:var(--sidebar-header-font-size);
background-color:var(--desktop-section-bg);
border-radius:2px;
margin-bottom:10px;
margin-top:10px;
padding:6px;
width:100%;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}

/* hide mobile navigation until break point */
@media screen and (max-width: 1600px){
  .sidebar-mobile{display:none;}
}
/* ========================================================== */
/*                         BODY / MAIN                        */
/* ========================================================== */
.main{background:var(--bg-main);
background-image:var(--grid-image);
/*background-attachment:fixed;*/
background-position:center;
background-size:fill;
background-repeat:repeat;
padding:20px;
height:100%;
border-right:solid var(--bg-border) 3px;}

/*----*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  background-color: var(--flex-item-bg);
  color:var(--flex-item-text);
  border:solid var(--bg-border) 1px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  padding: 10px;
  text-align: left;
  flex: 33.3%;
  margin:10px;
  border-radius:5px;
}

/* Make a one column-layout instead of a three-column layout */
@media (max-width: 600px) {
  .flex-item{
    flex: 100%;
  }
}

.column{flex:50%;}

/* HOMEPAGE */
.art-thumb{height:10em; width:10em; margin:10px; border:solid 2px #25252c; transition-duration:.4s;}
.art-thumb:hover{transition-duration:.4s; filter: grayscale(100%); rotate:4deg;}

.art-thumb-flex-container{ 
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
justify-content: space-evenly;
overflow:auto;
height:180px;}

/* ========================================================== */
/*                            FOOTER                          */
/* ========================================================== */
.footer{background-color:var(--bg-footer);
  color:var(--text-color);
text-align:right;
padding:15px; 
font-size:12px;
left: 0;
bottom: 0;}

/* ========================================================== */
/*                            MOBILE                          */
/* ========================================================== */
@media screen and (max-width: 1200px){
  
  .header-img{height:18vh;
  background-image:var(--accent-image)!important;
  background-attachment: fixed;
  background-position: 40% 0% !important;
  background-size:100%;
  background-repeat:no-repeat;}
  
/*remove desktop sidebar */
.sidebar{display:none;}
/* mobile navbar */
.sidebar-mobile{display:block;}

.everything{width:100%;
  background:none;
  margin-left:0%;}
  
body{background:var(--body-bg-color);} 
  
  
  
  /* DROPDOWN MENU */
  nav{z-index: 5;}
  
.sidebar-mobile{background:var(--bg-header);
  top: 0;
  position:sticky;
  }
  
nav ul {
    list-style-type: none;
    text-align: center;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    color: #fff!important;
    text-decoration: none;
    padding: 15px 10px;
    display: block;
    font-family:var(--header-font);
    font-size:var(--body-font-size);
}

nav ul li a:hover, nav ul li a:active, nav ul li a:focus {color: var(--link-hover)!important;}

/* Dropdown menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--mobile-dropdown-bg);
    min-width: 130px;
    z-index: 1;
    text-align:left;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}

.dropdown-content a {
    color: #000!important;
    padding: 12px 8px;
    text-decoration: none;
    display: block;
    font-family:var(--body-font);
    font-size:var(--body-font-size);
}
  
.dropdown-content a:hover {margin-left:5px;}
.dropdown:hover .dropdown-content {display: block;}
}