/* ========================================================== */
/*                       THEME – LIGHT MODE                   */
/* ========================================================== */
:root {
  /* ■■ GENERAL BACKGROUND COLORS ■■ */
  --bg-main: #fefefe;
  --bg-sidebar: #fff;
  --bg-primary: #54aeba;
  --bg-border: #54aeba;
  
  --bg-button-color:#fefefe;
  --bg-button-hover: #fefefe;
  
  --link-color: #54aeba;
  --link-hover: #54aeba;
  --text-color: #fefefe;
  
  --header-image: url('https://file.garden/Zdp-ila93Ho4OeVL/neocities-v3/images/wave-pattern.png');
}


/* ========================================================== */
/*                            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:23%;}

* {margin: 0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;}

body{
min-height:100vh;
background-color:var(--bg-main);
background-image:url('https://images.unsplash.com/photo-1596599946906-33fbfed15d39?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-position:center;
background-size:cover;
background-repeat:repeat;
background-attachment:fixed;
}

a, a:visited{color:#658ce3;
transition:.3s;}
a:hover, a:active{color:#2bd097;
transition:.3s;}

h3, p{color:#2e4c5f;}
h3{background: linear-gradient(90deg,rgba(228, 243, 245, 1) 50%, rgba(254, 254, 254, 1) 100%); padding:5px;}

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

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

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

.header-col-left {
  flex: 60%;
}
header-col-right{
  flex:40%;
}

.header-img{
background-image: var(--header-image);
     background-color:var(--bg-main);
    height:55px;
    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:7%;
position:fixed;
top:0;
left:0;
height:100%;
width:240px; /*85px*/
border:solid var(--bg-border) 3px;
background:var(--bg-sidebar);
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/grey-gingham.jpg');
  background-position: center;
  background-size:fill;
padding: 25px 15px;
display:flex;
flex-direction:column;
transition: all 0.8s ease;
overflow-x:hidden;}

.sidebar:hover{width:240px; /*260px*/
transition: all 0.8 ease;
}

.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;}

.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) 5px;
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:5px;
width:100%;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}

/* ========================================================== */
/*                         BODY / MAIN                        */
/* ========================================================== */
.main{background:var(--bg-main);
background-image:url('#');
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(--bg-main);
  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%;}



/* ========================================================== */
/*                            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: 600px){
/* sidebar size & remove sidebar headers */
.sidebar{width:83px;}
.sidebar-section{display:none;}
  
/*.main{overflow-y:scroll;overflow-x:hidden;}*/

  /* user image size when sidebar expands */
.user-image{width:50px;
height:50px;
transition: 1s;}
  
.sidebar:hover .user-image{
width:100px;
height:100px;
border-radius:1%;
transition: 0.8ss;}
    
}