a {
text-decoration: none;
}

.topbar-item a {
color: #ffffff;
}

body{
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
    width: 100%;
    background: #000000;
    color: #fff;
    text-align: center;
    padding: 2vw 0;
    overflow-x: hidden;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.footer-item {
    padding: 15px;
}

.footer-item h3 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: #fff;
}

.footer-item p {
    margin: 5px 0;
    font-size: 0.9rem;
    color: #ccc;
}

.footer-item a {
    color: #83bdc8;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-item a:hover {
    text-decoration: underline;
}

.footer-copyright {
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
    border-top: 1px solid #333;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 10px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .footer-item {
        padding: 10px 5px;
        word-break: break-word;
    }
    
    .footer-item a {
        word-break: break-all;
        font-size: 0.8rem;
    }
    
    footer {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow-x: hidden;
    }
}

.Keeping-it-Real-by-Making-it-Teal-project{
background-color: #83bdc8;
color: #ffffff;
}

.belonging-project {
    background: #ffffff;
    width: 100%;
    height: 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.belonging-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8vw;
    width: 100%;
    height: 100%;
}

.logo-belonging {
    height: 5vw;
}

.belonging-logo {
    height: 8vw;
    max-width: 60%;
}

.timeline-project {
    background-color: #b9dec4;
    color: #ffffff;
    width: 100%;
    height: 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}



.timeline-title {
    -webkit-text-stroke: .15vw black;
font-size: 4.5vw;
font-weight: bold;
text-align: center;
margin-top: 0vw;
}

.arrow-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow {
    width: 60vw;
    height: auto;
}

.timeline-image {
    height: 4vw;
    max-width: 80%;
}

.content-wrapper{
    padding: 2vw;
    background-color: #f2eee5;
}
.content{

    margin: 2.5vw;
padding: 2.5vw;
background-color: #ffffff;

}
.teal-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    width: 100%;
    height: 100%;
}

.pixelgrid-project{
    background-color: #ffffff;
    color: #000000;
    width: 100%;
    height: 10vw;
}


.pixelgrid-logo-container{
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-items: center;
    width: fit-content;
    margin-left: auto;
    padding: 1vw;
    margin-right: auto;
}
.pixelgrid-logo{
    display: grid;
}
.pixelgrid-title{
    display: grid;


}
.pixelgrid-logo img{
width: 8vw;
}
.pixelgrid-title img{
  width: 35vw;
    
}
.logo-flex{
    display: flex;
    gap: 2vw;
}
.social-nav{
    padding: 1vw;
    text-align: center;
    background-color: #000000;
    display: grid; 
    grid-template-columns: auto auto auto auto auto auto auto auto;
}
.about-me{
   background-color: #deb9c1;
}
.social-nav a{
    
color: #ffffff;

}
.projects{
    text-align: center;
}
.project-title{
    background-color: #c58794;
    color: #ffffff;
}
.profile-grid{
    width: 100%;
    justify-content: space-evenly;
    gap: 12vw;
    display: grid;
    grid-template-columns: auto auto;
}
p{
    margin-block-start: 0;
margin-inline-start: 0;
margin-bottom: 0;
}
h1{
    margin-block-end: 0;
margin-block-start: 0;
}
.full-sail-logo {
margin: 0vw 0vw -.5vw;
width: 25vw;
}
.libra-icon {
width: 2.75vw;
padding-left: .75vw;
}
.profile-bio h1{
    padding-bottom: 1.5vw;
}

@media screen and (max-width: 500px) {
    .timeline-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0vw;
}
                .belonging-project {
    background: #ffffff;
    width: 100%;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
}


.timeline-project {
    background-color: #b9dec4;
    color: #ffffff;
    width: 100%;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .belonging-logo {
height: 8vw;
max-width: 45%;
}
    .logo-belonging {
        height: 5vw;
    }
.topbar a {
font-size: 3.5vw;
}
    .teal-title{
        font-size: 4vw;
    }
    .bluesky img {
width: 3.5vw;
}
    .teal-flex-center {
        gap: 2vw;
    }
    .cancer-ribbon{
        width: 3.5vw
    }

    .Keeping-it-Real-by-Making-it-Teal-project{
width: 100%;
height: 10vw;
font-size: 5vw;
}
.homepage h1 {
font-size: 4vw;
padding-top: 1.66vw;
padding-bottom: 1.66vw;
}
.content {
margin: 2.5vw;
padding-bottom: 2.5vw;
padding-left: 2.5vw;
padding-top: .75vw;
padding-right: 2.5vw;
background-color: #ffffff;
}
.homepage h2 {
font-size: 3.33vw;
margin-block-end: 0;
margin-block-start: 0;
padding-top: 1.25vw;
padding-bottom: 1.25vw;
}
.homepage ul{
    margin-block-end: 0;
margin-block-start: 0;
padding-bottom: 1.75vw;
font-size: 3vw;

}
.homepage p{
font-size: 3vw;
}

    .about-me{
    padding-top: 10vw;
    padding-bottom: 10vw;
}
    h1{
    font-size: 6vw;

}
p {
font-size: 2.75vw;
line-height: 4.75vw;
}

.profile-bio {
width: 50vw;
font-size: 3vw;
line-height: 4vw;
}

    .projects {
text-align: center;

}
.project-title {
padding-top: 2vw;
padding-bottom: 2vw;
}
img.profile-picture {
display: flex;
width: 80%;
margin: 0 auto;
margin-left: 10vw;
}


#profile-name {
margin-top: 3.5vw;
margin-bottom: .5vw;
}
   .social-nav {
font-size: 3.5vw;
margin-top: 11vw;
}
   .topbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    position: fixed;
    background-color: #000000;
    color: #FFFFFF;
    width: 100%;
    height: auto;
    padding: 3vw;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
}
.topbar-item {
    box-sizing: border-box;
    text-align: center;
}
.logo-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.logo {
    width: 5.75vw;

}
.title {
    width: 7vw;

}
.full-sail-logo {
margin: 0vw 0vw -.8vw;
width: 30vw;
}
}
@media screen and (min-width: 501px) and (max-width: 600px) {
    .timeline-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0vw;
}
                .belonging-project {
    background: #ffffff;
    width: 100%;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
}


.timeline-project {
    background-color: #b9dec4;
    color: #ffffff;
    width: 100%;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .belonging-logo {
height: 8vw;
max-width: 45%;
}
    .logo-belonging {
        height: 5vw;
    }
.topbar a {
font-size: 3.5vw;
}
.bluesky img {
width: 3.5vw;
}
    .teal-flex-center {
        gap: 2vw;
    }
    .cancer-ribbon{
        width: 3.5vw
    }
    .teal-title{
        font-size: 5vw;
    }
    .Keeping-it-Real-by-Making-it-Teal-project{
width: 100%;
height: 10vw;
font-size: 5vw;
}
    .about-me{
    padding-top: 10vw;
    padding-bottom: 10vw;
}
    h1{
    font-size: 6vw;

}
p {
font-size: 2.75vw;
line-height: 5vw;
}

.profile-bio {
width: 50vw;
font-size: 3vw;
line-height: 4vw;
}

    .projects {
text-align: center;

}
.project-title {
padding-top: 2vw;
padding-bottom: 2vw;
}
img.profile-picture {
display: flex;
width: 80%;
margin: 0 auto;
margin-left: 10vw;
}


#profile-name {
margin-top: 3.5vw;
margin-bottom: .5vw;
}
   .social-nav {
font-size: 3.5vw;
margin-top: 11vw;
}
   .topbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    position: fixed;
    background-color: #000000;
    color: #FFFFFF;
    width: 100%;
    height: auto;
    padding: 3vw;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
}
.topbar-item {
    box-sizing: border-box;
    text-align: center;
}
.logo-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.logo {
    width: 5.75vw;

}
.title {
    width: 7vw;

}
.full-sail-logo {
margin: 0vw 0vw -.8vw;
width: 30vw;
}
}


@media screen and (min-width: 601px) and (max-width: 1024px) {
    .timeline-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0vw;
}
    .timeline-title {
font-size: 4.5vw;
font-weight: bold;
text-align: center;
margin-bottom: -1vw;
margin-top: 0vw;
}


.arrow {
width: 60vw;
height: auto;
}
            .belonging-project {
    background: #ffffff;
    width: 100%;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
}


.timeline-project {
    background-color: #b9dec4;
    color: #ffffff;
    width: 100%;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .belonging-logo {
height: 8vw;
max-width: 45%;
}
    .logo-belonging {
        height: 5vw;
    }
    .bluesky img {
width: 3.5vw;
}
.topbar a {
font-size: 2.5vw;
}
.cancer-ribbon{
    width: 3.5vw;
}
        .Keeping-it-Real-by-Making-it-Teal-project{
            font-size: 5vw;
            height: 10vw;
width: 100%;
}
.about-me {
padding-top: 1.25vw;
padding-bottom: 1.25vw;
background-color: #deb9c1;
}
.project-title{
    padding-top: 2vw;
padding-bottom: 2vw;
}

h1{
    font-size: 6vw;

}
p {
font-size: 3vw;
line-height: 4.75vw;
}
    .about-me-grid{
    margin-top: 10vw;
}
.profile-bio {
margin-left: -10vw;
min-width: 230px;
font-size: 2.75vw;
line-height: 4vw;
}
img.profile-picture {
display: flex;
width: 40vw;
max-width: 350px;
margin: 0 auto;
margin-left: 6vw;
}


     .social-nav{
font-size: 3.5vw;

        margin-top: 7.7vw;
    }
   .topbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    position: fixed;
    background-color: #000000;
    color: #FFFFFF;
    width: 100%;
    height: auto;
    padding: 1vw;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
}
.topbar-item {
    box-sizing: border-box;
    text-align: center;
}
.logo-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.logo {
    width: 5.75vw;

}
.title {
    width: 7vw;

}
.full-sail-logo {
margin: 0vw 0vw -.8vw;
width: 30vw;
}
}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
    .timeline-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
    .timeline-title {
font-size: 2.5vw;
font-weight: bold;
text-align: center;
margin: -1.5vw;
margin-top: 0vw;
}


.arrow {
width: 30vw;
height: auto;
}
        .belonging-project {
    background: #ffffff;
    width: 100%;
    height: 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
}


.timeline-project {
    background-color: #b9dec4;
    color: #ffffff;
    width: 100%;
    height: 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .belonging-logo {
height: 8vw;
max-width: 45%;
}
    .logo-belonging {
        height: 5vw;
    }
#profile-name {
width: 100%;
justify-content: initial;
display: grid;
grid-template-columns: auto auto;
}
#profile-about {
gap: 13vw;
}
    .topbar a{
        font-size: 1.333vw;

    }
    .bluesky img {
width: 1.5vw;
}
        .social-nav {
padding: 1vw;
padding-bottom: 1.6vw;
margin-top: 6vw;
text-align: center;
height: 1vw;
width: 48vw;
font-size: 1.5vw;
background-color: #000000;
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto;
}
       .main-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.profile {
width: 50vw;
display: grid;
}
    .content-wrapper {
        margin-top: -3.1vw;
width: 46vw;
display: grid;

        padding: 2vw;
    }

    .content {
        margin: 0;
        padding: 2vw;
        width: 100%;
        box-sizing: border-box;
    }

    .pixelgrid-project{
        height: 6vw;
    }
    .pixelgrid-logo-container {
gap: .25vw;
}
    .pixelgrid-logo img {
width: 4vw;
}
.pixelgrid-title img {
width: 15vw;
}
     .libra-icon {
width: 1.333vw;
padding-left: .333vw;
margin-top: .333vw;
}

.full-sail-logo {
margin: 0vw 0vw -.333vw;
width: 15.5vw;
}
    .cancer-ribbon{
    width: 2.5vw;
}
        .Keeping-it-Real-by-Making-it-Teal-project{

            font-size: 2vw;
            height: 6vw;
width: 100%;
}
.about-me {
padding-top: 4.5vw;
padding-bottom: 4.5vw;
padding-left: 5vw;
padding-right: 5vw;
background-color: #deb9c1;
}
.project-title {
padding-top: .333vw;
padding-bottom: .333vw;
}
.profile-bio h1 {
padding-bottom: .333vw;
}

.profile-name{
    padding-top: .666vw;
}
.profile-grid {
width: 100%;
justify-content: space-evenly;
gap: 12vw;
display: grid;
grid-template-columns: auto auto;
}

.about-me-grid {
margin-top: 0vw;
}
.profile-pronouns{
    padding-top: .666vw;
}

h1 {
font-size: 1.666vw;
}
p {
font-size: 1.333vw;
line-height: 2vw;
}

.profile-bio {
margin-left: -10vw;
min-width: 230px;
font-size: 2.75vw;
line-height: 1.9vw;
}


img.profile-picture {
display: flex;
width: 15vw;
max-width: 350px;
margin: 0 auto;
margin-left: 0vw;
}
   .topbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    position: fixed;
    background-color: #000000;
    color: #FFFFFF;
    width: 100%;
    height: auto;
    padding: 1vw;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
}
    .contact-location{
width: 13vw;

    }
   .topbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    position: fixed;
    background-color: #000000;
    color: #FFFFFF;
    width: 100%;
    height: auto;
    padding: 1vw;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
}
.topbar-item {
    box-sizing: border-box;
    text-align: center;
}
.logo-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.logo {
    width: 5.75vw;
    max-width: 4.5vw;
}
.title {
    width: 7vw;
    max-width: 5.75vw;

}}

@media screen and (min-width: 1301px) and (max-width: 1600px) {
    .timeline-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
    .timeline-title {
font-size: 2.5vw;
font-weight: bold;
text-align: center;
margin-bottom: -1.5vw;
margin-top: 0vw;
}


.arrow {
width: 30vw;
height: auto;
}
    .belonging-project {
    background: #ffffff;
    width: 100%;
    height: 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
}


.belonging-logo {
    height: 8vw;
    max-width: 60%;
}

.logo-belonging {
    height: 5vw;
}


.timeline-project {
    background-color: #b9dec4;
    color: #ffffff;
    width: 100%;
    height: 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .topbar a{
        font-size: 1.333vw;

    }
    .bluesky img {
width: 1.5vw;
}
.social-nav {
padding: 1vw;
padding-bottom: 1.6vw;
margin-top: 5.25vw;
text-align: center;
height: 1vw;
width: 38vw;
font-size: 1.5vw;
background-color: #000000;
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto;
}
    .main-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.profile {
width: 40vw;
display: grid;
}
.content-wrapper {
width: 56vw;
display: grid;
margin-top: -3.1vw;
padding: 2vw;
}
    .content {
        margin: 0;
        padding: 2vw;
        width: 100%;
        box-sizing: border-box;
    }

    .pixelgrid-project{
        height: 6vw;
    }
    .pixelgrid-logo-container {
gap: .25vw;
}
    .pixelgrid-logo img {
width: 4vw;
}
.pixelgrid-title img {
width: 15vw;
}
.libra-icon {
width: 1vw;
padding-left: .333vw;
margin-top: .333vw;
}

.full-sail-logo {
margin: 0vw 0vw -.333vw;
width: 12.5vw;
}
    .cancer-ribbon{
    width: 2.5vw;
}
        .Keeping-it-Real-by-Making-it-Teal-project{

            font-size: 1.5vw;
            height: 6vw;
width: 100%;
}
    .about-me{
        padding: 3vw;
   background-color: #deb9c1;
}
.project-title {
padding-top: .333vw;
padding-bottom: .333vw;
}
.profile-bio h1 {
padding-bottom: .333vw;
}

.profile-name {
padding-top: .666vw;
width: 15vw;
}
.about-me-grid {
margin-top: 0vw;
}
.profile-pronouns{
    padding-top: .666vw;
}

h1{
    font-size: 1.9vw;

}
p {
font-size: 1vw;
}

.profile-bio {
margin-left: -10vw;
min-width: 230px;
font-size: 2.75vw;
line-height: 1.4vw;
}
#profile-about{
    gap: 11vw
}

img.profile-picture {
display: flex;
width: 15vw;
max-width: 350px;
margin: 0 auto;
margin-left: 0vw;
}
.profile{
        width: 40vw;
    }

   .topbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    position: fixed;
    background-color: #000000;
    color: #FFFFFF;
    width: 100%;
    height: auto;
    padding: 1vw;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
}
.profile-grid {
width: 100%;
justify-content: space-evenly;
gap: 6vw;
display: grid;
grid-template-columns: auto auto;
}
.topbar-item {
    box-sizing: border-box;
    text-align: center;
}
.logo-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.logo {
    width: 5.75vw;
    max-width: 3.75vw;
}
.title {
    width: 7vw;
    max-width: 5.5vw;

}
}
@media screen and (min-width: 1601px) {
    .timeline-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.timeline-title {
font-size: 2.5vw;
font-weight: bold;
text-align: center;
margin-bottom: -1.5vw;
margin-top: 0vw;
}


.arrow {
width: 30vw;
height: auto;
}
    .belonging-project {
    background: #ffffff;
    width: 100%;
    height: 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
}


.belonging-logo {
    height: 8vw;
    max-width: 55%;
}

.logo-belonging {
    height: 5vw;
}


.timeline-project {
    background-color: #b9dec4;
    color: #ffffff;
    width: 100%;
    height: 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-nav {
padding: 1vw;
padding-bottom: 1.6vw;
margin-top: 4vw;
text-align: center;
height: 1vw;
width: 38vw;
font-size: 1.5vw;
background-color: #000000;
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto;
}
.bluesky img {
width: 1.5vw;
}
.main-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.profile {
width: 40vw;
display: grid;
}
.content-wrapper {
width: 51.6vw;
display: grid;
margin-top: -2.6vw;
padding: 2vw;
margin-right: 4.5vw;
}

    
    .content {
        margin: 0;
        padding: 2vw;
        width: 100%;
        box-sizing: border-box;
    }

    .pixelgrid-project{
        height: 6vw;
    }
    .pixelgrid-logo-container {
gap: .25vw;
}
    .pixelgrid-logo img {
width: 4vw;
}
.pixelgrid-title img {
width: 15vw;
}
    .libra-icon {
width: 1.333vw;
padding-left: .333vw;
margin-top: .333vw;
}

.full-sail-logo {
margin: 0vw 0vw -.333vw;
width: 12.5vw;
}
    .cancer-ribbon{
    width: 2.5vw;
}
        .Keeping-it-Real-by-Making-it-Teal-project{

            font-size: 1.5vw;
            height: 6vw;
width: 100%;
}
.about-me {
padding-top: 3.25vw;
padding-bottom: 3.25vw;
padding-left: 2.5vw;
padding-right: 2.5vw;
background-color: #deb9c1;
}
.project-title {
padding-top: .333vw;
padding-bottom: .333vw;
}
.profile-bio h1 {
padding-bottom: .333vw;
}

.profile-name{
    padding-top: .666vw;
}
.about-me-grid {
margin-top: 0vw;
}
.profile-pronouns{
    padding-top: .666vw;
}

h1{
    font-size: 1.9vw;

}
p {
font-size: 1.1vw;
line-height: 1.75vw;
}

.profile-bio {
margin-left: -10vw;
min-width: 230px;
font-size: 2.75vw;
line-height: 2vw;
}
#profile-about{
    gap: 11vw
}

img.profile-picture {
display: flex;
width: 15vw;
max-width: 350px;
margin: 0 auto;
margin-left: 0vw;
}
.profile{
        width: 40vw;
    }
   .topbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    position: fixed;
    background-color: #000000;
    color: #FFFFFF;
    width: 100%;
    height: auto;
    padding: 1vw;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
}
.topbar-item {
    box-sizing: border-box;
    text-align: center;
}
.logo-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.logo {
    width: 5.75vw;
    max-width: 3vw;
}
.title {
    width: 7vw;
max-width: 4.5vw;
}
}