@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

* {
    overflow-x: hidden;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.navbar {
    background: rgb(56, 62, 76);
    display: flex;
    justify-content: center;
    flex-direction: row wrap;
    height: 5vh;

}

.imageAndText {
    display: flex;
    flex-flow: row;
}

.imageAndText>p {
    width: 40%;
}

.navbutton {
    font-family: "Fira Code", monospace;
    text-decoration: none;
    height: 3vh;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    background-color: rgba(0, 31, 41, 0.901);
    color: white;
    padding: 0px 12px;
    border-color: #06a7b8;
    padding: 0px 2% 0px 2%;
    border-style: groove;
    border-radius: 6px;
    font-size: .8em;
}

.navbutton:hover {
    text-decoration: none;
    background: #49505f;
    cursor: pointer;
}

.navbutton:hover::before {
    content: '>';
}


.navbutton:active {
    text-decoration: none;
    background: #21242b;
    cursor: pointer;
}

#avatarImg {
    margin-left: 3%;
    width: 15%;
    border: 2px;
    border-color: #3f097e;
    border-style: solid;
}

#journeylog1Img1 {
    margin-left: 3%;
    width: 65%;
    border: 2px;
    border-color: #3f097e;
    border-style: solid;
}

#vonnieshipstation {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    border: 2px;
    border-color: #3f097e;
    border-style: solid;
}

#vonnieshiplush {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    border: 2px;
    border-color: #3f097e;
    border-style: solid;
}

#vonniestation {
    display: flex;
    margin-top: 2%;
    justify-content: center;
    align-self: center;
    width: 70%;
    border: 2px;
    border-color: #3f097e;
    border-style: solid;
}

.postPic {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    border: 2px;
    border-color: #091e7e;
    border-style: solid;
}

.researchPic {
    margin-left: 5%;
    width: 50%;
    height: 50%;
    border: 2px;
    border-color: #091e7e;
    border-style: solid;
}

.accordion {
    color: #f4511e;
}

.accordion:hover {
    cursor: pointer;
}

#worksPic {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    background-image: url(/images/portal.jpg);
    background-size: cover;
    padding-bottom: 30%;
    margin-top: 2%;
}

#highightedImage {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    background-image: url(/images/mono_stare.png);
    background-size:cover;
    background-repeat: no-repeat;
    padding-bottom: 60%;
    margin-top: 2%;
    border-radius: 1px;
    color: #fff;
    border-style:double;
    border-color: rgb(95, 14, 149);
    background-color: rgba(73, 4, 138, 0.71);
}

#contentWrapper {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-self: center;
    margin-top: 1%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 3%;
    width: 80%;
    color: #fff;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(95, 14, 149);
    background-color: rgba(73, 4, 138, 0.71);

    background: linear-gradient(180deg, rgba(8, 8, 84, 0.71), rgba(8, 8, 84, 0.71), #156785, rgba(8, 8, 84, 0.71), rgba(8, 8, 84, 0.71));
    background-size: 500% 800%;
    animation: gradient 8s linear infinite;
    font-family: "JetBrains Mono", monospace;
}

#announceP {
    text-align: center;
}

#riddle {
    text-align: center;
}

#redSpan {
    color: #ffe4dc;
}

#greenSpan {
    color: #d8ffda;
}

#blueSpan {
    color: rgb(223, 236, 255);
}

#purpleSpan {
    color: #39004b;
}

#avLabl {
    margin-left: 3%;
    font-size: small;
}

#shipLabel1 {
    margin-left: 10%;
    font-size: small;
}

#shipLabel2 {
    color: #fff;
    display: flex;
    justify-content: center;
    align-self: center;
    font-size: small;
}

.banner {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-around;
    background-image: url(/images/orange_grass.jpg);
    background-size: cover;
    background-position-y: 25%;
    padding-top: 6.5%;
    padding-bottom: 10%;
    width: 100%;
    border-bottom: 5px #3f097e solid;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.banner>h3,
.banner>h1 {
    color: white;
    text-align: center;
    text-shadow: 1px 1px black;
}

#worksPic>h3,
#worksPic>h1 {
    color: rgb(255, 255, 240);
    text-align: center;
    text-shadow: 1px 1px rgb(22, 11, 24);
}


.banner>h3 {
    font-size: x-large;
}

#worksPic>h3 {
    font-size: x-large;
}

#worksPic>h1 {
    display: flex;
    font-size: 3.5em;
}

.banner>h1 {
    display: flex;
    font-size: 3.6em;
    text-shadow: 3px 3px black;
}

.newestInfo {
    padding-top: 3%;
    display: flex;
    flex-flow: column wrap;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 3%;
    justify-content: space-evenly;
}

.contentWrapper {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-self: center;
    margin-top: 1%;
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 3%;
    width: 70%;
    color: #fff;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(95, 14, 149);
    background-color: rgba(73, 4, 138, 0.71);

    background: linear-gradient(180deg, rgba(8, 8, 84, 0.71), rgba(8, 8, 84, 0.71), #156785, rgba(8, 8, 84, 0.71), rgba(8, 8, 84, 0.71));
    background-size: 500% 800%;
    animation: gradient 8s linear infinite;

    font-family: "JetBrains Mono", monospace;
    font-size: 1.2em;
}

.feedWrapper {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-self: center;
    margin-top: 1%;
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 2%;
    border-radius: 5px;
    width: 70%;
    color: #fff;
    border-style: solid;
    border-color: rgb(95, 14, 149);
    background-color: rgba(73, 4, 138, 0.71);

    background: linear-gradient(180deg, rgba(55, 5, 112, 0.71), rgba(8, 8, 84, 0.71), #156785, rgba(8, 8, 84, 0.71), rgba(8, 8, 84, 0.71));
    background-size: 500% 800%;
    font-family: "JetBrains Mono", monospace;
}

.contactWrapper {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-self: flex-start;
    margin-top: 3%;
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 5px;
    width: 70%;
    color: #fff;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(95, 14, 149);
    background-color: rgba(73, 4, 138, 0.71);

    background: linear-gradient(180deg, rgba(8, 8, 84, 0.71), rgba(8, 8, 84, 0.71), #156785, rgba(8, 8, 84, 0.71), rgba(8, 8, 84, 0.71));
    background-size: 500% 800%;
    animation: gradient 8s linear infinite;
    font-family: "JetBrains Mono", monospace;
}

.feedPost {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-self: flex-start;
    margin-top: 1%;
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 5px;
    width: 70%;
    color: #fff;
    border-style: solid;
    border-color: rgb(95, 14, 149);
    background-color: rgba(73, 4, 138, 0.71);

    background: linear-gradient(180deg, rgba(8, 8, 84, 0.71), rgba(8, 8, 84, 0.71), #156785, rgba(8, 8, 84, 0.71), rgba(8, 8, 84, 0.71));
    background-size: 500% 800%;
    font-family: "JetBrains Mono", monospace;
}

.travelerLog3 {
    color: rgb(252, 218, 175);
}


.feedContent::before {
    content: "Art3mis: ";
}

.contactStuff>h3 {
    margin-left: 20px;
    font-size: 1.5em;
}

#contentStuff>h2 {
    font-size: 2em;
}

#contentStuff>h2,
p {
    margin-left: 6%;
    margin-right: 6%;
}

#feedStuff>h2 {
    font-size: 2em;
}

#feedStuff>p {
    margin-left: 6%;
    margin-right: 6%;
}

.post {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-self: center;
    width: 70%;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(95, 14, 149);
    background-color: rgba(73, 4, 138, 0.71);

    background: linear-gradient(180deg, rgba(8, 8, 84, 0.71), rgba(8, 8, 84, 0.71), #156785, rgba(8, 8, 84, 0.71), rgba(8, 8, 84, 0.71));
    background-size: 500% 800%;
    box-shadow: 0 0 20px rgba(0, 153, 255, 0.7);
    position: relative;
    transform: perspective(100%) rotateY(-15deg);
    animation: float 6s infinite ease-in-out;
    font-family: "JetBrains Mono", monospace;
}


#post3 {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-self: center;
    width: 70%;
    background-color: rgba(118, 49, 150, 0.61);
    font-family: "JetBrains Mono", monospace;
    transition: transform .2s;
    /* Animation */
}

.row {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    /* Center items vertically */
}

.row>img {
    max-width: 20%;
    /* Ensure the image doesn't exceed its container */
    height: auto;
    /* Maintain aspect ratio */
    margin-right: 20px;
    /* Add spacing between image and text */
    margin-top: 20px;
    margin-left: 20px;
}

.row>.text-container {
    flex-grow: 1;
    /* Let the text container grow to fill available space */
}

.row>p {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-right: 3%;
    padding-bottom: 1%;
    font-size: 19px;
    color: #fff;
}

.row>h3 {
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 2%;
    margin-top: 1.2%;
    font-size: 2em;
}


table {
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 3%;
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 90%;
}

.researchTable {
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 3%;
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 50%;
}

td,
th {
    border: 1px solid #1f0527;
    text-align: left;
    padding: 8px;
}

#friendCode {
    color: rgb(253, 255, 230);
}

tr:nth-child(even) {
    background-color: #7a0099;
}


#specialOne {
    color: #960c05;
}

#worms {
    position: relative;
    animation: paths 10s step-end infinite;
}

#corrupt {
    color: #082972;
    position: relative;
    animation: corrupt 0.5s infinite;
}

@keyframes corrupt {
    0% { content: "!╧"; }
    5% { content: "1↕▲"; }
    10% { content: "╒Vó"; }
    15% { content: "⧿Ä╪"; }
    20% { content: "ħ"; }
    25% { content: "e4`"; }
    30% { content: ".Ä6╤≥"; }
    35% { content: "5t1"; }
    40% { content: "É╚♦1"; }
    45% { content: "∞"; }
    50% { content: "&"; }
    55% { content: "⎋┘æ"; }
    60% { content: "╖►36"; }
    65% { content: "1e≥"; }
    70% { content: "D6τ"; }
    75% { content: "ƒ♠eÄ└A║"; }
    80% { content: "πI"; }
    85% { content: "ĀN"; }
    90% { content: "╥xÑ"; }
    95% { content: "☼yÄ"; }
    100% { content: "><ƒ═"; }
}


#corrupt::before,
#corrupt:after, .corrupt-word::before, .corrupt-word::after {
    content: attr(data-text);
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    pointer-events: none;
    white-space: nowrap;
    font-family: sans-serif;
}

#corrupt::before, .corrupt-word::before {
    color: #660000;
    animation: corrupt (0.25s, 0.5s) infinite;
    z-index: 1;
    opacity: 1;
}

#corrupt:nth-child(odd)::after, .corrupt-word:nth-child(even)::after {
    color: rgb(5, 236, 217);
    animation: corrupt 1.5s infinite;
    z-index: 0;
    opacity: 1;
}

#corrupt:nth-child(even)::after, .corrupt-word:nth-child(odd)::after {
    color: rgb(202, 29, 29);
    animation: corrupt 0.5s infinite;
    z-index: 0;
    opacity: 1;
}

.redacted {
    color: transparent;
    position: relative;
  }
  
  .redacted::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    color: red;
    font-size: 1.2em;
    width: 100%;
  }
  
  .error {
    color: red;
    font-style: italic;
  }
  
  .expunged {
    text-decoration: line-through;
    color: gray;
  }
  

@keyframes combinedAnimation {
    0% {
        transform: translateX(0) skewX(-15deg);
        clip-path: polygon(0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%, 36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%);
    }
    5% {
        transform: translateX(5px) skewX(15deg);
        clip-path: polygon(0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%, 35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%);
    }
    25% {
        transform: translateX(5px) skewX(0deg);
        clip-path: polygon(0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%, 0% 92%, 63% 92%, 63% 4%, 65% 4%);
    }
    50% {
        transform: translateX(-5px) skewX(15deg);
        clip-path: polygon(0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%);
    }
    75% {
        transform: translateX(5px) skewX(0deg);
        clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
    }
    100% {
        transform: translateX(0) skewX(10deg);
        clip-path: polygon(0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%, 16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%);
    }
}


.layers {
    position: relative;
  }
  
  .layers::before,
  .layers::after {
    content: attr(data-text);
    position: absolute;
    z-index: -1;
  }
  
  .layers::before {
    top: -8px;
    left: 15px;
    color: #002064;
  }
  
  .layers::after {
    top: -2px;
    left: -10px;
    color: #660000;
  }

.paths {
    animation: paths 10s step-end infinite;
}

@keyframes paths {
    0% {
        clip-path: polygon(0% 43%,
                83% 43%,
                83% 22%,
                23% 22%,
                23% 24%,
                91% 24%,
                91% 26%,
                18% 26%,
                18% 83%,
                29% 83%,
                29% 17%,
                41% 17%,
                41% 39%,
                18% 39%,
                18% 82%,
                54% 82%,
                54% 88%,
                19% 88%,
                19% 4%,
                39% 4%,
                39% 14%,
                76% 14%,
                76% 52%,
                23% 52%,
                23% 35%,
                19% 35%,
                19% 8%,
                36% 8%,
                36% 31%,
                73% 31%,
                73% 16%,
                1% 16%,
                1% 56%,
                50% 56%,
                50% 8%);
    }

    5% {
        clip-path: polygon(0% 29%,
                44% 29%,
                44% 83%,
                94% 83%,
                94% 56%,
                11% 56%,
                11% 64%,
                94% 64%,
                94% 70%,
                88% 70%,
                88% 32%,
                18% 32%,
                18% 96%,
                10% 96%,
                10% 62%,
                9% 62%,
                9% 84%,
                68% 84%,
                68% 50%,
                52% 50%,
                52% 55%,
                35% 55%,
                35% 87%,
                25% 87%,
                25% 39%,
                15% 39%,
                15% 88%,
                52% 88%);
    }

    30% {
        clip-path: polygon(0% 53%,
                93% 53%,
                93% 62%,
                68% 62%,
                68% 37%,
                97% 37%,
                97% 89%,
                13% 89%,
                13% 45%,
                51% 45%,
                51% 88%,
                17% 88%,
                17% 54%,
                81% 54%,
                81% 75%,
                79% 75%,
                79% 76%,
                38% 76%,
                38% 28%,
                61% 28%,
                61% 12%,
                55% 12%,
                55% 62%,
                68% 62%,
                68% 51%,
                0% 51%,
                0% 92%,
                63% 92%,
                63% 4%,
                65% 4%);
    }

    45% {
        clip-path: polygon(0% 33%,
                2% 33%,
                2% 69%,
                58% 69%,
                58% 94%,
                55% 94%,
                55% 25%,
                33% 25%,
                33% 85%,
                16% 85%,
                16% 19%,
                5% 19%,
                5% 20%,
                79% 20%,
                79% 96%,
                93% 96%,
                93% 50%,
                5% 50%,
                5% 74%,
                55% 74%,
                55% 57%,
                96% 57%,
                96% 59%,
                87% 59%,
                87% 65%,
                82% 65%,
                82% 39%,
                63% 39%,
                63% 92%,
                4% 92%,
                4% 36%,
                24% 36%,
                24% 70%,
                1% 70%,
                1% 43%,
                15% 43%,
                15% 28%,
                23% 28%,
                23% 71%,
                90% 71%,
                90% 86%,
                97% 86%,
                97% 1%,
                60% 1%,
                60% 67%,
                71% 67%,
                71% 91%,
                17% 91%,
                17% 14%,
                39% 14%,
                39% 30%,
                58% 30%,
                58% 11%,
                52% 11%,
                52% 83%,
                68% 83%);
    }

    76% {
        clip-path: polygon(0% 26%,
                15% 26%,
                15% 73%,
                72% 73%,
                72% 70%,
                77% 70%,
                77% 75%,
                8% 75%,
                8% 42%,
                4% 42%,
                4% 61%,
                17% 61%,
                17% 12%,
                26% 12%,
                26% 63%,
                73% 63%,
                73% 43%,
                90% 43%,
                90% 67%,
                50% 67%,
                50% 41%,
                42% 41%,
                42% 46%,
                50% 46%,
                50% 84%,
                96% 84%,
                96% 78%,
                49% 78%,
                49% 25%,
                63% 25%,
                63% 14%);
    }

    90% {
        clip-path: polygon(0% 41%,
                13% 41%,
                13% 6%,
                87% 6%,
                87% 93%,
                10% 93%,
                10% 13%,
                89% 13%,
                89% 6%,
                3% 6%,
                3% 8%,
                16% 8%,
                16% 79%,
                0% 79%,
                0% 99%,
                92% 99%,
                92% 90%,
                5% 90%,
                5% 60%,
                0% 60%,
                0% 48%,
                89% 48%,
                89% 13%,
                80% 13%,
                80% 43%,
                95% 43%,
                95% 19%,
                80% 19%,
                80% 85%,
                38% 85%,
                38% 62%);
    }

    1%,
    7%,
    33%,
    47%,
    78%,
    93% {
        clip-path: none;
    }
}

.headlineBoxesRow {
    padding-top: 3%;
    display: flex;
    flex-flow: row wrap;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 3%;
    justify-content: space-evenly;
}

.headlineBox {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-self: center;
    width: 25%;
    background-color: rgba(118, 49, 150, 0.61);
    font-family: "JetBrains Mono", monospace;
}

.headlineBox>p {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-self: flex-start;
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 6%;
}

.headlineBox>h3 {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-self: flex-start;
    padding-left: 6%;
}

#postHeader {
    color: rgb(255, 159, 242);
}

#postHeader2 {
    color: rgb(255, 245, 159);
}

#blueHead {
    color: rgb(52, 105, 212);
}

#redHead {
    color: rgb(138, 0, 0);
}

.headlineBox>.headlineButton {
    width: 50%;
    padding: 3% 3%;
    margin-bottom: 5%;
    border-radius: 5px;
}

#green {
    margin-left: 25%;
    background-color: rgb(0, 138, 0);
    border-color: rgb(0, 138, 0);
    color: white;
    font-size: large;
    box-shadow: none;
    text-decoration: none;
    border-style: solid;
}

#red {
    margin-left: 25%;
    background-color: rgb(138, 0, 0);
    border-color: rgb(138, 0, 0);
    color: white;
    font-size: large;
    box-shadow: none;
    text-decoration: none;
    border-style: solid;
}

#blue {
    margin-left: 25%;
    background-color: rgb(52, 105, 212);
    border-color: rgb(52, 105, 212);
    color: white;
    font-size: large;
    box-shadow: none;
    text-decoration: none;
    border-style: solid;
}

.columnBoxes {
    margin-top: -8%;
    display: flex;
    flex-flow: row wrap;
    padding: 8% 8%;
    padding-bottom: 3%;
    justify-content: space-evenly;
}

.columnBoxes>.columnBox {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-self: center;
    width: 45%;
    padding-bottom: 5%;
    background-color: rgba(118, 49, 150, 0.61);
    font-family: "JetBrains Mono", monospace;
}

.columnBox>p {
    padding: 3% 3%;
}

.columnsButton {
    margin-left: 50%;
    width: 30%;
    padding: 2% 2%;
    margin-bottom: 5%;
    border-radius: 5px;
}

footer {
    color: #3f097e;
}


/* ------------------------------------ */
.sky {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    animation: sky infinite linear alternate;
    z-index: -1;
    overflow-x: hidden;
    overflow-y: hidden;
}

.star {
    will-change: transform;
    width: 0.1875rem;
    height: 0.1875rem;
    border-radius: 5px;
    background-color: #fff;
    opacity: 0.6;
    z-index: -1;
    box-shadow: 0 0 20px rgb(0, 153, 255);
}



@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 50% 50%;
    }

    100% {
        background-position: 100% 100%;
    }
}


@keyframes float {

    0%,
    100% {
        transform: perspective(1200px) rotateY(0) translateY(0);
    }

    50% {
        transform: perspective(1200px) rotateY(0) translateY(-5px);
    }
}



@media only screen and (max-width: 600px) {
    .navbutton {
        font-size: .6em;
    }

    .post {
        width: 90%;
        /* Adjust width for smaller screens */
    }

    .row {
        flex-direction: column;
        /* Stack items vertically on smaller screens */
    }

    .row>img {
        margin: 10px auto;
        /* Center the image on smaller screens */
    }
}