:root {
    --hilight: #d6d9dd;
    --light: #a8aaaf;
    --mid:#65676b;
    --dark:#414244;
    --darkest: #2c2c2e;
    --yellow: #ffc400;
    --logo-height: 20vh;
    --logo-width: 100vw;
    --main-width: 60vw;
    --main-width-small: 90vw; /* Added for smaller screens */
    --transition-duration: 0.3s; /* Added for transition duration */

}
@font-face {
    font-family: Nabla;
    src: url('../../cntfiles/fonts/Nabla/Nabla-Regular-VariableFont_EDPT\,EHLT.ttf') format('ttf');
    font-size: 2em;
  }
  
@font-face {
    font-family: Audiowide;
    src: url('../../cntfiles/fonts/Audiowide/Audiowide-Regular.ttf') format('ttf');
}

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

}
@media screen and (max-width: 768px) {
    #logo {
        --logo-width: 100vw;
        --logo-height: 10vh;    
    }
    #main {
        --main-width: var(--main-width-small); /* Use the small screen variable */
    }
}
body {
    font-family: "Nunito Sans";
    font-size: 1em;
    background-color: var(--darkest);
}
#logo {
    background-image: url(/images/indrone_logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: var(--logo-height);
    width: var(--logo-width);
}

#main {
    width: var(--main-width);
    margin: 0 auto;
    display: flex; /* Enable flexbox layout */
    justify-content: center;
    flex-direction: column;
    gap: 1em;
    transition: width var(--transition-duration) ease-in-out; /* Added transition */
}
#main .test {
    font-family: "Audiowide";
    font-size: 2em;   
}
.post {
    flex: 0 0 100%;
    background-color: var(--dark);
    border-bottom: 1px solid var(--mid);
    border-top: 1px solid var(--mid);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
}
.post h2 {
    font-family: "Orbitron", serif;
    font-optical-sizing: auto;
    font-size: 2em;
    text-shadow: 0px 2px 2px black;
    margin-left: .3em;
    color: var(--mid);
}
.post-cnt {
    font-family: "Nunito Sans";
    font-size: 1em;
    margin-left: 1em;
    color: var(--light);
}

.post small {
    float:right;
    margin-right: 1em;
}
@keyframes linkFade {
    from {background-color: var(--light-blue);}
    to {background-color: var(--yellow);}
}
#links {
    display: flex;
    justify-content: space-around;
}
#links .link {
    --animate-delay: 0.9s;
}
#links .link a {
    text-decoration: dashed;
    color: var(--mid);
    font-family: "Nunito Sans";
    font-size: 1em;
}
#links .link a:hover {
    text-decoration: underline;
    color: var(--yellow);
    animation-name: linkFade;
    animation-duration: .3s;
}