body {
    background-image: linear-gradient(#176161, #0C7DB9, #A0E0FB, #0C7DB9, #B3E9FC);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Arial, sans-serif;
    color: #C2EFFB;       
    font-style: italic;  
    opacity: 60%;        
}

/* I did minimal adjusments and fixed some errors*/
div {
    background: rgba(39, 39, 39, 0.20); 
    backdrop-filter: blur(5px);         /* blur values must be in parentheses */
    padding: 10px;
}



/* Navigation bar */
ul {
    list-style-type: none;
    margin: 0 0 20px 0;
    padding: 0;
    overflow: hidden;
    background-color: #2F5377;
}

ul li {
    float: left;
}

ul li a {
    display: block;      
    color: #1895CF;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* hover effect!*/
ul li a:hover {
    background-color: #2A2B43;
    color: #A0E0FB;
}

a {
    color: #A0E0FB;
    background-color: #2A2B43; 
    font-weight: bold;
}



/* Main layout using Flexbox */
.container {
    display: flex;
    flex-wrap: wrap;

    background: none;
    backdrop-filter: none;
    padding: 0;

    margin: 20px; /* Adjusts spacing outside the container */
    gap: 20px;    /* Space between sidebar and main section */
}

/* Sidebar */

.side {
    flex: 1;/* flex controls how much space each section takes inside the container like flex: 1 = 1 portion of available space */
    min-width: 250px;
    background-color: #2A2B43;
    padding: 20px;
    box-sizing: border-box;
}

/* Main content */
.main {
    flex: 3;/* flex: 3 = 3 portions of available space -- This makes the main section wider than the sidebar */
    min-width: 300px;
    background-color: #2A2B43;
    padding: 20px;
    box-sizing: border-box;
}

footer {
    padding: 20px;
    text-align: center;
    color: #002d42;
}



/* This hides the scroll bar (u can remove this if u wanna keep it tho, i just thought its a lil ugly to leave it there ;-;*/
::-webkit-scrollbar {
    display: none;
}

<html lang="en">
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>weaponiza's webpage!!</title> <!-- title only changes the browser tab name -->
    <link rel="stylesheet" href="style.css"> <!-- this connects the style.css file -->

    <h1>weaponiza's webpage!!</h1> <!-- Usually we dont use titles and simply use h1 for the main title of the page!-->
    
    <!-- Nav bar-->
    <ul>
        <li><a href="https://weaponiza.tumblr.com">TUMBLR</a></li>
        <li><a href="https://instagram.com/weaponiza/">INSTAGRAM</a></li>
        <li><a href="https://characterhub.com/profile/weaponiza/">CHARACTERHUB</a></li>
    </ul>

    <!-- I hope you don't mind me tidying it up -->
    
    <div class="container"> <!-- In HTML class="" we write the name only! The dot (.) is only used in css selectors -->
        
        <div class="side">
            <p>hi, i'm jam/iza!</p>
            <p>18 / fil / any pronouns</p>
            <p>passion for tv, movies, music & art~</p>

            <h3>INTERESTS</h3>   <!-- h3 works better for section titles than manually styling normal text -->
            
            <p>
                artists: twenty one pilots, oklou, the white stripes,
                ninajirachi, underscores, masayoshi takanaka, porter
                robinson, pinkpantheress, lamp, toe, sasanomaly, uchu
                conbini, billie eilish, molchat doma, caroline polachek,
                vocaloid, utau, ado, jamiroquai
            </p>

            <p>
                shows: supernatural, doctor who, pluribus, severance,
                takin' over the asylum, around the world in 80 days,
                good omens, spider-noir, dirk gently's holistic
                detective agency
            </p>

            <p>
                games: honkai star rail, genshin impact, colorful stage,
                style savvy, reverse 1999, afk journey, persona
                franchise, dungeons & dragons
            </p>

            <p>
                miscellanous: collecting cds, hats, fashion, drawing,
                writing, historical aesthetics
            </p>
        </div>

        <div class="main">
            <h3>WHAT THE HEY IS THIS ABOUT?</h3>
            <p>
                this is my first time creating an actual personal
                website. i really tried using website makers that
                already had pre-made assets, but it didn't really work
                out for me that much. i sucked at making layouts and i
                didn't really have a solid idea i could reference from.
                either way, that was a personal error.
            </p>
            <p>
                until i learned people CODED their websites. i always
                found coding overwhelming, but once i understood the
                process i found myself enjoying it. (it also made me
                feel like doing computer class assignments, which is a
                bit nostalgic.) i don't know what to turn this website
                into, but i would like to use this as an outlet for my
                creativity!! sure i have social media for everyone to
                see, but i think having a website of my own feels very
                personal and excites me even more. i also enjoy doing
                things manually. i think. sometimes.
            </p>
            <p>
                lastly, i feel like i have established a sense of
                freedom and accomplishment while making this. if i DID
                manage to publish this and you get to see this, that
                means i've done it and i'm completely very proud of it!
                if you'd like to stick around for a while, thank you
                very much for visiting, and i hope you like it!
            </p>
        </div>
    </div>

    <!--Put footer outside the div box/class-->
    <footer>
        <h2>footer</h2>
    </footer>
</body>
</html>