:root {
    --white: white;
    --darkblue: #021859;
    --lightblue: #0442BF;
    --lightyellow: #F2B705;
    --darkyellow: #BF7315;
    --red: #FBB6B6;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Background Styles */
.citybg {
    background-image: url('../images/bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gridbg {
    background-image: url('../images/GridSynth.png');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

.mainbodybg {
    background-color: #282457;
}

.my2025sofar {
    background-color: var(--lightblue);
}

.my2025sofarhr {
    opacity:100%;
    width: 100%;
    border: 2px solid var(--lightyellow);
}

/* Text and Styling */
.lightyellowtext {
    color: var(--lightyellow);
}

.redtext {
    color: var(--red);
}

.whitebg {
    background: var(--white);
    color: var(--darkblue);
    border-radius: 8px;
    padding: 1rem;
}

.profilepic {
    width: 200px;
    height: 200px;
}

.namehr {
    margin:auto;
    opacity:100%;
    width: 150px;
    border: 1px solid var(--lightyellow);
}
.namehr1 {
    
    opacity:100%;
    width: 150px;
    border: 1px solid var(--lightyellow);
}

footer {
    background-color: var(--red);
}

/* Fonts */
@font-face {
    font-family: 'Norwester';
    src: url('../fonts/norwester.otf') format('opentype');
}

@font-face {
    font-family: 'CreatoDisplayMedium';
    src: url('../fonts/CreatoDisplay-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'CreatoDisplayLight';
    src: url('../fonts/CreatoDisplay-Light.otf') format('opentype');
}
@font-face {
    font-family: 'CreatoDisplayLight';
    src: url('../fonts/CreatoDisplay-Light.otf') format('opentype');
}
@font-face{
    font-family:'CascadiaCode';
    src: url('../fonts/CascadiaCode.ttf') format('opentype');
}

.cascadiacode{
    font-family:'CascadiaCode';
}
.norwester {
    font-family: 'Norwester';
}

.creatodisplayL {
    font-family: 'CreatoDisplayLight';
}

.creatodisplayM {
    font-family: 'CreatoDisplayMedium';
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .profilepic {
        width: 150px;
        height: 150px;
    }

    .aboutmeparagraph {
        padding: 1rem;
    }
}
.navbarbg{
    background-color: var(--darkblue);
}
.whitetext{
    color:white;
}
.yellowbg{
    background-color:var(--darkyellow);
}

@media only screen and (max-width: 574px) {
    .namehr1 {
        margin:auto;
        opacity:100%;
        width: 150px;
        border: 1px solid var(--lightyellow);
    }
}