:root {
  --primary-color: blue;
  --header-border-bottom: solid 1px;
  --background-image-url: url('');
}

.my-element {
  color: var(--primary-color);
}

html {
    margin: 0px;
}
.article a {
    color: black !important;
}
.header-white a {
    color: white;
    text-decoration: none;
}
.header-white a:hover{
    color: white;
    text-decoration: underline;
}
.header-black a {
    color: black;
    text-decoration: none;
}
.header-black a:hover{
    color: black;
    text-decoration: underline;
}
.contact-div a {
    color: white;
}
.contact-div a:hover{
    color: white;
    text-decoration: none;
}
.desktop-header {
    display: block;
}
.mobile-header {
    display: none;
}
.header-white .mobile-header .fa-bars{
    color: white;
}
.header-black .mobile-header .fa-bars{
    color: black;
}
.menu {
  position: fixed;
  z-index: 30;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 1);
  /*nimation-name: slide-in;*/
  /*animation-duration: 1s;*/  
  transition: right 0.5s ease-in-out;
}
.menu-open {
    right: -20%;
}
.close-menu-icon {
  position: fixed;
  z-index: 40;
  top: 10px;
  right: 10px;
}
.menu-links a {
    color: white !important;
}

@keyframes slide-in {
  from {
    right: -100%;
  }
  
  to {
    right: -15%;
  }
}

.main-container {
    background-image: var(--background-image-url);
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    height: 600px;
    padding: 10px;
}

.fixed-header {
  position: fixed;
  z-index: 10; /* Set a higher z-index to ensure it stays on top of other elements */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* Set your desired background color */
  /* Add any other styling you want for your header */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
}

.header-border {
    border-bottom: var(--header-border-bottom);
    border-color: #ccd0d4;
}

/* CSS for hiding and showing the articles/posts */
.article {
    flex: 1;
    opacity: 1;
    /*transform: translateY(300px);*/
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.articles-row {
    display: flex;
}


/*
* Mobile responsive 
*/
@media (max-width: 858px){
    .main-container {
        height: 1005px;
    }
    .desktop-header {
        display: none;
    }
    .mobile-header {
        display: block;
    }
    .articles-row {
        display: block;
    }
}