@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');



 * {
     font-family: "Nunito", sans-serif;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     outline: none;
     border: none;
     text-decoration: none;
     transition: .2s linear;
 }

 html {
     font-size: 100%;
     overflow-x: hidden;
     scroll-padding-top: 7rem;
     scroll-behavior: smooth;
 }

 body {
     /* background: #fff; */
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     flex-direction: column;

 }

 .gradient-background {
     height: 100vh;
     width: 100%;
     background: linear-gradient(#212121, #3a3a3a, #7a7a7a);
     position: fixed;
     top: 0;
     left: 0;
     z-index: -1;
     overflow: hidden;
 }

 button {
     margin-top: .3rem;
     display: inline-block;
     padding: .3rem 2rem;
     font-size: 1rem;
     color: #fff;
     background: orangered;
     cursor: pointer;
 }

 button:hover {
     opacity: .8;
 }



 .header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     background: whitesmoke;
     padding: .5rem 0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
     border-bottom: .5px solid gainsboro;
     text-align: center;
 }

 .header .logo {
     display: flex;
     font-size: 1rem;
     font-weight: bolder;
     color: white;
     align-items: center;
     vertical-align: middle;
     text-shadow: 2px 2px 4px #000000;
 }

 .header .logo span {
     color: orangered;
     font-size: 1.2rem;
     vertical-align: middle;
     margin-left: .5rem;
 }



 .container {

     width: 100%;
     max-width: 1200px;
     /* background: #fff; */
     background: transparent;

     margin-top: 1rem;
     margin-bottom: 7rem;




 }

 .grid-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
     gap: 10px;
     overflow-y: auto;
     max-height: calc(100vh - 10rem);
     padding: 1rem 1rem;
     /* background-color: #fff; */

 }









 .card {
     width: 100%;
     height: 210px;

     object-fit: cover;
     transform-style: preserve-3d;
     transition: all 0.5s ease-in-out;
     /* box-shadow: 0 .3rem .3rem rgba(0, 0, 0, .6); */



 }




 .front-image {
     width: 100%;
     height: 100%;


 }

 .card.flipped {
     transform: rotateY(180deg);
 }

 .front,
 .back {
     backface-visibility: hidden;
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;



 }

 .card .front {
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 10px;
     text-align: center;
     transform: rotateY(180deg);



 }

 .card .back {
     background-image: url("back-03.jpg");
     background-position: center center;
     background-size: cover;
     backface-visibility: hidden;
     /* box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3); */

     border: 2px solid transparent;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;


 }

 .card .back:hover {
     border-color: rgba(255, 255, 255, .6);
     box-shadow: 0 0 10px rgba(255, 255, 255, .4);
 }












 .navbar {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     display: block;
     align-items: flex-end;
     text-align: center;
     background: whitesmoke;
     box-shadow: 0 -.5rem 1rem rgba(0, 0, 0, .3);
     border-top: .5px solid gainsboro;
     padding: .5rem 0;
 }

 .navbar p {
     font-size: 1rem;
     text-transform: capitalize;
     color: grey;
     vertical-align: middle;
     display: flex;
     text-align: center;
     align-items: center;
     justify-content: center;
 }

 .navbar p span {
     font-size: 1.1rem;
     color: orangered;
     margin-left: .5rem;
 }

 .navbar h3 {
     font-size: 1rem;
     color: grey;
 }

 .navbar h3 span {
     font-size: 1.1rem;
     color: orangered;
     margin-left: .5rem;
 }

 .navbar button {
     margin-top: .5rem;
 }






 /* 1200px ve üstü */
 @media (min-width: 1200px) {
     .grid-container {
         grid-template-columns: repeat(8, 1fr);
     }



 }

 /* 768px - 1199px arası */
 @media (max-width: 1199px) and (min-width: 768px) {
     .grid-container {
         grid-template-columns: repeat(4, 1fr);
     }

 }

 /* 450px - 767px arası */
 @media (max-width: 767px) and (min-width: 450px) {
     .grid-container {
         grid-template-columns: repeat(3, 1fr);
     }


 }

 /* 450px ve altı */
 @media (max-width: 449px) {
     .grid-container {
         grid-template-columns: repeat(2, 1fr);
     }
 }