:root {
    /* RED VALUES */

    --accent: #BF616A; 
    --charcoal: #3B4252;
    --text: #D8DEE9;
    --text-tp: #D8DEE9aa;
    --white-red: #FFE3E6;
    --bg: #2E3440; 
    --t-bg: #191a1dbb; 

    

    --current-bg: var(--red-bg);
}

#content {
    width: 100%;
    margin-top: -6vh;
    
}

/*              Major Sections              */

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg);
    overflow-x: hidden;
}

.footer {
    background-color: var(--charcoal);
    width: 100%;
    padding-top: 2vw;
    padding-bottom: 2vw;
    height: auto;
}

#navbar {
    background-color: var(--t-bg);
    box-sizing: border-box;
    height: 6vh;
    width: 100%;
    padding: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    justify-content: space-between;
    box-shadow: 5px 0 10px #00000033;
}

.card {
    backdrop-filter: blur(5px);
    transition: all 0.25s ease-in-out;
    width: 100%;
    height: 12vh;
    background-image: url(assets/lander.jpg);
    background-position: center;
    background-size: cover;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.card:hover {
    transition: all 0.25s ease-in-out;
    backdrop-filter: blur(0px);
}

.landhero {
    display: flex;
    width: 100%;
    height: 85vh;
    background-image: url(assets/pageheaders/lander.jpg);
    background-position: center;
    background-size: cover;
    align-items: center;
    justify-content: center;
}

.fade-in-bg {
    overflow: hidden;
    transition: all 0.5s ease-out;
    opacity: 0;
    filter: blur(10px);
}
.fade-in-bg.loaded {
    opacity: 1;
    filter: blur(0px);
}

.abouthero {
    display: flex;
    width: 100%;
    height: 70vh;
    background-image: url(assets/pageheaders/about.jpg);
    background-position: center;
    background-size: cover;
    align-items: center;
    justify-content: center;
}

.hobbyhero {
    display: flex;
    width: 100%;
    height: 70vh;
    background-image: url(assets/pageheaders/blog.jpg);
    background-position: center;
    background-size: cover;
    align-items: center;
    justify-content: center;
}

.journalhero {
    display: flex;
    width: 100%;
    height: 70vh;
    background-image: url(assets/pageheaders/journal.jpg);
    background-position: center;
    background-size: cover;
    align-items: center;
    justify-content: center;
}

.yap {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 5vh;
    overflow: hidden;
}

/*              Specific Formatting                 */

.img {
    display: block; /* Prevent extra spacing below the image */
    max-width: 100%; /* Image cannot exceed the width of its container */
    max-height: 100%; /* Image cannot exceed the height of its container */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Maintain aspect ratio */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    object-fit: contain;
}
.img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px #00000033;
    transition: all 0.2s ease-in-out;
}

#branding {
    display: flex;
    flex-direction: row;
    height: auto;
    width: auto;
    align-items: center;
    justify-content: left;
}

#links {
    height: auto;
    width: auto;
    align-items: center;
    justify-content: end;
    

}

#links a {
    transform: rotate(-90deg);
}

#navbar-logo {
    height: 5vh;
}

.card.robotics {
    background-image: url(assets/robotics.jpg);
}
.card.gaming {
    background-image: url(assets/gaming.png);
}
.card.editing {
    background-image: url(assets/editing.png);
}

.blogcard {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 5vh;
    background-position: center;
    background-size: cover;
}

.blogcard.polybius {
    background-image: url(assets/blog/polybius.jpg);
}

/*              Basic Formatting                */

.centered {
    align-items: center;
    text-align: center;
}

.right-align {
    justify-content: right;
}




/*              Text effects                */

.jetbrains-mono.title {
    color: #000000aa;
    font-size: xx-large;
    mix-blend-mode:hard-light;
}

.jetbrains-mono.light {
    color: #D8DEE9aa;
}
.jetbrains-mono.dark {
    color: #000000aa;
}

a {
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

a:hover {
    text-decoration: none;
    font-weight: 700;
    color: var(--accent);
    transition: all 0.2s ease-in-out;
}

.shadow {
    font-size: 40px;
    padding: 10px;
    border-radius: 10px;
    background: var(--red-t-bg); 
    backdrop-filter: blur(5px); 
    display: inline-block; 
}

.jetbrains-mono {
    font-family: "JetBrains Mono", system-ui;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: var(--text);
    transition: all 0.2s ease-in-out;
}

.ibm-plex-mono {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: normal;
    color: var(--text);
}
.ibm-plex-mono-italic {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: italic;
    color: var(--text);
}
.fine {
    font-weight: 400;
    font-style: italic;
    color: var(--text-tp);
}


/*              Padding             */

.rightpad {
    padding-right: 1vw;
}

.rightpad-medium {
    padding-right: 3vw;
}

.leftpad {
    padding-left: 1vw;
}

.leftpad-medium {
    padding-left: 3vw;
}

.toppad {
    padding-top: 1vh;
}

.bottompad {
    padding-bottom: 1vh;
}

/* TEXT FORMATTING */

.baskerville {
    font-family: "Libre Baskerville", serif;
    color: var(--text);
    font-size: medium;
}
  

.paragraph {
    transition: all 0.2s ease-in-out;
    font-family: "Libre Baskerville", serif;
    color: var(--text);
    max-width: 70%;
    font-size: medium;
    text-indent: 40px;
    line-height: 2;
}
.fine a {
    transition: all 0.2s ease-in-out;
    font-family: "Libre Baskerville", serif;
    text-decoration: underline;
    color: var(--accent);
}
.fine a:visited {
    transition: all 0.2s ease-in-out;
    color: var(--white-red);
}
.paragraph a {
    transition: all 0.2s ease-in-out;
    font-family: "Libre Baskerville", serif;
    text-decoration: underline;
    color: var(--accent);
}
.paragraph a:visited {
    transition: all 0.2s ease-in-out;
    color: var(--white-red);
}

#polybiusTitle {
    aspect-ratio: 255/302;
    width: 25%;
}
#declassifiedMK {
    aspect-ratio: 553/713;
    width: 25%;
}
#smb3 {
    aspect-ratio: 400/545;
    width: 25%;
}
#polybiusCabinet {
    aspect-ratio: 446/1,002;
    width: 25%;
}
.stamp {
    width: auto;
    max-height: 50vh;
   
}
.fine {
    font-family: "Libre Baskerville", serif;
    color: var(--text-tp);
    font-size: small;
}
.break {
    padding-top: 5vh;
    padding-bottom: 5vh;
}
.break-top {
    padding-top: 5vh;
}
.break-bottom {
    padding-bottom: 5vh;
}

/*              Webkit: scrollbar effects and such              */

::-webkit-scrollbar {
    width: 1vw;
    padding: 0.2vw;
    background-color: #222222;
}

::-webkit-scrollbar-thumb {
    transition: all 0.2 ease-in-out;
    border-radius: 500px;
    background-color: #333333;
}

::-webkit-scrollbar-thumb:hover {
    transition: all 0.2 ease-in-out;
    background-color: #444444;
}

/* Journal entries */

.entries {
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    flex-direction:row;
    flex-wrap: wrap;
    padding: 5vh;
    gap: 5vh;
}

.entrycard {
    width: 30vh;
    height: 30vh;
    border-radius: 30px;
    padding: 30px;
    box-shadow: inset 0 0 0 5px #00000033;
    align-items: center;
    justify-content: center;
}
.entrycard.date {
    color: #000000aa;
}

.entrycard.polybius {
    background-image: url(assets/blog/polybius.jpg);
    background-position: center;
    background-size: cover;
}

.entrycard.thanksgiving {
    background-image: url(assets/pageheaders/thanksgiving.jpg);
    background-position: center;
    background-size: cover;
}

.entrycard.senna38 {
    background-image: url(assets/photography/sennaMCL38/5.png);
    background-position: center;
    background-size: cover;
}

.entrycard.sennasempre {
    background-image: url(assets/photography/sennasempre30anos/6.png);
    background-position: center;
    background-size: cover;
}

/* Styles for small screens (e.g., mobile) */
@media screen and (max-width: 1000px) {
    .desktop {
      display: none; 
    }
    .paragraph {
        max-width: 100%;
    }
    .paragraph.img {
        max-width: 100%;
    }
    #polybiusTitle {
        aspect-ratio: 255/302;
        width: 100%;
    }
    #declassifiedMK {
        aspect-ratio: 553/713;
        width: 100%;
    }
    #smb3 {
        aspect-ratio: 400/545;
        width: 100%;
    }
    #polybiusCabinet {
        aspect-ratio: 446/1,002;
        width: 100%;
    }


  }