@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

#body {
    background-color: rgb(20, 20, 20);
}

.navbar-itemE {
    background: rgba(0, 234, 255, 0);
    color: rgb(255, 255, 255);
    padding: 1.5vw 3vw;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    justify-content: space-around;
    font-size: 1.35vw;
    border: 0.21vw solid rgb(225, 225, 225);
    flex-wrap: wrap;
    font-family:sans-serif;
    width: 7.5vw;
}
.navbar-itemE:hover {
    background: rgba(0, 145, 255, 0.182);
    color: rgb(226, 226, 226); 
    padding: 1.5vw 3vw;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    justify-content: space-around;
    font-size: 1.35vw;
    border: 0.21vw solid rgb(225, 225, 225);
    flex-wrap: wrap;
    font-family:sans-serif;
    width: 7.5vw;   
}

#navbar2 {
    display: flex;
    position: relative;
    flex-direction: row;
    gap: 1vw;
}

#header-container {
    height: 30vw;
    width: 100%;
    background-image: none;
}

#pageTitle-container {
    display: flex;
    text-align: center;
    margin-top: 14vw;
    margin-left: 10vw;
}

#contentBox {
    /* background-color: rgba(0, 22, 36, 0.65); */
    padding-bottom: 3vw;
    padding-top: 3vw;
    padding-left: 3vw;
    padding-right: 3vw;
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: auto;
    padding-left: 7vw;
    padding-right: 7vw;
    margin-top: 0.2vw;

    border: .2vw solid rgb(178, 178, 178);
}

#welcome-wrapper {
    background-color: black;
    height: 6.5vw;
    display: flex;
    margin: 0 auto;
    width: 60vw;
    justify-content: center;
    align-self: center;
}

#about-container {
    margin-top: 6.7vw;
    /* margin-left: 13.4vw; */
}

#about2-container {
    margin-top: 6.7vw;
    /* margin-left: 13.4vw; */
    max-width: 55vw;
}

#recentstuff-section {
    margin-top: 8vw;
}

.recentThing {
    border: 2px solid rgb(221, 221, 221);
    height: 15vw;
    margin-top: 5vw;
    display: flex;
}

#item1 {
    display: flex;
    flex-direction: row;
    height: 7vw;
    align-items:center;
    width: fit-content;
}

#item2 {
    margin-left: 13.4vw;
}

#dragWindow2 {
    margin-top: 5vw;
}

.footer {
    display: flex;
    align-items: stretch;
    gap: 2vw;
    justify-content: center;
    margin-top: 6.7vw;
    background: black;
    width: 100%;
    height: 14.7vw;
    margin-bottom: 0%;
}

#sm-links-container {
    display: flex;
    align-items: stretch;
    gap: 3.4vw;
}

/*h1 and other text elements*/

#h1-fusebie {
    font-size: 3.7vw;
    color: rgb(20, 20, 20);
    text-shadow: -1px -1px 0 rgb(255, 255, 255), 1px -1px 0 rgb(255, 255, 255), -1px 1px 0 rgb(255, 255, 255), 1px 1px 0 rgb(255, 255, 255);
    margin-left: 2.6vw;
    margin-top: 5vw;
    font-family: monospace;
    /* margin-top: 16vw; */
}

#headerbackgroundlink {
    margin-left: 35vw;
    height: max-content;
    margin-top: 7vw;
}

#h2-headerbackgroundlink {
    font-family: monospace;
    color: rgba(0, 0, 0, 0);
    text-decoration: none;
    font-size: 1.2vw;
}

#h2-headerbackgroundlink:hover {
    font-family: monospace;
    color: rgb(225, 225, 225);
    text-decoration: none;
    font-size: 1.2vw;
}

#h2-welcome {
    font-size: 1.5vw;
    font-family: "Roboto Mono", monospace;
    color:rgb(62, 217, 222);
    text-align: left;
    margin-left: 1.4vw;
    letter-spacing: 1px;
}
.p-WID {
    font-family: 'Courier New', Courier, monospace;
    font-size: 40px;
    color:rgb(225, 225, 225);
    text-align: center;
}

.h1-about {
    color: rgb(0, 235, 252);
    font-family: "Roboto Mono", monospace;
    font-size: 2.5vw;
}

.h1-about2 {
    color: rgb(0, 235, 252);
    font-family: "Roboto Mono", monospace;
    font-size: 2.5vw;
}

#h1-recentstuf {
    color: rgb(203, 187, 0);
    font-family: monospace;
    background-color: black;
    padding: 0.8vw;
    width: 17vw;
    font-size: 2.1vw;
}

.h1-RecentThingTitle {
    /* color: rgb(229, 229, 229); */
    font-family: monospace;
    margin-left: 2vw;
    font-size: 1.7vw;
}

.postShortDesc {
    color: rgb(229, 229, 229);
    font-family: sans-serif;
    letter-spacing: 0.1vw;
    margin-left: 2vw;
    font-size: 1vw;
    
}

#h1-SocialMedia {
    font-family: monospace;
    font-size: 2vw;
    color: rgb(0, 217, 255);
    text-align: center;
}
.h1-intro {
    font-family: monospace;
    font-size: 1.7vw;
    color: rgb(225, 225, 225);
}

.p-about1 {
    font-family: "Roboto Mono", monospace;
    font-size: 1.2vw;
    color: rgb(225, 225, 225);
}

.p-about {
    font-family: "Roboto Mono", monospace;
    font-size: 1.2vw;
    color: rgb(225, 225, 225);
    width: 40vw;
    height: 10vw;
}
.i-have-no-idea-what-this-is {
    color: rgb(225, 225, 225);
    font-size: 1vw;
}

/* images */

#fusebie {
    height: 25vw;
    /* margin-left: 12vw; */
    clip-path: ellipse(41% 40% at 50% 14.7vw);
}

#songCoverImg {
    margin-left: 0.5vw;
    margin-top: 0.8vw;
    border-radius: 0.7vw;
    max-height: 13.5vw;
}

#catGameIcon {
    margin-left: 0.5vw;
    margin-top: 0.8vw;
    border-radius: 0.7vw;
    max-height: 13.5vw;
}

.smlink-logo-img {
    height: 3.4vw;
}
#soundcloud-logo-img {
    height: 3.9vw;
}
#github-logo-img {
    background-color: rgb(225, 225, 225);
    height: 3.4vw;
    border-radius: 50%;
}

.pageLinkIconImg {
    height: 7vw;
    width: 7vw;
}