a.smallest-button {
    display: inline-block;
    padding: 4px 16px;
    color: black;
    border-radius: 8px;
    font-size: 14px;
    transition: all .3s;
    box-shadow: var(--small-shadow);
}

a.smallest-button:hover {
    color: white;
    box-shadow: var(--smallest-shadow);
}

a.small-button {
    display: inline-block;
    padding: 8px 20px;
    color: black;
    border-radius: 8px;
    font-size: 16px;
    transition: all .3s;
    box-shadow: var(--small-shadow);
}

a.small-button:hover {
    color: white;
    box-shadow: var(--smallest-shadow);
}

a.middle-button {
    display: inline-block;
    padding: 12px 40px;
    color: black;
    border-radius: 8px;
    font-size: 18px;
    transition: all .3s;
    box-shadow: var(--small-shadow);
}

a.middle-button:hover {
    color: white;
    box-shadow: var(--smallest-shadow);
}

a.large-button {
    display: inline-block;
    padding: 16px 60px;
    color: black;
    border-radius: 8px;
    font-size: 20px;
    transition: all .3s;
    box-shadow: var(--small-shadow);
}

a.large-button:hover {
    color: white;
    box-shadow: var(--smallest-shadow);
}

a.largest-button {
    display: inline-block;
    padding: 20px 100px;
    color: black;
    border-radius: 8px;
    font-size: 22px;
    transition: all .3s;
    box-shadow: var(--small-shadow);
}

a.largest-button:hover {
    color: white;
    box-shadow: var(--smallest-shadow);
}

.button-b {
    background-color: var(--buttonb-color);
}

.button-b:hover {
    background-color: var(--buttonb-hover);
}

.button-y {
    background-color: var(--buttony-color);
}

.button-y:hover {
    background-color: var(--buttony-hover);
}

.button-r {
    background-color: var(--buttonr-color);
}

.button-r:hover {
    background-color: var(--buttonr-hover);
}

.button-g {
    background-color: var(--buttong-color);
}

.button-g:hover {
    background-color: var(--buttong-hover);
}

.button-d {
    background-color: var(--buttond-color);
}

.button-d:hover {
    background-color: var(--buttond-hover);
}

a.smallest-button-b {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 1s;
    box-shadow: var(--small-shadow);
    color: black;
    border: 2px solid var(--green-900);
}

a.smallest-button-b:hover {
    background-color: var(--green-900);
    box-shadow: var(--smallest-shadow);
    color: white;
}

a.small-button-b {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 16px;
    transition: all 1s;
    box-shadow: var(--small-shadow);
    color: black;
    border: 2px solid var(--green-900);
}

a.small-button-b:hover {
    background-color: var(--green-900);
    color: white;
    box-shadow: var(--smallest-shadow);
}

a.middle-button-b {
    display: inline-block;
    padding: 12px 40px;
    border-radius: 8px;
    font-size: 18px;
    transition: all 1s;
    box-shadow: var(--small-shadow);
    color: black;
    border: 2px solid var(--green-900);
}

a.middle-button-b:hover {
    background-color: var(--green-900);
    color: white;
    box-shadow: var(--smallest-shadow);
}

a.large-button-b {
    display: inline-block;
    padding: 16px 60px;
    border-radius: 8px;
    font-size: 20px;
    transition: all 1s;
    box-shadow: var(--small-shadow);
    color: black;
    border: 2px solid var(--green-900);
}

a.large-button-b:hover {
    background-color: var(--green-900);
    color: white;
    box-shadow: var(--smallest-shadow);
}

a.largest-button-b {
    display: inline-block;
    padding: 20px 100px;
    border-radius: 8px;
    font-size: 22px;
    transition: all 1s;
    box-shadow: var(--small-shadow);
    color: black;
    border: 2px solid var(--green-900);
}

a.largest-button-b:hover {
    background-color: var(--green-900);
    color: white;
    box-shadow: var(--smallest-shadow);
}

figure.hover-img {
    width: 50%;
    display: block;
    overflow: hidden;
}


figure.hover-img a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}


figure.hover-img img {
    width: 100%;
    height: 100%;
    transition: all 2s;
}

figure.hover-img:hover img {
    transform: scale(1.2);
}

figure.hover-img figcaption.overlay-project {
    display: none;
}

figure.hover-img:hover figcaption.overlay-project {
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.063), black);
    position: absolute;
    top: 0;
    z-index: 5;
    color: white;
    display: flex;
    justify-content: center;
    align-items: end;
    text-align: center;
    padding: 20px;
}

figure.hover-full {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    box-shadow: var(--middle-shadow);
    border-radius: 8px;
}


figure.hover-full a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}


figure.hover-full img {
    width: 100%;
    height: 100%;
    transition: all 2s;
}

figure.hover-full:hover img {
    transform: scale(1.2);
}

figure.hover-full figcaption.overlay-image {
    display: none;
}

figure.hover-full:hover figcaption.overlay-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.063), black);
    position: absolute;
    top: 0;
    z-index: 5;
    color: white;
    display: flex;
    justify-content: center;
    align-items: end;
    text-align: center;
    padding: 20px;
}