body {
    background-color: #1b1b1b;
    margin: 0;
    margin-top: 0;
    padding: 2vw;
    padding-bottom: 0;
    font-family: 'Newsreader', serif;
}


.logo-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center the contents */
    margin-bottom: 20px; /* Adjust as needed */
    cursor: pointer;
}

.logo-svg {
    width: 100%; /* Allow the logo to fill its container */
    max-width: 300px; /* Set a maximum width for the logo */
    text-align: center 
}

#motto {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -10em; /* Adjust as needed */
}


/* Ovo su animirane reci*/
#text1,
#text2 {
    user-select: none;
    font-size: 2em;
    font-weight: bold;
    position: absolute;
}

#linkedin-button {
    vertical-align: middle; /* Aligns the image vertically with the text */
    width: 1em; /* Sets the width of the image equal to the font size of the text */
    height: auto; /* Allows the image to maintain its aspect ratio */
    margin-bottom: 0.3em;
    margin-left: 0.2em; /* Adds some space between the text and the image */
    cursor: pointer; /* Changes cursor to pointer when hovering over the image */
    transition: filter 0.3s;
  }
  #linkedin-button:hover {
    filter: grayscale(0%) brightness(50%);
  }

#dynamic-word {
    display: inline-flex; /* Use inline-flex to prevent line breaks */
    align-items: center;
    filter: url(#threshold) blur(0.5px);
    margin-left: 1em;
}

.content {
    color: #F2EBE3;
    text-align: center;
    padding: 0 20px; /* Add padding to the sides of the content */
    max-width: 900px; /* Adjust the maximum width as needed */
    margin: 0 auto; /* Center the content horizontally */
}   

#title {
    font-size: 36px; /* Adjust the font size of the title */
    padding-bottom: 1em;
    font-weight: 600; /* Adjust the font weight of the title */
    margin: 0; /* Remove default margin */
}

p {
    text-align: justify;
}

.achievement-container{
    display: flex;
    justify-content: space-around;
}

@property --num1 {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
  }
  
  @property --num2 {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
  }
  
  @property --num3 {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
  }
  
  #counter1 {
    animation: counter1 3s normal ease-in-out forwards;
    counter-reset: num1 var(--num1);
    font-weight: 800;
    font-size: 1.5rem;
  }
  #counter1::after {
    content: counter(num1);
  }
  
  @keyframes counter1 {
    from {
      --num1: 0;
    }
    to {
      --num1: 27; /* End number for first div */
    }
  }
  
  #counter2 {
    animation: counter2 3s normal ease-in-out forwards;
    counter-reset: num2 var(--num2);
    font-weight: 800;
    font-size: 1.5rem;
  }
  #counter2::after {
    content: counter(num2);
  }
  
  @keyframes counter2 {
    from {
      --num2: 0;
    }
    to {
      --num2: 7; /* End number for second div */
    }
  }
  
  #counter3 {
    animation: counter3 3s normal ease-in-out forwards;
    counter-reset: num3 var(--num3);
    font-weight: 800;
    font-size: 1.5rem;
  }
  #counter3::after {
    content: counter(num3);
  }
  
  @keyframes counter3 {
    from {
      --num3: 0;
    }
    to {
      --num3: 20; /* End number for third div */
    }
  }

.button-container {
    margin-top: 20px; /* Add margin between question mark and buttons */
}

.logo-container .button-container{
    display: flex;
    gap: 1em;
}

.button {
    font-size: 8vw;
    padding: 0; /* Adjust padding for buttons */
    margin: 0; /* Add margin between buttons */
    border: none; /* Remove default button border */
    cursor: pointer;
    transition: color 0.3s;
    user-select: none;
}

.button:hover {
    color: #777777; /* Change background color on hover */
}

.logo-container .button {
    font-size: 2.5em;
}


.description {
    font-size: 18px; /* Adjust the font size of the description */
}

.divider {
    height: 10px; /* Adjust the height as needed */
    margin-top: 0;
    margin-bottom: 2em;
    position: relative;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Add other styles for your content */
}


#filters{
    display: none;
}

a{
    color: #777777;
    text-decoration: none;
}

.privacy-policy-link {
    margin: 0;
    color: #777777; /* Gray color */
    cursor: pointer; /* Show pointer cursor on hover */
}

.privacy-policy-link:hover {
    text-decoration: underline; /* Underline the text on hover */
}


.divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px; /* Width of the divider */
    height: 100%; /* Height of the divider */
    background-color: #000; /* Color of the divider */
}

.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; /* Diameter of the dot */
    height: 8px; /* Diameter of the dot */
    border-radius: 50%; /* Shape the dot into a circle */
    background-color: #dbdbdb; /* Color of the dot */
}

/* Media query for smaller screens (e.g., phones) */
@media (max-width: 768px) {
    .logo-svg {
        max-width: 100%; /* Allow the logo to fill the viewport width */
    }
    
    .button {
        font-size: 15vw;
    }

    .title {
        padding-bottom: 2em;
    }

    .divider {
        height: 10px; /* Adjust the height as needed */
        margin-top: 0.5em;
        margin-bottom: 1.5em;
        position: relative;
    }

    .logo-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px; /* Add margin between logo and buttons */
    }

    .footer-content{
        margin-top: 20em;
    }

    #dynamic-word {
        filter: url(#threshold) blur(0.2px);
    }
    
    .logo-container .button {
        font-size: 9vw;
    }
    
}