@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v15/92zPtBhPNqw79Ij1E865zBUv7mx9IgVG.ttf) format('truetype');
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  display: grid;
  height: 100vh;
}
body {
  --gap: 1em;
  background-image: linear-gradient(117deg, #faa700, #00d4fa) !important;
  font-family: ui-sans-serif, system-ui;
  margin: 0;
  display: grid;
}
.ui-page {
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  font-size: clamp(1.0625rem, 1.4553rem, 1.3125rem);
  grid-area: -1;
  padding: 2ch;
}
.ui-page:target {
  display: block;
}
.ui-page :is(h1, h2) {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.33), #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Jost', sans-serif;
  font-size: clamp(4rem, 7.5358rem, 6.25rem);
  font-weight: 600;
  margin: 0;
  text-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}
#home {
  background-image: linear-gradient(117deg, hsl(191, 44%, 60%), hsla(191, 100%, 60%, 0.5));
}
#home:target ~ .ui-dock a[href="#home"]::after {
  background: #000;
}
#following {
  background-image: linear-gradient(117deg, hsl(39, 90%, 60%), hsla(39, 100%, 60%, 0.5));
}
#following:target ~ .ui-dock a[href="#following"]::after {
  background: #000;
}
#search {
  background-image: linear-gradient(117deg, hsl(161, 40%, 57%), hsla(161, 100%, 60%, 0.5));
}
#search:target ~ .ui-dock a[href="#search"]::after {
  background: #000;
}
#settings {
  background-image: linear-gradient(117deg, hsl(21, 78%, 59%), hsla(21, 100%, 59%, 0.5));
}
#settings:target ~ .ui-dock a[href="#settings"]::after {
  background: #000;
}
.ui-dock {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 1.75em;
  bottom: var(--gap);
  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.3), 0 0 12px -7px rgba(0, 0, 0, 0.2);
  display: grid;
  gap: var(--gap);
  grid-auto-flow: column;
  left: 50%;
  padding: var(--gap);
  place-content: center;
  place-self: center;
  position: fixed;
  translate: -50% 0;
}
.ui-dock a {
  border-radius: 1em;
  height: 4em;
  padding: 0.5em;
  position: relative;
  width: 4em;
}
.ui-dock a::after {
  border-radius: 50%;
  bottom: -0.5em;
  content: '';
  display: block;
  height: 0.25em;
  left: 50%;
  margin: auto;
  position: absolute;
  translate: -50% 0;
  width: 0.25em;
}
.ui-dock a:hover {
  box-shadow: 0 0 10px -2.5px rgba(0, 0, 0, 0.3), 0 0 6px -3px rgba(0, 0, 0, 0.2);
}
.ui-dock a svg {
  stroke-width: 1;
  stroke: #FFF;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#home{
  background-color: #6CB5C6;
}
#search {
  background-color: #65BDA1;
}
#following {
  background-color: #F5B53F;
}
#settings {
  background-color: #E87D44;
}




.login-button {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
     backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 1.75em;
  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.3), 0 0 12px -7px rgba(0, 0, 0, 0.2);
    place-content: center;
  place-self: center;
  position: fixed;
  translate: -50% 0;
  
}

.login-button:hover {
    background-color: #45a049;
}

 .showcss{ display:block;}
  .hidecss{ display:none;}
  .showcss2{ display:block;}
  .hidecss2{ display:none;}
.logo-container {
    display: flex;
    align-items: center;
}

.logo-container img {
    width: 200px; /* Default width for larger screens */
    height: 200px; /* Default height for larger screens */
    margin-right: 10px; /* Space between image and title */
}

.logo-container h2 {
    margin: 0;
}

/* Media query for mobile devices */
@media only screen and (max-width: 600px) {
    .logo-container img {
        width: 100px; /* Adjusted width for smaller screens */
        height: 100px; /* Adjusted height for smaller screens */
    }
}