:root {
  --bg : #f8f9fa;
  --text : #333;
  --borders : #c7c7c7;
  --header : #fff;
  --container : #fff;
  --switch-bg : #ffd596;
  --shadow : #a0a0a0;
  --oddRow : #f0f0f0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    line-height: 1.6;
    transition:300ms ease-out;
}

header {
    background-color: var(--header);
    padding: 3px 20px;
    border-bottom: 1px solid var(--borders);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header img {
    height: 80px;
}

nav a {
    margin-left: 15px;
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

.container-fluid {
  padding: 20px;
  background-color: var(--container);
}

.container {
  padding: 20px;
  background-color: var(--container);
}

.borders{
  border: 1px solid var(--borders);
  border-radius: 6px;
  box-shadow: 8px 4px 2px var(--shadow)
}

.borders-flat{
  border:2px solid var(--borders);
}

.container-left{
  float:left;
  max-width: 15vw;
  width:auto;
  padding: 20px;
  background-color: var(--container);
  border: 1px solid var(--borders);
  border-radius: 6px;
  box-shadow: 8px 4px 2px var(--shadow)
}

#container-switch{
  display:inline-block;
  width:60px;
  height:30px;
  background-color: var(--switch-bg);
  border-radius:15px;
  box-shadow: 4px 2px 2px var(--shadow);
  vertical-align: middle;
  margin-left:10px;
  cursor:pointer;
  transition: 300ms ease-out;
}

#knob{
  height:22px;
  width:22px;
  background-color:#fff;
  box-shadow: 2px 1px #a0a0a0;
  border-radius:11px;
  margin:3px;
  overflow-y:hidden;
  transition:300ms ease-out;
}

#container-icons{
  padding:0;
  margin-top:-3px;
  width:16px;
  transition:300ms ease-out;
}

.icon {
  margin:0 2px;
  width:16px;
  height:16px;
  object-fit:contain;
}

.flat{
  box-shadow:none !important;
  border-radius:0;
}

.cross-clip{
  clip-path:polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  background-color:red;
}

#container_posts .post:nth-child(odd) {
  background-color: var(--oddRow);
}

.openImg {
  height:1em;
  width:auto;
}

.post_col{
  height:65vh;
  overflow-y:scroll;
}

#post_container{
  width:65vh;
  height:65vh;
  border:solid 1px black;
  overflow: hidden;
}

.under_construction{
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.4);
}