html, body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    width: 100%;
    scrollbar-color: yellow #000;
    overflow-y: hidden;
}

* {
    box-sizing: border-box;
}

#app {
    position: relative;
    background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    url('../img/landscape.jpg');
    background-repeat: repeat-x;
    background-size: auto 100vh;
    display: flex;
    align-items: stretch;
    height: 100vh;
    width: 100vw;
    position: absolute;
    color: #fff;
    padding-top: 100px;
    overflow-y: hidden;
}

#overlay {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    pointer-events: none;
}

.overlay-header {
    height: auto;
    display: inline-flex;
    background: #000;
    pointer-events: all;
}

.overlay-footer {
    height: auto;
    display: flex;
    align-items: center;
    background: #000;
    position: absolute;
    bottom: 40px;
    left: 20px;
    box-sizing: border-box;
    width: calc(100vw - 40px);
    pointer-events: all;
    padding: 5px 10px;
    gap: 20px;
}

.overlay-footer h3 {
    display: flex;
    align-items: center;
    font-family: 'Electrolize', sans-serif;
    margin: 0;
    padding: 0;
}

.overlay-footer img {
    max-height: 38px;
    height: auto;
}

.overlay-footer a {
    font-family: 'Electrolize', sans-serif;
    font-size: 14px !important;
    font-weight: bold;
    text-transform: lowercase;
    gap: 10px;
}

h1, h2 {
    font-family: 'Electrolize', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF;
    letter-spacing: 0rem;
    text-transform: uppercase;
   /* transform: rotate(-10deg); */
}

h1 {
    /* text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; */
    font-size: 6rem;
    line-height: 5.5rem;
}

h3 {
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	color: white;
	font-size: 20px;
	font-weight: bold;
	
}

h2 {
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    font-size: 3.5rem;
    line-height: 3.5rem;
}

.btn {
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 10px !important;
    padding: .5rem 1rem;
    transition: all .2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    z-index: 1;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"
}

.btn svg {
    fill: #fff;
    transition: all .2s ease-in-out;
}

.btn:hover {
    background: yellow;
    color: #000;
    transform: scale(1.1);
    transition: all .2s ease-in-out;
    z-index: 10;
}

.btn:hover svg {
    fill: #000;
    transition: all .2s ease-in-out;
}

.btn.primary {
    font-size: 1.5rem;
}

.container-local {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 480px;
    padding: 40px;
    gap: 100px;
}

#header {
    display: inline-flex;
    align-items: center;
    width: 300px;
    height: 100%;
}

#feed {
    white-space: nowrap;
    padding: 40px 0;
    scrollbar-color: yellow #000;
    white-space-collapsing:discard;
}

::-webkit-scrollbar {
    width: 10px;
}

/* Set the color of the scrollbar */
::-webkit-scrollbar-thumb {
    background-color: yellow;
}

/* Set the color of the scrollbar track */
::-webkit-scrollbar-track {
    background-color: #000;
}

.post {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 400px;
    white-space: normal;
    margin-right: 40px;
}

.post-merge {
    display: inline-flex;
    margin-right: 40px;
}

.post-merge .post {
    margin-right: 0;
}

.post-merge .post-thumbnail {
    width: 100% !important;
}

.post-merge .post:first-child .post-thumbnail {
    border-right: none;
}

.post-merge .post:last-child .post-thumbnail {
    border-left: none;
}

.post h2 {
    position: relative;
    top: -2rem;
    max-height: 300px;
    overflow: hidden;
}

.post-thumbnail {
    position: relative;
    top: -2rem;
    /* border: solid 2px #000; */ 
    overflow: hidden;
    height: 300px;
     box-sizing: border-box; 
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-content {
    font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: 10px;
}

#app {
    padding-top: 40px;
}

.post {
    width: 300px;
}

.post-thumbnail {
    height: 150px;
}

.post-content {
    font-size: 10px;
}

h2 {
    font-size: 3rem;
    line-height: 3rem;
}
		.colorchange {
  animation: colorchange-animation .1s infinite;
}

@keyframes colorchange-animation {
  0% {
    color: red;
  }
  25% {
    color: blue;
  }
  50% {
    color: green;
  }
  75% {
    color: purple;
  }
  100% {
    color: orange;
  }
}
.standout {
	color:yellow;
	text-decoration-style: solid;
}

@media (max-width: 1280px) {
    .overlay-footer {
        width: calc(100vw - 40px);
        display: inline-block;
        white-space: nowrap;
        position: absolute;
        overflow-x: auto;
    }

    .overlay-footer h3,
    .overlay-footer a {
        display: inline-block;
    }
}