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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;

    color: #CCCCCC;
    /*color: #dbebfa;*/
    /*background-color: #0F0E0E;*/
    background-color: #171515;
    text-wrap: pretty;
    /*font-size: clamp(1em, 50vw, 1.5em);*/
}


h1, h2, h3, h4, h5, h6 {
    font-family: "Staatliches", sans-serif;
}

h4 {
    font-size: clamp(1.2em, 50vw, 1.5em);
}

a {
    font-family: "Staatliches", sans-serif;
    font-size: clamp(15pt, 50vw, 22pt);
    letter-spacing: 0.05em;
    color: #dbebfa;
    /*text-shadow: #9D2E36 2px 2px 2px;*/
    text-align: center;
    transition: 0.15s ease;
    align-content: center;
    /*text-decoration: none; !*---Link underline remove------*!*/
}

a:hover {
    color: #8B9A46;
    text-shadow: #9D2E36 2px 2px 2px;
    -webkit-transform: translate(-1px, -1px);
    transition: 0.25s ease;
}

a:active {
    color: #9D2E36;
    text-shadow: 0 0 0;
    -webkit-transform: translate(1px, 1px);
    transition: 0.25s ease;
}

a:hover img {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.8), 0 10px 20px 0 rgba(0, 0, 0, 0.8);
    -webkit-transform: translate(-1px, -1px);
    transition: 0.2s ease;
}

a img {
    transition: 0.2s ease;
}

a:active img {
    box-shadow: 0 10px 5px 0 rgba(0, 0, 0, 0.3), 0 10px 5px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: translate(1px, 1px);
}

p {
    /*font-size: clamp(1em, 50vw, 1.15em);*/
}

.container {
    min-width: 70%;
    max-width: 80%;
}

.row {
    justify-content: center;
    -webkit-justify-content: center;
}

.top-part {
    background-image: url(../img/tiny-giant-studio-cover.webp);
    width: 100%;
    background-size: cover;
    background-position: center center;
    min-height: clamp(475px, 70vw, 850px);
}

.nav-bar {
    margin: auto;
    padding-top: 1em;
    min-width: 50%;
    max-width: 60%;
    text-align: center;
}


.nav-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem; /* adjust spacing between links */

    justify-content: center;
    -webkit-justify-content: center;
}

.nav-bar li {
    margin: 0;
}

.nav-bar a {
    font-size: clamp(1em, 5vw, 1.1em);
    margin: 7pt;
}

.nav-bar ul li a img {
    width: clamp(1em, 5vw, 1.1em);
    height: clamp(1em, 5vw, 1.1em);
}

.section-subtitle {
    font-family: "Staatliches", sans-serif;
    font-size: clamp(0.9em, 70vw, 2.25em);
    color: #8B9A46;
    text-align: center;
    padding-top: 50pt;
}

.section-title {
    font-size: clamp(1.2em, 70vw, 3em);
    color: #dbebfa;
    text-align: center;
}

.centered-text {
    text-align: center;
}


.unity-assets-section .box {
    position: relative;
    width: 100%;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.17), 0 10px 20px 0 rgba(0, 0, 0, 0.17);
    transition: 0.25s ease;
}

.unity-assets-section .box:hover {
    color: #8B9A46;
    text-shadow: #9D2E36 2px 2px 2px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.9), 0 10px 20px 0 rgba(0, 0, 0, 0.9);
    transition: 0.5s ease;
    -webkit-transform: translate(-3px, -3px);
    /*border: 1px solid #9D2E36;*/
}

.unity-assets-section .box:hover .overlay {
    -webkit-transform: translate(-1px, -1px);
}

.unity-assets-section .box .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #0F0E0E;
    overflow: hidden;
    width: 100%;
    height: 0;
    box-shadow: 0 -10px 20px 0 rgba(0, 0, 0, 0.25), 0 10px 20px 0 rgba(0, 0, 0, 0.7);
    transition: .25s ease;
}

.unity-assets-section .overlay a:hover img {
    -webkit-transform: translate(0, 0);
}

.unity-assets-section img {
    display: block;
    width: 100%;
    height: auto;
}


.unity-assets-section .box:hover .overlay {
    height: 15%;
}

/*The "Check this asset on the Unity Asset Store" texts*/
.unity-assets-section .overlay .text {
    font-size: clamp(8pt, 2vw, 15pt);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: 1s ease;
    text-wrap: nowrap;
    text-align: center;
}

.unity-assets-section .asset-details {
    font-size: clamp(8pt, 2vw, 10pt);
    text-wrap: pretty;
    text-align: start;
    margin: 0;
    padding: 0;
}

.unity-assets-section .asset-details a {
    text-align: left;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1;
}

.unity-assets-section .asset-details .review {
    margin-top: 0;
    margin-left: 2px;
    padding: 0;
    line-height: 0;
    text-decoration: none;
    transition: 0.25s ease;
    display: inline-block;
}

.unity-assets-section .asset-details .review:hover {
    color: #8B9A46;
    text-shadow: #9D2E36 2px 2px 2px;
    transition: 0.25s ease;
}

.review .fa-star {
    font-size: clamp(4pt, 2vw, 6pt);
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}


.testimony-section {
    background-color: #1F1F24;
    width: 100%;
    background-size: cover;
    background-position: center center;
    min-height: clamp(475px, 70vw, 800px);;
}

.testimony-section .section-subtitle {
    font-family: "Staatliches", sans-serif;
    font-size: clamp(1em, 70vw, 1.5em);
    color: #8B9A46;
    text-align: center;
    padding-top: 50pt;
}

.testimony-section a .section-title {
    font-family: "Staatliches", sans-serif;
    font-size: clamp(15pt, 50vw, 22pt);
    color: #dbebfa;
    text-align: center;
    transition: 0.15s ease;
}

.testimony-section a .section-title:hover {
    color: #8B9A46;
    text-shadow: #9D2E36 2px 2px 2px;
    -webkit-transform: translate(-1px, -1px);
    transition: 0.25s ease;
}

.testimony-section .box {
    position: relative;
    width: 100%;
    text-align: center;
}

.testimony-section .box img {
    width: 70%;
    display: none;
}

.testimony-section .box h3 {
    margin-top: 3em;
    font-size: clamp(12pt, 50vw, 15pt);

}

.testimony-section .review-title {
    font-family: "Staatliches", sans-serif;
    font-size: clamp(1.1em, 50vw, 1.45em);
    color: #8B9A46;
    text-shadow: black 2px 2px 2px;
    text-align: center;
    margin-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
}

.testimony-section p {
    font-size: clamp(0.7em, 50vw, 0.8em);
}

.testimony-section .writer a {
    font-family: "Staatliches", sans-serif;
    font-size: clamp(10pt, 50vw, 14pt);
    color: #dbebfa;
    margin-bottom: 10pt;
    transition: 0.15s ease;
}

.testimony-section .writer:hover a {
    color: #8B9A46;
    text-shadow: #9D2E36 2px 2px 2px;
    -webkit-transform: translate(-1px, -1px);
    transition: 0.25s ease;
}

.important-text {
    font-family: "Staatliches", sans-serif;
    color: #dbebfa;
    text-align: center;
    font-size: clamp(12pt, 50vw, 18pt);
}

#services {
    align-content: start;
    transition: all cubic-bezier(0.455, 0.03, 0.515, 0.955); /*-------Social button transform on click animation---------*/
    display: flex;
}

#services .service {
    font-family: "Staatliches", sans-serif;
    font-size: clamp(1.2em, 50vw, 1.25em);
    margin-bottom: 0;
}

#services .service img {
    transition: all cubic-bezier(0.455, 0.03, 0.515, 0.955); /*-------Social button transform on click animation---------*/
    width: clamp(1.2em, 50vw, 1.25em);
    height: clamp(1.2em, 50vw, 1.25em);
}

.tiny-gif {
    width: 75pt;
    margin-left: 0;
    padding-left: 0;
    aspect-ratio: auto;
    vertical-align: baseline;
}

footer {
    background-color: #1F1F24;
    width: 100%;
    background-size: cover;
    background-position: center center;
    min-height: clamp(475px, 70vw, 800px);
}

footer .social-links {
    align-content: start;
}

footer .social-links li {
    list-style: none;
}

footer .social-links a {
    font-size: clamp(1em, 50vw, 1.4em);
}

footer .social-links a img {
    width: clamp(1.2em, 70vw, 1.26em);
    height: clamp(1.2em, 70vw, 1.26em);
    transition: 0.25s ease;
    margin-right: 0.25em;
}

footer .footer-page-nav {
    justify-content: center;
    -webkit-justify-content: center;
}

footer .footer-page-nav h4 {
    padding-top: 2.5em;
    font-size: clamp(1.1em, 50vw, 1.3em);
}

footer nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(0em, 50vw, 2em);

    justify-content: center;
    -webkit-justify-content: center;
}

footer nav ul li a {
    margin-left: 0;
    padding-left: 0;
    font-size: clamp(0.7em, 50vw, 1em);
    text-wrap: nowrap;
}

footer nav ul li a img {
    width: clamp(0.2em, 50vw, 1em);
    height: clamp(0.2em, 50vw, 1em);
}