body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    color: #000000;
    line-height: 1.6;
}

/* Navigation bar */
.nav {
    background-color: #1a73e8;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#addon-icon {
    margin-left: 4rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

#brand {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#brand-names {
    margin-left: 1rem;
}

.add-on-title {
    font-size: 1.7rem;
    font-weight: bold;
    color: whitesmoke;
}

.author-name {
    font-size: 0.9rem;
    color: whitesmoke;
    margin-bottom: 0.5rem;
}

.top-div {
    margin-top: 0.5rem;
}

.top-menu {
    margin-right: 2rem;
    text-decoration: none;
    color: whitesmoke;
    font-size: 1.4rem;
}

.top-menu:hover {
    font-weight: bolder;
}

/* Stylized banner under nav */
#banner {
    background-color: #000000;
    color: whitesmoke;
    text-align: center;
    font-family: Consolas, serif;
    font-size: 5.0rem;
    font-weight: bold;
    padding: 3rem;
    letter-spacing: 1px;
    box-shadow: 0 2px 4px rgba(20, 20, 20, 10);
}

.stylized-t {
    color: #ac00c6;
}

#store-link {
    color: Whitesmoke;
    text-decoration: none;
}
#store-link:hover {
    text-decoration: underline;
}

/* Main content */
main {
    max-width: 60vw;
    margin: 2rem auto;
    padding: 0 1rem;
}

#app-home {
    max-width: 67vw;
}

#example-use-cases {
    display: flex;
    flex-direction: row;
}

#example-images {
    display: flex;
    flex-direction: column;
    width: 25%;
    height: 50%;
}

.ex-images {
    margin: 1rem;
}

.title {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.code {
    background-color: #efefef;
    font-family: Consolas, monospace;
    font-size: 95%;
}

#formula {
    background-color: #fffd61;
    font-family: Times New Roman, serif;
    font-size: 110%;
}

#question-styling {
    color: #00aa55;
    font-style: italic;
    text-decoration: underline;
}

#todo-styling {
    color: #ff0000;
    font-weight: bold;
}

footer {
    background-color: #1a73e8;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 0 6px rgba(26, 115, 232);
}

#footer-text-section {
    display: flex;
    flex-direction: column;
    margin: 0 0 0 7.5rem;
}

#footer-h3 {
    color: whitesmoke;
    font-size: 1.4rem;
    margin-left: 4.5rem;
    margin-right: 0.5rem;
}

.footer-text {
    color: whitesmoke;
    font-size: 1.1rem;
    margin: 0.2rem;
}

.footer-link {
    color: #abebff;
    font-size: 1.1rem;
}

.linkedIn-footer-logo {
    width: 2.5rem;
    height: 2rem;
    margin-left: 0.4rem;
    margin-right: 0.1rem;
}

.github-footer-logo {
    width: 2.5rem;
    height: 2.5rem;
}

.footer-logo-div {
    background-color: whitesmoke;
    border-radius: 30%;
    padding: 0.2rem;
    margin-right: 0.5rem;
    margin-left: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dev-page {
    padding: 1rem 0;
}

/* Two-column layout that collapses on small screens */
.dev-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    align-items: start;
}

@media (max-width: 900px) {
    .dev-grid {
        grid-template-columns: 1fr;
    }
}

.dev-photo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dev-img {
    width: 80%;
    aspect-ratio: 1 / 1;
    border-radius: 10%;
}

.dev-orgs {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.orgLogos {
    width: 4rem;
    height: 4rem;
}

.dev-bio {
    padding-bottom: 2rem;
}

/*@font-face {*/
/*    font-family: "JetBrains Sans";*/
/*    src: url("fonts/JetBrainsSans-Regular.woff2");*/
/*}*/

/*@font-face {*/
/*    font-family: "JetBrains Mono";*/
/*    src: url("fonts/JetBrainsMono-Regular.woff2");*/
/*}*/

/*:root {*/
/*    font-family: "JetBrains Sans", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;*/
/*    font-weight: 300;*/
/*    color: rgba(255, 255, 255, 0.87);*/
/*    background-color: #000000;*/
/*    text-align: center;*/
/*}*/

/*body {*/
/*    margin: 0;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: space-between;*/
/*    min-width: 320px;*/
/*    min-height: 100vh;*/
/*    align-items: center;*/

/*    background-image: url("background.svg");*/
/*    background-repeat: no-repeat;*/
/*    background-size: contain;*/
/*}*/

/*h1 {*/
/*    font-size: 29px;*/
/*    line-height: 39px;*/
/*    font-weight: 300;*/
/*}*/

/*.title {*/
/*    margin-bottom: 40px;*/
/*}*/

/*#app {*/
/*    max-width: 1280px;*/
/*}*/

/*.logo {*/
/*    margin-top: 45px;*/
/*    margin-left: 20%;*/
/*    align-self: flex-start;*/
/*}*/

/*img {*/
/*    max-width: 100%;*/
/*    height: auto;*/
/*}*/

/*.counter {*/
/*    font-family: "JetBrains Mono", Inter, system-ui, sans-serif;*/
/*    font-weight: 400;*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    justify-content: center;*/
/*    padding: 60px;*/
/*    color: rgba(255, 255, 255, 1);*/
/*}*/

/*.counter-interaction {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    flex-wrap: wrap;*/
/*    gap: 20px 0;*/
/*    width: 470px;*/
/*    justify-content: space-between;*/
/*}*/

/*.counter-interaction button {*/
/*    width: 48%;*/
/*    height: 47%;*/
/*    align-content: space-between;*/
/*    border: 1px solid rgba(255, 255, 255, 0.3);*/
/*    border-radius: 120px;*/
/*    font-size: 68px;*/
/*    text-align: center;*/
/*}*/

/*.counter-interaction button:nth-child(2n+1) {*/
/*    margin-right: 14px;*/
/*}*/

/*.counter-interaction button:disabled {*/
/*    color: rgba(255, 255, 255, 0.5);*/
/*    background-image: none;*/
/*    border-color: inherit;*/
/*}*/

/*.counter-info {*/
/*    width: 360px;*/
/*    height: 345px;*/
/*    margin-right: 27px;*/
/*    border: 1px solid rgba(255, 255, 255, 0.3);*/
/*    background-color: rgba(25, 25, 28, 0.5);*/
/*    border-radius: 29px;*/
/*}*/

/*.counter-text {*/
/*    text-transform: uppercase;*/
/*    font-weight: 500;*/
/*    font-size: 24px;*/
/*    margin-top: 60px;*/
/*    margin-bottom: 28px;*/

/*}*/

/*.counter-value {*/
/*    font-weight: 200;*/
/*    font-size: 170px;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    line-height: 1;*/
/*}*/