body {
    overflow: auto !important;
}


.gridpro {
    z-index: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 0.33fr);
    grid-template-rows: 320px 280px 280px;
    gap: 15px;
    padding: 20px;
    margin-top: 160px;
    align-self: center;
    grid-template-areas: 
    "theme theme features"
    "theme theme  features"
    "demo credits features";
}

.navbar {
    position: fixed;
    width: 1fr;
    margin: auto;
    height: 13.5vh;
    max-height: 115px;
    padding: 20px;
    z-index: 10;
    top: 0;
}

.theme {
background-color: rgba(235, 235, 235, 0.151);
backdrop-filter: blur(10px);
border-radius: 10px;
grid-area: theme;
text-align: center;
align-items: center;
overflow: auto;
padding: 20px;
border-right: solid 1px var(--gridBorder-color);
border-bottom: solid 1px var(--gridBorder-color);
}


.demo {
background-color: rgba(235, 235, 235, 0.151);
backdrop-filter: blur(10px);
border-radius: 10px;
grid-area: demo;
text-align: center;
align-items: center;
overflow: auto;
padding: 20px;
border-right: solid 1px var(--gridBorder-color);
border-bottom: solid 1px var(--gridBorder-color);
}

.credits {
background-color: rgba(235, 235, 235, 0.151);
backdrop-filter: blur(10px);
border-radius: 10px;
grid-area: credits;
text-align: center;
align-items: center;
overflow: auto;
padding: 20px;
border-right: solid 1px var(--gridBorder-color);
border-bottom: solid 1px var(--gridBorder-color);
}

.features {
background-color: rgba(235, 235, 235, 0.151);
backdrop-filter: blur(10px);
border-radius: 10px;
grid-area: features;
text-align: center;
align-items: center;
overflow: auto;
padding: 20px;
border-right: solid 1px var(--gridBorder-color);
border-bottom: solid 1px var(--gridBorder-color);
}

@keyframes spin {

    0% { transform: translate(-50%, -50%) rotateX(0) rotateY(0) rotateZ(0); }

    33% { transform: translate(-50%, -50%) rotateX(180deg) rotateY(0) rotateZ(0); }

    67% { transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg) rotateZ(0); }

    100% { transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg) rotateZ(180deg); }

}

.loadingDemo {
  background-color: rgba(0, 0, 0, 0);
  border: solid 2px rgba(162, 113, 206, 0.496);
  border-radius: 30%;
  position: relative;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: spin 2s ease-in-out forwards 1;
  left: 50%;
  top: 10%;
}


.loadingDemo:active {
  animation-play-state: paused;
}

.btn {
    position: relative;
    color: white;
    border-radius: 5px;
    border: none;
    background-color: rgba(26, 26, 26, 0.212);
    padding: 2px;
    margin: 2px;
    backdrop-filter: blur(10px);
    width: 70%;
    font-size: 20px;
    font-family: "Montserrat";
    transition: 200ms; 
    overflow: hidden;
    text-shadow: #474747 0px 0px 10px;
}

.btn:hover {
    transition: 200ms; 
    background-color: rgba(15, 15, 15, 0.212);
    color: rgb(217, 217, 217);
    cursor: not-allowed;
}

.btn:active {
    transition: 500ms; 
}


.FLthemeImg{
    border-radius: 30px;
    border: solid 5px rgba(95, 95, 95, 0.496);
    backdrop-filter: blur(10px);
    transition: 500ms;
    margin: 10px;
    transform: rotate3d(0, 0, 1, 0.6deg);
    perspective: 800px;
}
.FLthemeImg:hover{
    transform: scale3d(1.03, 1.05, 1.08);
    transition: 500ms;
}

.FLthemeImg:active{
    transform: scale3d(1.01, 0.97, 1.06) rotate3d(0, 0, 1, 0.6deg);
    transition: 500ms;
}

::-webkit-scrollbar {
    width: 0.5vw;
    transition: 500ms;

}

::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
}

body::-webkit-scrollbar-track {
    background-image: linear-gradient(to top , var(--scroll_track_one_dark-color), var(--scroll_track_two_dark-color) );
}

::-webkit-scrollbar-thumb {
    background: rgba(124, 124, 124, 0.377);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    transition: 500ms;
}

::-webkit-scrollbar-thumb:hover {
    transition: 500ms;
    background: rgba(163, 163, 163, 0.377);
}

::-webkit-scrollbar-thumb:active {
    transition: 500ms;
    background: rgba(102, 102, 102, 0.377);
}


@media (max-width: 768px) {
.gridpro {
    z-index: 0;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 540px 280px 280px 280px;
    margin-top: 60px;
    padding: 20px;
    align-self: center;
    grid-template-areas: 
    "theme"
    "features"
    "features"
    "credits";
}

.demo {
background-color: rgba(235, 235, 235, 0.151);
backdrop-filter: blur(10px);
border-radius: 10px;
grid-area: demo;
text-align: center;
align-items: center;
overflow: auto;
padding: 20px;
border-right: solid 1px var(--gridBorder-color);
border-bottom: solid 1px var(--gridBorder-color);
display: none;
}

.navbar {
    position: fixed;
    width: 1fr;
    margin-bottom: 0px;
    height: 8vh;
    max-height: 8vh;
    padding: 20px;
    z-index: 10;
    top: 0;
}
}