:root {
    --main-color: rgb(0, 0, 0);
    --main-color-35percent: rgba(0, 0, 0, 0.35);
    --main-color-65percent: rgba(0, 0, 0, 0.65);
    --main-color-90percent: rgba(0, 0, 0, 0.9);
    --key-color: rgb(242, 20, 57);
    --key-color-50percent: rgba(242, 20, 57, 0.5);
    --key-color-90percent: rgba(242, 20, 57, 0.9);
    --secondary-color: rgb(255, 255, 255);
    --secondary-color-25percent: rgba(255, 255, 255, 0.25);
    --secondary-color-90percent: rgba(255, 255, 255, 0.9);    
    --tertiary-color: rgba(128, 128, 128, 1);
    --gradient-vertical-secondary-color: 90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,1) 100%;
}

::selection {
    color: var(--secondary-color);
    background-color: var(--key-color-50percent);
}

::-moz-selection {
    color: var(--secondary-color);
    background-color: var(--key-color-50percent);    
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important; */
}

body {
    overflow-x: hidden;
}

h2 {
    margin-bottom: 3rem;
    text-align: center;
    font-family: 'Arimo', sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--main-color);
}

p {
    font-family: 'objektiv-mk1', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    color: var(--main-color);
}

.external-link {
    color: var(--key-color);
    text-decoration: underline;
}

.no-pointer-events {
    pointer-events: none;
}

.main-margin {
    margin-top: 0;
    /* margin-top: 2.5rem; */
    margin-bottom: 3rem;
}

.hovertext, .hovertext-top {
    position: relative;
    font-family: 'objektiv-mk1', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--secondary-color);
}

.hovertext:before {
    position: absolute;
    top: 105%;
    left: 50%;
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    background-color: var(--key-color);
    border-radius: 3px;
    border: 1px solid var(--secondary-color);
    text-align: center;
    padding: 0.3rem;
    transition: opacity 200ms ease-in-out;
    z-index: 200;
}

.hovertext-top:before {
    position: absolute;
    top: -105%;
    left: 50%;
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    background-color: var(--key-color);
    border-radius: 3px;
    border: 1px solid var(--secondary-color);
    text-align: center;
    padding: 0.3rem;
    transition: opacity 200ms ease-in-out;
    z-index: 200;
}

.hovertext:hover:before, .hovertext-top:hover:before {
    opacity: 1;
    visibility: visible;
}

.text-larger-title {
    color: var(--tertiary-color);
    font-weight: 500;
    font-size: 1.2rem;
}

.outer-container {
    margin: 3rem auto 0 auto;
	padding-top: 1rem;
	width: min(90%, 120em);
}

.inner-container {
    margin: 2rem auto 2rem auto;
}

.flex-vertical {
    display: flex;    
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}

.flex-horizontal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/*Safari height stretch fix*/
.flex-horizontal:first-child {
    display: flex;
    align-items: flex-start;
}
/*--*/

.setup-relative {
    position: relative;
}

.setup-absolute {
    position: absolute;
    inset: 0 0 0 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.element-hidden {
    display: none;
    visibility: hidden;
}

.opacity-zero {
    opacity: 0;
}


/* ---Navigation--- */

nav {
    background-color: var(--secondary-color-90percent);
    display: flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
    align-items: center;
    justify-content: center;
    height: 3.5rem; /*Needed for Safari*/
    z-index: 20;
}

.nav-bar {
    height: 3.5rem;
    visibility: hidden;
    /* display: none; */
}

.menu-parts {
    display: flex;
    justify-content: center;
    gap: 3rem;
    z-index: 100;
}

a {
    text-decoration: none;
}

.menu-parts > a {
    color: var(--main-color);
    font-family: 'brandon-grotesque', sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    font-size: clamp(0.75rem, 2vw, 1.1rem);
}

.nav-active {
    /* padding-bottom: 1.5rem; */
    border-bottom: 0.25rem solid var(--key-color);
}


/* ---Home page--- */

.outer-container-index {
    margin: 1rem auto 0 auto;
	width: min(95%, 120rem);
}

.grid-template {
    display: grid;
    place-items: center;
}

.grid-template > * {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.grid-template > img {
    object-fit: cover;
}

.horz-lineup {
    display: inline-block;
}

.setup-absolute-desktop {
    position: absolute;
    inset: 0 0 0 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.margin-top-fluid {
    margin-top: 3.5rem;
}

.transform-translateX {
    transform: translateX(-1rem);
}

.link-title-art {
    margin-left: clamp(2rem, 5vw, 4rem);
    margin-right: clamp(1rem, 2vw, 3rem);
    transform: translateY(-3rem);
    position: relative;
}

.link-title-art:before {
    content: "";
    position: absolute;
    width: 4px;
    height: clamp(5rem, 15vw, 18rem);
    height: min(max(5rem, 15vw), 18rem);
    background-color: var(--secondary-color);
    left: -2px;
    bottom: 0;
}

.link-title-art:after {
    content: "";
    position: absolute;
    width: 4px;
    height: clamp(5rem, 15vw, 18rem);
    height: min(max(5rem, 15vw), 18rem);
    background-color: var(--secondary-color);
    right: -2px;
    bottom: 0;
}

.link-title-code {
    margin-left: clamp(1rem, 10vw, 15rem);
    transform: translateY(-3rem);
    position: relative;
}

.link-title-code:before {
    content: "";
    position: absolute;
    width: 4px;
    height: clamp(5rem, 15vw, 18rem);
    height: min(max(5rem, 15vw), 18rem);
    background-color: var(--secondary-color);
    left: -2px;
    bottom: 0;
}

.link-title-code:after {
    content: "";
    position: absolute;
    width: 4px;
    height: clamp(5rem, 15vw, 18rem);
    height: min(max(5rem, 15vw), 18rem);
    background-color: var(--secondary-color);
    right: -2px;
    bottom: 0;
}

.link-title-art, .link-title-code {
    color: var(--key-color);
    font-family: 'brandon-grotesque', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(5rem, 10vw, 12rem);
    text-transform: uppercase;
    box-shadow: 0 -1.2rem 0 var(--key-color) inset;
    z-index: 1;
}

.title-ampersand {
    color: var(--secondary-color);
    font-family: 'brandon-grotesque', sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: clamp(3rem, 10vw, 8.5rem);
    margin-right: clamp(1rem, 3vw, 5rem);
    margin-left: clamp(3rem, 11vw, 15rem);
    pointer-events: none;
    position: relative;
    transform: translateY(-3rem);
    z-index: 10;
}

.creature-art {
    max-width: 60%;
    width: auto;
    height: auto;
    padding-top: min(95%, 1rem);
    padding-left: min(95%, 2rem);
    padding-right: min(95%, 2rem);
    padding-bottom: min(95%, 1rem);
    transform: translateX(-15%);
    pointer-events: none;
    position: relative;
    z-index: 5;
}

.link-title-art:hover, .link-title-code:hover {
    color: var(--main-color);
    box-shadow: 0 -1.8rem 0 var(--main-color) inset;
    transition: box-shadow 100ms ease-out;
}


/* ---Art page--- */

.art-container {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    align-content: space-around;
    gap: 1.5rem;
}

.art-container > li {
    height: 40vh;
    flex-grow: 1;
    overflow: hidden;
}

.portfolio-art {
    margin-left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 100%;
    object-fit: cover;
    cursor: pointer;
}


/*Standout fullview art classes*/
.standout-full {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    top: 0;
    left: 0;
    right: 0;  
    height: 100%;
    /* max-height: 100%;
    max-width: 100%; */
    z-index: 101;
}

.standout-full > img {
    display: flex;
    align-items: flex-start; /*needed for Safari*/
    /* height: auto;  */
    max-height: 100%;
    max-width: 100%; /*max-w/max-h for Safari placed here needed*/
}

.bg-tint-dark {
    position: fixed;
    inset: 0 0 0 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--main-color-90percent);
    z-index: 100;
}

/* Close X btn */
.standout-close-btn {
    cursor: pointer;
    top: 6%;
    right: 4%;
    width: 2rem;
    height: 3px;
    position: fixed;
    display: inline-block;    
    z-index: 102;
}

.standout-close-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    height: 3px;
    background-color: var(--secondary-color);
    transform: rotate(-45deg);
}

.standout-close-btn:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2rem;
    height: 3px;
    background-color: var(--secondary-color);
    transform: rotate(45deg);
}

/* JS toggle classes */
.hide-button {
    visibility: hidden;
    display: none;
}

.hide-standout {
    visibility: hidden;
    display: none;
}


/* ---Code page--- */

.demo-box {    
    width: auto;
    height: auto;
    max-width: 550px;
    max-height: 375px;
    border-radius: 0.2rem;
    overflow: hidden;
    box-shadow: 0 0 0.3rem var(--main-color-35percent);
}

.overlay-demo {
    width: auto;
}

.overlay-demo:hover {
    cursor: pointer;
    background-color: var(--main-color-65percent);
    transition: background-color 100ms ease-out;
}

.overlay-label {
    width: 100%;
    top: 43%;
    color: var(--secondary-color);
    text-align: center;
    /* background-color: var(--element-transparency-key); */
    line-height: 3;
}

.overlay-hover {
    opacity: 0;
}

.overlay-hover:hover {
    opacity: 1;
}

.demo-preview {    
    display: block;
    max-width: 100%;
    height: auto;
}

.text-accent {
    font-weight: bold;
}

.project-text {
    margin: 1rem 2rem 2rem 2rem;
    width: 40ch;
}

.active-button {
    font-family: 'objektiv-mk1', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 0.75rem;
    margin-left: 1rem;    
    background-color: var(--key-color);
    color: var(--secondary-color);
    border: 0.1rem solid var(--key-color);
    padding: 0.3em 0.4em 0.3em 0.4em;
    border-radius: 0.5em;
    white-space: nowrap;
    display: inline-block;
}

.non-active-button {
    font-family: 'objektiv-mk1', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 0.75rem;
    margin-left: 1rem;
    border: 0.1rem solid var(--key-color);
    color: var(--main-color);
    background-color: var(--secondary-color);
    padding: 0.3em 0.4em 0.3em 0.4em;
    border-radius: 0.5em;
    white-space: nowrap;
    display: inline-block;
}

.project-about {
    margin: 1rem 1rem 1rem 1rem;
}


/* ---About/contact--- */

.narrow-box {
    text-align: center;
    max-width: 50ch;
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 1.2rem;
    padding: 0.1rem;
}

.padding-bottom {
    padding-bottom: 2rem;
}

.icon-large {
    width: 4rem;
    max-height: 4rem;
}


/* ---Footer---  */

footer {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: auto;
    background-color: var(--secondary-color-90percent);
}

.icon-box {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.icon-small {
    width: min(max(1.1rem, 3vw), 1.5rem);
}

@supports (width: clamp(1.1rem, 3vw, 1.5rem)) {
    .icon-small {
        width: clamp(1.1rem, 3vw, 1.5rem);
    }
}


/* ---Media queries--- */

/*Hover and no hover devices queries*/
@media (hover: hover) {
    .active-button:hover {
        color: var(--secondary-color);
        background-color: var(--key-color);
        box-shadow: 0 0.2rem 0.2em var(--key-color-50percent);
        transition: box-shadow 100ms ease-out;
    }

    .menu-parts > a:hover {
        color: var(--key-color);
        transition: color 100ms ease-out;
    }
}

@media (hover: none) {
    .overlay-demo {
        background-color: var(--main-color-65percent);
    }

    .overlay-hover {
        opacity: 1;
    }   
}

/*Screen size queries*/
@media screen and (min-width: 108em) {
    .link-title-art, .link-title-code, .title-ampersand {
        transform: translateY(-4.5rem);
    }
}

@media screen and (max-width: 70em) {
    .transform-translateX {
        transform: translateX(-1.5rem);
    }
}

@media screen and (max-width: 48em) {
    /* .nav-active {
        padding-bottom: 1.2rem;
    } */
    
    h2 {
        margin-bottom: 0;
    }

    .outer-container {
        margin-top: 0;
        padding-top: 1rem;
    }

    .menu-parts {
        gap: 2rem;
    }

    .transform-translateX {
        transform: translateX(-1rem);
    }

    .link-title-art, .link-title-code {
        font-size: 4rem;
    }

    .title-ampersand {
        font-size: 3.5rem;
    }

    .link-title-art, .link-title-code {
        box-shadow: 0 -1rem 0 var(--key-color) inset;
    }

    .link-title-art:hover, .link-title-code:hover {        
        box-shadow: 0 -1.2rem 0 var(--main-color) inset;
    }
}

@media screen and (orientation: portrait) {
    /* .outer-container {
        margin-top: 0;
        padding: 1rem;
    } */

    .main-margin {
        margin-top: 0;
    }

    .outer-container {
        margin-top: 0;
    }

    .outer-container-index {
        margin-top: 0;
        padding: 0;
    }

    .padding-bottom {
        padding-bottom: 0;
    }
    
    /*Home page*/
    .main-margin-mobile {
        margin-top: 0;
        margin-bottom: 1rem;
    }
        
    .flex-vertical-mobile {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;        
        align-content: space-around;
    }
    
    .mobile-hidden {
        display: none;
        visibility: hidden;
    }

    .element-hidden {
        display: block;
        visibility: visible;
    }
      
    .transform-translateX {
        transform: translateX(0);
    }

    .link-title-art { 
        margin: 0;
        margin-top: 1rem;
    }

    .link-title-art:before {
        content: "";
        position: absolute;
        width: 4px;
        height: clamp(8rem, 14vw, 18rem);
        height: min(max(8rem, 14vw), 18rem);
        background-color: var(--secondary-color);
        left: -2px;
        bottom: 0;
    }
    
    .link-title-art:after {
        content: "";
        position: absolute;
        width: 4px;
        height: clamp(8rem, 14vw, 18rem);
        height: min(max(8rem, 14vw), 18rem);
        background-color: var(--secondary-color);
        right: -2px;
        bottom: 0;
    }

    .title-ampersand {
        position: absolute;
        font-size: 6rem;
        margin: 0;
    }

    .link-title-code { 
        margin-left: 0;
        margin-bottom: 2.5rem;
    }

    .link-title-code:before {
        content: "";
        position: absolute;
        width: 4px;
        height: clamp(8rem, 14vw, 18rem);
        height: min(max(8rem, 14vw), 18rem);
        background-color: var(--secondary-color);
        left: -2px;
        bottom: 0;
    }
    
    .link-title-code:after {
        content: "";
        position: absolute;
        width: 4px;
        height: clamp(8rem, 14vw, 18rem);
        height: min(max(8rem, 14vw), 18rem);
        background-color: var(--secondary-color);
        right: -2px;
        bottom: 0;
    }

    .link-title-art, .link-title-code {     
        box-shadow: 0 -1.2rem 0 var(--key-color) inset;
        transform: translateY(0);
    }

    .link-title-art:hover, .link-title-code:hover {        
        box-shadow: 0 -1.5rem 0 var(--main-color) inset;
    } 
    
    .link-title-art, .link-title-code {        
        font-size: clamp(5rem, 10vw, 12rem);        
    }

    .creature-box {
        padding-top: 0.5rem;
        margin: auto 2rem auto 2rem;
        height: 100%;
        max-height: 100%;
        max-width: 100%;
        z-index: 5;
    }

    .creature-mobile {
        transform: translateY(0.75rem);
        max-height: 100%;
        max-width: 100%;
        pointer-events: none;
    }

    .setup-absolute-mobile {
        position: absolute;
        inset: 0 0 0 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

@media screen and (max-width: 35em) {
    h2 {
        margin-bottom: 3rem;
    }
    
    .main-margin {
        margin-top: 2.5rem;
    }

    .hovertext:before {        
        top: 120%;
        left: -50%;        
    }

    /*Navigation*/
    .nav-bar {
        background: var(--secondary-color-90percent);
        z-index: 99;
        height: 3.5rem;
        position: fixed;
        top: 0;
        visibility: visible;
        transform: translateZ(0);
        -webkit-transform: translateZ(0); /*Needed for Safari*/
    }

    .menu-parts {
        position: fixed;
        flex-direction: column;
        inset: 0 0 0 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(var(--gradient-vertical-secondary-color));
        z-index: 2;
        gap: 0;
        transform: translateX(100%);
        /* transition: transform 300ms ease-out; */
    }

    .hamburger-menu {
        position: fixed;
        top: 0.75rem;
        right: 6%;
        transform: translate(5%, 20%);
        cursor: pointer;
        display: inline-block;
        z-index: 100;
    }
          
    /*Burger Stripe Menu*/
    .hamburger-stripe {
        width: 2rem;
        height: 3px;
        position: relative;
        background-color: var(--key-color);
        display: inline-block;
        z-index: 2;
    }
    
    .hamburger-stripe:before {
        content: "";
        position: absolute;
        top: -8px;
        left: 0;
        width: 2rem;
        height: 3px;
        background-color: var(--key-color);
    }
    
    .hamburger-stripe:after{
        content: "";
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 2rem;
        height: 3px;
        background-color: var(--key-color);
    }
    
    /* X BUTTON */
    .stripe-active {
        width: 2rem;
        height: 3px;
        position: relative;
        display: inline-block;
        z-index: 2;
    }
    
    .stripe-active:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2rem;
        height: 3px;
        background-color: var(--key-color);
        transform: rotate(-45deg);
        transition: transform 100ms ease-out;
    }
    
    .stripe-active:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 2rem;
        height: 3px;
        background-color: var(--key-color);
        transform: rotate(45deg);
        transition: transform 100ms ease-out;
    }

    /*Active mobile menu*/
    .menu-active {
        transform: translateX(0%);
    }

    .menu-parts > a {
        font-size: 1rem;
        text-align: center;
        padding: min(10vh, 2rem) 2rem;
    }

    .menu-parts > a:hover {
        color: var(--secondary-color);
        background-color: var(--key-color);
        transition: background-color 150ms ease-out;
    }

    .nav-active {
        padding-bottom: 0;
        border: 0;
    }

    nav {
        height: 1px; /*Needed for Safari*/
        margin-bottom: 0;
        background-color: var(--secondary-color);
    }

    .outer-container {
        margin-top: 0;
        padding-top: 1rem;
    }

    .outer-container-index {
        margin-top: 0;
        padding: 0;
    }

    .padding-bottom {
        padding-bottom: 0;
    }

    /*Home page*/
    .main-margin-mobile {
        margin-top: 0;
        margin-bottom: 1rem;
    }
        
    .flex-vertical-mobile {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;        
        align-content: space-around;
    }
    
    .mobile-hidden {
        display: none;
        visibility: hidden;
    }

    .mobile-hidden-ampersand {
        display: none;
        visibility: hidden;
    }

    .element-hidden {
        display: block;
        visibility: visible;
    }

    .transform-translateX {
        transform: translateX(0);
    }

    .margin-top-fluid {
        margin-top: 0;
    }

    .link-title-art { 
        margin: 0;
        margin-top: 2rem;        
    }

    .link-title-art:before {
        content: "";
        position: absolute;
        width: 4px;
        height: clamp(8rem, 14vw, 18rem);
        height: min(max(8rem, 14vw), 18rem);
        background-color: var(--secondary-color);
        left: -2px;
        bottom: 0;
    }
    
    .link-title-art:after {
        content: "";
        position: absolute;
        width: 4px;
        height: clamp(8rem, 14vw, 18rem);
        height: min(max(8rem, 14vw), 18rem);
        background-color: var(--secondary-color);
        right: -2px;
        bottom: 0;
    }

    .link-title-code { 
        margin-left: 0;
        margin-bottom: 2.5rem;
    }

    .link-title-code:before {
        content: "";
        position: absolute;
        width: 4px;
        height: clamp(8rem, 14vw, 18rem);
        height: min(max(8rem, 14vw), 18rem);
        background-color: var(--secondary-color);
        left: -2px;
        bottom: 0;
    }
    
    .link-title-code:after {
        content: "";
        position: absolute;
        width: 4px;
        height: clamp(8rem, 14vw, 18rem);
        height: min(max(8rem, 14vw), 18rem);
        background-color: var(--secondary-color);
        right: -2px;
        bottom: 0;
    }

    .link-title-art, .link-title-code {        
        box-shadow: 0 -1.2rem 0 var(--key-color) inset;
        transform: translateY(0);
    }

    .link-title-art:hover, .link-title-code:hover {        
        box-shadow: 0 -1.5rem 0 var(--main-color) inset;
    } 
    
    .link-title-art, .link-title-code {        
        font-size: clamp(5rem, 10vw, 12rem);        
    }

    .creature-box {
        padding-top: 0.5rem;
        margin: auto 2rem auto 2rem;
        height: 100%;
        max-height: 100%;
        max-width: 100%;
        z-index: 5;
    }

    .creature-mobile {
        transform: translateY(0.75rem);
        max-height: 100%;
        max-width: 100%;
        pointer-events: none;
    }

    .setup-absolute-mobile {
        position: absolute;
        inset: 0 0 0 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    /*Footer*/
    .icon-small {
        width: 1.1rem;
    }
}

@media screen and (max-height: 42em) {
    .creature-box {
        margin: auto 3rem auto 3rem;
    }
}

@media screen and (max-width: 35em) and (hover: none) {
    .menu-parts {
        background: linear-gradient(var(--gradient-vertical-secondary-color));
    }

    .menu-parts > a {
        color: var(--secondary-color);
        background-color: var(--key-color);
        border: 1px solid var(--key-color);
    }
}

@media (max-width: 28em) {
    .project-text {
        margin: 1rem 0 2rem 0;
    }

    .project-about {
        margin: 1rem 0 1rem 0;
    }

    .active-button {               
        margin-left: 0;
        margin-right: 1rem;
    }

    .non-active-button {
        margin-left: 0;
        margin-right: 1rem;        
    }
}

@media (max-width: 22em) {
    p {
        font-size: clamp(0.75rem, 0.85rem, 1rem);
    }

    .active-button, .non-active-button {
        font-size: clamp(0.65rem, 0.75rem, 1rem);
    }

    .active-button {
        margin-right: 0.75rem;
    }

    .non-active-button {
        margin-right: 0.75rem;
    }

    .project-about {
        margin-top: 0.5rem;
    }
}