html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body{
    background-color: #1E1E2E;
    margin:0;
    padding:0;
}

.sidebar{
    height:100%;
    width:0;
    min-width: 0;
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    background-color: #41337A;
    overflow: hidden;
    padding-top:60px;
    transition:0.3s ease;
}

.sidebar.no-transition{
    transition:none !important;
}

.sidebar.open{
    width:15%;
    min-width:250px;
    transition:0.3s;
}

.sidebar.open ~ #main {
    margin-left: Max(250px,15%);
    
}

.sidebar:not(.open) ~ #main {
    margin-left: 0;
}

.sidebar a{
    padding: 5px 5px 5px 15px;
    text-decoration: none;
    font-size:1.2em;
    color:#6EA4BF;
    display:block;
    transition:0.3s;
}

.sidebar a:hover {
    color:#C2EFEB;
}

.sidebar a.active {
    color:#C2EFEB;
    font-weight:bold;
}

.sidebar .btnClose {
    position:absolute;
    top:0;
    right:25px;
    font-size:36px;
    margin-left: 50px;
}

.sidebar .sidebar-selfie {
    width:50%;
    display:block;
    margin:auto;
    border:2px;
    border-style: solid;
    border-radius: 50%;
    border-color: #6EA4BF;
    margin-bottom: 1em;
}

.sidebar .sidebar-title {
    width:100%;
    display:block;
    margin:auto;
    text-align: center;
    font-size: 20px;
    color: #6EA4BF;
    font-weight:bolder;
    text-wrap:nowrap;
}

.sidebar .sidebar-socials {
    color:#6EA4BF;
    font-size:1.5em;    
    left:0;
    bottom:0;
    display:flex;
    justify-content:center;
    position:sticky;
    overflow: hidden;
    width:100%;
}

.sidebar .sidebar-socials a{
    display:inline-flex;
}

.sidebar .sidebar-subtitle {
    width:80%;
    display:block;
    margin:auto;
    text-align: center;
    font-size: 14px;
    color: #6EA4BF;
    font-weight:bolder;
    text-wrap:wrap;
}

.btnOpen {
    font-size:20px;
    cursor:pointer;
    background-color: #41337A;
    color:white;
    padding: 10px 15px;
    border:none;
    border-bottom-right-radius:10%;
}

.btnOpen:hover {
    background-color: #444;

}



#main {
    padding:2em;
    transition: margin-left 0.3s;
}

.flexbox-container {
    display: flex;           /* establish flex container */
    flex-wrap:wrap;       /* flex items to wrap to next line */
    flex-direction: row;  /* make main axis vertical */
    justify-content: space-evenly; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
}

.flexbox-container.projectcontainer{
    justify-content: flex-start; /* align items to the left */
    list-style: none;
}

.flexbox-item {
    flex: 1 1 300px;
    min-height: 10vw;
    min-width: 300px;
    max-width: 400px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
    background-color: #41337A;
    border-radius: 0.5em;
    padding: 0.5em;
    margin:0.5em;
}

.flexbox-item.projectitem{
    min-width: 200px;
    max-width: 200px;
}

.flexbox-item h1{
    margin-bottom: 0.1em;
}

ul{
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    list-style-type: none;    
    padding: 0.2em;    
    margin:0.2em;
}

li{
    font-size:1.2em;
    color:#C2EFEB;
    
}

li a{
    color:#6EA4BF;
    text-decoration: underline;
    transition:0.3s;
}

li a:hover{
    color: #D9E6EC;
    text-decoration: underline;

}
p {
    font-size:1em;
    color: #D9E6EC;
}

h1 {
    color: #D9E6EC;
    font-weight: bold;
    font-size: 2em;
    margin-bottom: 0.2em;
}

h2 {
    color: #D9E6EC;
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 0.1em;
}

.post-content ul {
    list-style-type:"- ";
    display:block;
    margin-left: 2em;
}

.post-content li {
    display:list-item;
    margin-bottom: 0.5em;
}

@media screen and (max-height: 480px) {
    .sidebar {padding-top: 2px; transition: 0.3s ease;}
    .sidebar .sidebar-selfie {width:25%; margin-top: 1em; margin-bottom: 0.8em; transition: 0.3s;}
    .sidebar a {font-size: 1.2em;}
    .sidebar .sidebar-socials a {font-size: 1.2em;}    
    .sidebar.open ~ #main {margin-left: 0px;}

  }

@media screen and (max-width: 768px) {
    .sidebar.open {width:60%; transition: 0.3s;}
    .sidebar .sidebar-selfie {width:40%; margin-top: 1em; margin-bottom: 0.8em; transition: 0.3s;}
    .sidebar.open ~ #main {margin-left: 0px;}
    .flexbox-item {min-width: 40%;}
    h1 {font-size: 1.5em; text-align: center;}
    h2 {font-size: 1.2em; margin-bottom: 0em;}
    
}

@media screen and (max-width: 480px) {
    .sidebar.open {width:100%; transition: 0.3s;}
    .sidebar .sidebar-selfie {width:30%; margin-top: 1em; margin-bottom: 0.8em; transition: 0.3s;}
    .sidebar.open ~ #main {margin-left: 0px;}
    .flexbox-item {min-width: 80%;}
    .flexbox-item ul, .flexbox-item li{margin:0px;}
    h1 {font-size: 1.5em;text-align: center;}
    h2 {font-size: 1.2em; margin: 0px;}
    li {font-size: 1em;}
    .flexbox-container.projectcontainer{justify-content: space-evenly;}
    .flexbox-item.projectitem{min-width: 80%;max-width: 80%;}

}