/* ========================================================== */
/*                       THEME – LIGHT MODE                   */
/* ========================================================== */
:root {
  /* ■■ GENERAL BACKGROUND COLORS ■■ */
  --bg-main: #f2f2f2;
  --bg-sidebar: #8d9aa0;
  --bg-primary: #272a2c;
  --bg-border: #25252c;
  
  --bg-button-color:#fafafa;
  --bg-button-hover: #fafafa;
  
  --link-color: #414e5d;
  --link-hover: #414e5d;
  --text-color: #fefefe;
  
  --header-image: url('https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8C%B1%20resources/%F0%9F%8F%94%EF%B8%8F%20backgrounds/%F0%9F%8F%81%20static%20tiled/dot-tile-modified.jpeg');
  --body-image: url('https://images.unsplash.com/photo-1477554193778-9562c28588c0?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}


/* ========================================================== */
/*                            GENERAL                         */
/* ========================================================== */
/* 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: Montserrat, sans-serif;
letter-spacing:1px;}

body{
min-height:100vh;
background-color:var(--bg-main);
background-image:var(--body-image);
background-position:center;
background-size:cover;
background-repeat:repeat;
background-attachment:fixed;
}

a, a:visited{color:#69abc9;
transition:.3s;}
a:hover,  a:active, a:focus{color:#8bc2ed;
transition:.3s;}

h3{border:solid 1px #e8e8e8;}
h3, p{color:#272a2c;}
h3{background: linear-gradient(90deg,#e8e8e8 50%, rgba(254, 254, 254, 1) 100%); padding:5px;}

/* font family*/
h3, .sidebar-section{font-family:"#";}


hr{margin:15px;
  border-top: 1px dashed #272a2c;
  border-bottom:none;}

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

.header{background-color:var(--bg-primary);
color:var(--text-color);
font-size:1.8rem;
padding:12px;}

.header a{color:#fefefe;}
.header a:hover{color:var(--bg-sidebar);}

.header-col-left {
  flex: 3%;
}
.header-col-middle {
  flex: 90%;
  margin-top:3px;
  margin-left:4px;
}
header-col-right{
  flex:7%;
}

.header-img{
background-image: var(--header-image);
     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;
    }

/* ========================================================== */
/*                          SIDEBAR                           */
/* ========================================================== */
.sidebar{margin-left:14%;
position: fixed;
z-index:1;
top:0;
left:0;
height:100%;
width:240px; /*85px*/
border-left:solid var(--bg-border) 3px;
border-right:solid var(--bg-border) 3px;
background:var(--bg-sidebar);
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:120px;
height:120px;
background-image:url('https://file.garden/Zdp-ila93Ho4OeVL/neocities-v3/images/seal-image.png'); 
background-position:center;
background-size:cover;
transition-duration:.5s;}

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

.sidebar-links{list-style:none;
margin-top: 10px;
overflow-y:auto;
color:#fff;
font-weight:500;
margin: 15px 0;
white-space:nowrap;
position:relative;}

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

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

.sidebar-section{color:var(--text-color);
background-color:var(--bg-primary);
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:url('https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8C%B1%20resources/%F0%9F%8F%94%EF%B8%8F%20backgrounds/%F0%9F%8F%81%20static%20tiled/greygrid.png');
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: #fafafa;
  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;
}

/* 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-primary);
  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:20vh;
  background-image:var(--body-image);
  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:black;}
  
  
  
  /* DROPDOWN MENU */
  nav{z-index: 5;}
  
.sidebar-mobile{background:var(--bg-primary);
  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;
}

nav ul li a:hover, nav ul li a:active, nav ul li a:focus {color: lightcoral!important;}

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bg-main);
    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;
}

.dropdown-content a:hover {margin-left:5px;}

.dropdown:hover .dropdown-content {display: block;}


}


/* ========================================================== */
/*                         CUSTOM FONTS                       */
/* ========================================================== */

/* --- ▪▪▪ FONT TYPE 1 ▪▪▪ --- */
@font-face {                  
font-family: 'barrio';
src: url(https://file.garden/Zdp-ila93Ho4OeVL/neocities-v3/fonts/BBHBartle-Regular.ttf);
font-weight: normal;
font-style: normal;
}