body {
    margin:0;
    padding-top:40px;
}







.homecontent {  
    max-width:90%;
    margin:auto;
}

        

.hidden {
    visibility: hidden;
}

 .font-preview {
    height:calc(fit-content + 60px);
    white-space: nowrap;
    overflow-x: hidden;
    text-rendering: auto;
    line-height: calc(normal + 4px);
    /* text-transform: none;
    display: inline-block; */
    text-align: start;
    /* appearance: auto; */
    /* -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: field; */
    margin: 0em;
}

body {
    font-family: Arial, sans-serif; /* General body font */
}



.glass-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    height: auto;
    padding: 15px 20px;
    margin: auto;
    max-width: 1200px;
    width: 100%;
    border-radius: 12px;

    background: rgba(36, 57, 77, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  }

  .preview-text-section {
    width: auto;
}

  .preview-text-section input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    border-radius: 6px;
    color: #eee;
    font-size: 14px;
    width: 300px;
    outline: none;
  }

  .preview-text-section input::placeholder {
    color: #ccc;
  }

  .sorting-options select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    border-radius: 6px;
    color: #eee;
    font-size: 14px;
    outline: none;
    appearance: none;
  }

  /* Optional arrow styling for select */
  .sorting-options select {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='70,105 25,35 115,35' fill='%23ccc'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
  }

.font-list {
    display: flex;
    flex-wrap: wrap; /* Allow cards to wrap into rows */
    flex-direction: row-reverse;
    gap: 20px; /* Space between cards */
    padding: 0; /* Padding for the container */
    max-width:1200px;
    margin: auto;
}

.font-item {
    flex: 1 1 calc(33% - 16px); /* 3 cards per row on wide screens */
    position: relative; /* Necessary for absolute positioning of content */
    transition:0.2s scale cubic-bezier(0.28, 0.03, 0, 0.55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Rounded corners */
    overflow: hidden;
    z-index: 2;
    backdrop-filter: blur(10px);

}

.font-item:hover {
    z-index: 3;

    scale: 1;

}

/* .font-item:first-child {
    flex: 1 1 calc(100% - 16px); 
    height:120%;
}

.font-item:first-child .font-tile {
    height:332px;
}

.font-item:first-child .font-name {

    scale:1.5;
} */

.font-tile {
    background: rgba(255, 255, 255, 0.05);
    background-size: 100%; /* Ensure the background image covers the entire area */
    background-position: top center; /* Center the background image */
    overflow: hidden; /* Prevent overflow of content */
    transition: transform 0.3s, box-shadow 0.3s, background-size 0.6s, color 0.3s; /* Smooth transition for hover effect */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center the content vertically */
    align-items: center;
    color: rgb(183, 229, 245);; /* Text color for better contrast */
    text-align: center; /* Center align text */
    height: 220px;
    
}

.font-item:hover .font-tile {
    background-size: 110%;
    color: #d8f3ff;
}

 a  {
    text-decoration: none;
    /* padding: 20px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; */
}

.font-item:last-child > .font-tile {
    background-position: center center;
}

.font-select {
    text-decoration: none;
    color:inherit;
}

.font-info {
    opacity: 0.8; /* Hide text initially */
    transition: opacity 0.3s; /* Smooth transition for hover effect */
    margin-top:-4px;
    font-family: 'Fredoka', 'M PLUS Rounded 1c Static', 'Noto Sans Hebrew', 'Rubik', 'Suez One', 'Assistant';
    font-variation-settings: "wght" 400;
    position: relative;
}

.font-name {
    font-size: 100px; /* Font size for name */
    margin-top: 10px;
    margin-bottom: -15px; /* Space below the font name */
    color:#fff;
    text-decoration: none;
    line-height: 1.5em;
    min-inline-size: max-content;
    direction: rtl;
}

.font-enname, h3 {
    margin: 0.2em 0; /* Margins around the text */    
}


/* Show font-info on hover */
.font-tile:hover .font-info {
    opacity: 1; /* Show text on hover */
    filter: contrast(1);

}


.font-tile.alpha::after, .font-tile.beta::after {
    width: 100%;
    position: absolute;
    RIGHT: 0;
    color: transparent;
    white-space: nowrap;
    background: #ffffff00;
    HEIGHT: 0%;
    opacity: 0;
    box-shadow: 0 0 10px 0 #00000087;
    text-transform: uppercase;
    font-family: 'Fredoka', 'M PLUS Rounded 1c Static', 'Noto Sans Hebrew', 'Rubik', 'Suez One', 'Assistant';
    box-sizing: border-box;
}

.font-tile.alpha:hover::after, .font-tile.beta:hover::after {
    text-align: center;
    visibility: hidden;
    transition: .5s;
    visibility: visible;
    font-size: 25px;
    backdrop-filter: blur(4px);
    padding: 10px 10px;
    color: black;
    height: fit-content;
    top: 0;
    opacity: 1;
}

.font-tile.alpha::after{content: "alpha - starting an idea";    background: #ffffff70;}
.font-tile.beta::after{content: "beta - in production";    background: #ffffff70;}

.font-tile.new::after {
    content: "New!";
    background: #cd0000d6;
    width: 152px;
    left: -44px;
    top: 17px;
}

html[lang="he"] .font-tile.new::after {
    content: "חדש!";
    font-family: 'ot yaakov';
    font-size: 40px;
    line-height: 0.6;
}

.font-tile.updated::after {
    content: "Updated";
    background: #5ecd00d6;
    width: 190px;
    left: -50px;
    top: 30px;
}

html[lang="he"] .font-tile.updated::after {
    content: "עודכן";
    font-family: 'ot yaakov';
    font-size: 40px;
    line-height: 0.6;
}


.font-tile.new::after, .font-tile.updated::after {
    position: absolute;
    color: transparent;
    white-space: nowrap;
    opacity: 0;
    box-shadow: 0 0 10px 0 #00000087;
    text-transform: uppercase;
    font-family: 'Fredoka', 'M PLUS Rounded 1c Static', 'Noto Sans Hebrew', 'Rubik', 'Suez One', 'Assistant';
    transform: rotate(-45deg);
}


.font-tile.new::after, .font-tile.updated::after {
    text-align: center;
    visibility: hidden;
    transition: .5s;
    visibility: visible;
    font-size: 25px;
    backdrop-filter: blur(4px);
    padding: 10px 10px;
    color: #ffffff;
    height: fit-content;
    opacity: 1;
}


/* Responsive styles */
@media (max-width: 1200px) {
    .font-name { 
        font-size:80px;
    }
}

@media (max-width: 1100px) {
    .font-item {
        flex: 1 1 calc(50% - 16px); /* 2 cards per row on smaller screens */
    }
    .font-name { 
        font-size:120px;
    }
}

@media (max-width: 1100px) {
   
    .font-name { 
        font-size:100px;
    }
    
}

@media (max-width: 800px) {
    .font-item {
        flex: 1 1 100%; /* 1 card per row on mobile */
    }
    .preview-text-section input {
    width: 100%;
    }
    .preview-text-section {
        width: 100%;
    }
    .font-tile {
        height: 420px;
    }
    .font-name { 
        font-size:140px;
    }
}
@media (max-width: 700px) {
    .font-tile { height: 250px; }
    .font-name { font-size:100px; }
}

@media (max-width: 450px) {
    .font-tile { height: 200px; }
    .font-name { font-size:80px; }
}

.variable-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: url(images/variable.svg) no-repeat center center;
    cursor: pointer;
    background-size: 55%;
    background-color: #ffffff62;
    border-radius: 7px;
    transition: 0.2s;
    box-shadow: 0px 0px 5px 0px #000000ab;
    backdrop-filter: blur(5px);
}

.variable-icon:hover {
    background-color:#ffffff8e;
}

.variable-icon:active {
    box-shadow: inset 0px 0px 5px 0px #000000ab;

}

.font-name {
    transition: font-variation-settings 0.3s ease-in-out;
}

.font-tile.show-variation-controls {
    transition: font-variation-settings 0.3s ease-in-out;
}




@media only screen and (max-width: 600px) {
    .font-item {
        flex: 1 1 90%;
        position: relative;
        transition: 0.3s scale ease;
        box-shadow: 0 0 13px 0 #00000087;
        border-radius: 8px;
        overflow: hidden;
        z-index: 2;
    }

}