#app-container {
     width: 100%;
     height: 100%;
     background-color: black;
}

#banner {
     text-align: center;
     font-weight: bold;
     font-size: 3em;
     background-color: black;
     font-family: sans;
     color: white;
     text-decoration-thickness: 5px;
}

#nav-container {
     width: 100%;
     height: 4vh;
     text-align: center;
     display: inline-flex;
     background-image: linear-gradient(to right, #60a5fa, blue);
}

#main-content {
     width: 100%;
     height: 125vh;
     display: flex;
}

#left-column {
     flex: 0;
     height: 100%;
     border: 3px #c4c4c4 solid;
     background-color: black;
}

#center-column {
     flex: 1;
     height: 100%;
}

#central-container {
     height: 100%;
     width: 100%;
}

#image-container {
     height: 35%;
     width: 100%;
     margin-bottom: 0.5%;
}

#image-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

#content-container {
     height: 65%;
     width: 100%;
     overflow: auto;
     margin-bottom: 1%;
     font-family: sans;
}

#right-column {
     flex: 0;
     height: 100%;
     border: 3px #c4c4c4 solid;
     background-color: black;
}

#nav-left {
     flex: 0;
     border-right: 1px black solid;
}

#nav-center {
     flex: 2;
     display: flex;
}

#nav-right {
     flex: 0;
     border-left: 1px black solid;
}

.nav-link {
     flex: 1;
     border-left: 1px black solid;
     border-right: 1px black solid;
     color: white;
     font-size: 1.5em;
     font-family: sans;
}

#posts {
     width: 100%;
     height: 100%;
     display: block;
     background-color: black;
}

.post {
     border: 3px #c4c4c4 solid;
     margin-right: 0.5%;
     margin-left: 0.5%;
     margin-bottom: 1%;
     background-image: linear-gradient(#60a5fa, white);
     overflow: hidden;
}

.post-content {
     display: flex;
     height: 100%;
     width: 100%;
     margin: 0.5%;
     overflow: hidden;
}

.post-title {
     font-size: 2em;
     font-family: sans;
}

.post-title a {
     color: blue;
}

.post-pic {
     min-width: 200px;
     max-width: 200px;
}

.post-text {
     max-height: 200px;
     overflow: hidden;
     white-space: normal;
     font-size: 1.25em;
     font-family: sans;
}

blockquote {
     margin-block-start: 0;
     margin-block-end: 0;
     margin-inline-start: 2%;
     margin-inline-end: 2%;
}

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


@media ((width > 800px) and (width < 1000px)) {
#banner {
     font-size: 3.25em;
}

#right-column {
     flex: 0.25;
}

#left-column {
     flex: 0.25;
}

#center-column {
     flex: 2;
}

#nav-left {
     flex: 0.25;
}

#nav-right {
     flex: 0.25;
}

}
@media ((width >= 1000px) and (width < 1200px)) {
#banner {
     font-size: 3.5em;
}

#right-column {
     flex: 0.4;
}

#left-column {
     flex: 0.4;
}

#center-column {
     flex: 2;
}

#nav-left {
     flex: 0.4;
}

#nav-right {
     flex: 0.4;
}

}
@media ((width >= 1200px) and (width < 1500px)) {
#banner {
     font-size: 4em;
}

#right-column {
     flex: 0.55;
}

#left-column {
     flex: 0.55;
}

#center-column {
     flex: 2;
}

#nav-left {
     flex: 0.55;
}

#nav-right {
     flex: 0.55;
}

}
@media (width >= 1500px) {
#banner {
     font-size: 4.5em;
}

#right-column {
     flex: 0.75;
}

#left-column {
     flex: 0.75;
}

#center-column {
     flex: 2;
}

#nav-left {
     flex: 0.75;
}

#nav-right {
     flex: 0.75;
}

}