styles.css

:root, [data-theme = "dark"] {
    --primary: #31194bb2;
    --secondary: #31194bcb;
    
    --font-reg-color: #9d8b4b;
    --font-head-color: #F2BB05;
    --font-animation: rgb(253, 135, 198);
    --title-img-txt-color: #210f33ca;
    --title-img-text-font: monospace;

    --border-color: #8B8982;

    --title-bg: url("./resources/bg_dark.webp");
    --bg: url("./resources/bg_dark.webp");
}

[data-theme = "light"] {
    --primary: #bda05cb3;
    --secondary: #d4c297;

    --font-head-color: #130f07;
    --font-reg-color: #0e0c07;
    --font-animation: rgb(82, 162, 62);
    --title-img-txt-color: #121509d8;
    --title-img-text-font: serif;

    --border-color: brown;

    --title-bg: url("./resources/bg_light.jpg");
    --bg: url("./resources/bg_light.jpg");
}

.body_wrapper{
    margin: 0;
    background-image: var(--bg);
    background-repeat: no-repeat;   
    background-size: cover;
    backdrop-filter: blur(10px);

    display: flex;
    flex-wrap: wrap;

    min-height: 100vh;
    min-width: 100vw;
}

.body {
    animation: slide-in 2.5s cubic-bezier(0.19, 1, 0.22, 1) -0.1s 1;

    min-width: 400px;

    margin-top: 8vh;
    margin-left: 2%;
    width: 85vw;
}

@keyframes slide-in {
    0% {transform: translate(0, 100%); filter: blur(10px);}
    100%{transform: translate(0, 0); filter: blur(0px);}
}

.flex_bare{
    display: flex;
    justify-content: space-between;
    justify-content: center;
}

.flex_wrapper {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-between;
    background-color: var(--primary);

    border-style: solid;
    border-width: 4px;
    border-radius: 10px;
    border-color: var(--border-color);

    font-family: 'Courier New';
}

.navbar_wrapper {
    animation: navbar-slide 2.5s cubic-bezier(0.19, 1, 0.22, 1) -0.1s 1;

    border: none;
    margin-top: 8vh;
    padding: 0.8vh 0.8vw;
    
    justify-content: space-evenly;
    flex-direction: column;
    
    height: 80vh;
    min-width: 80px;

    font-family: monospace;
}

@keyframes navbar-slide {
    0% {transform: translate(-100%, 0);}
    100%{transform: translate(0, 0);}
}

.navbar_button{

    overflow: hidden;

    font-family: monospace;
    font-size: 100%;
    color: var(--font-reg-color);
    width: 5vw;
    height: 5vw;
    min-width: 100px;
    min-height: 50px;

    padding: 0;
    margin: 5% 0;

    border: solid var(--border-color) 2px;
    border-radius: 4px;

    background-color: var(--secondary);
}

.toggle_button{

    overflow: hidden;

    font-family: monospace;
    font-size: 100%;
    color: var(--font-reg-color);
    width: 5vw;
    height: 5vw;
    min-width: 100px;
    min-height: 50px;

    padding: 0;
    margin: 5% 0;

    border: solid var(--border-color) 2px;
    border-radius: 4px;

    background-color: var(--secondary);
}

.navbar_button:hover {
    background-color: var(--primary);   
    cursor: pointer;
    transition-duration: 0.2s;
}

.title_image {
    font-size: large;
    font-style:italic;
    font-family: var(--title-img-text-font);
    color: var(--title-img-txt-color);
    
    background-image: var(--title-bg);
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-position: left top;
    height: 450px;
    width: 50vw;
    
    padding: 2%;
    margin: 5% 0;
    margin-left: 4%;

    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: var(--border-color);
}

.title_text {
    font-size: calc((1vw + 100%) / 2);
    color: var(--font-head-color);
    text-wrap: wrap;

    max-width: 40%;
    
    padding: 5%;
    margin: 3% 0;
}

.main_title {
    animation: fancy_stuff 2s linear 0s infinite;

    font-size: 5vw; 
    font-variant: small-caps;
}

@keyframes fancy_stuff {
    0% {color: var(--font-head-color);}
    50% {color: var(--font-animation);}
    100% {color: var(--font-head-color);}
}

.paragraph_wrapper {
    flex-direction: row;
    
    padding: 3%;

    flex-wrap:wrap;
}

.blog_wrapper {
    flex-wrap: nowrap;
}

.blog_content {
    border: solid var(--border-color) 2px;
    border-radius: 2px;
    padding: 1vw;
    margin-right: 1vw;
}

.paragraph_sub_heading {
    font-weight: 200;
    font-size: 130%;
    color: var(--font-head-color);

    width: 70vw;
}

.paragraph_heading {
    font-weight: 800;
    font-size: 150%;
    color: var(--font-head-color);

    max-width: 55vw;
}

.blog_heading {
    max-width: 55vw;
}

.paragraph_blog_text {
    max-width: 55vw;
    font-size: smaller;
    color:var(--font-reg-color);
}

.paragraph_text {
    color:var(--font-reg-color);
}

.list {
    font-weight: 600;
    font-size: larger;
}

.blank_space{
    width: 40vw;
}

.likes {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    border: solid var(--border-color) 2px;
    border-radius: 2px;
    padding: 2%;
    padding-left: 1vw;
    margin: 2%;
}

.like_box {
    height: 2vw;
    width: 2vw;
    margin: 1vw;
}

.side_wrapper {
    width: 20vw;
    padding: 1vw;
}

.comment_box {
    padding: 1%;
    margin: 1%;
}

.limited_width{
    max-width: 65%;
}

.image_box{
    width: 20vw;
    height: 20vw;

    border-style: solid;
    border-color: var(--border-color);
    border-width: 4px;
    border-radius: 4px;
}

hr {
    width: 50%;
    
    margin-top: 2%;
    margin-bottom: 2%;

    border-color: var(--border-color);
}

.logo {
    filter: drop-shadow( 2px 2px 1px rgba(0, 0, 0, .7));

    height: 4vh;
    width: auto;
    border: none; 
    background: none; 
    margin: 2%;
}