:root
{
  --logo-size: 12vh;
  --main_font_size: 3.0vh;
}

body
{
  font-size: var(--main_font_size);
  display: flex;
  justify-content: center; /* Centers children horizontally */
  align-items: center; /* Centers children vertically */
  min-height: 100vh; /* Ensures body is at least as tall as the viewport */
  margin: 0; /* Removes default margin */
  flex-direction: column; /* Stacks children vertically */
}

.logo
{
  display: flex;
  justify-content: center;
  margin-top: 1vh;
  width: 100vw;
  height: var(--logo-size);
}

.logo img
{
  width: var(--logo-size);
  height: var(--logo-size);
}

.at_bindubites
{
  display: flex;
  justify-content: center;
  font-weight: bold;
  margin-top: 1vh;
  margin-bottom: 2vh;
  font-size: 2vh;
}

.outer
{
  width: 84%;
  max-width: 800px;
  /* margin-left: 8%; */
  /* margin-right: 8%; */
  margin-top: 1.5vh;
  margin-bottom: 0vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(48, 48, 48, 0.7);
  border-radius: 10vh;
  min-height: 30px;
  position: relative;
  padding-top: 1vh;
  padding-bottom: 1vh;
  padding-left: 4vw;
  padding-right: 4vw;

  height: 5vh;
}

.inner
{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image: url('../image/logo_white.svg'); /* Set the background image */
  background-repeat: no-repeat; /* Ensure the image does not repeat */
  background-position: left center; /* Left-justify and vertically center the image */
  background-size: 4.5vh 4.5vh; /* Resize the background image to 48x48 pixels */
  /* background-color: rgba(48, 48, 48, 0.7); */
  cursor: pointer;

  height: 4.5vh;
  width: 85vw;
}

.outer:hover
{
  transform: scale(1.1);
}

.outer, .outer:visited
{
  text-decoration: none; /* Removes underline */
  color: inherit; /* Inherits the color from the parent element */
}

#website
{
  background-image: url('../image/logo_white.svg'); /* Set the background image */
}

#website:hover
{
  background-image: url('../image/logo.svg'); /* Set the background image */
}


/* Mobile Styles */
@media (max-width: 900px)
{
  :root
  {
    --logo-size: 12vh;
    --main_font_size: 1.2vh;
  }
  .outer
  {
    max-width: 400px;
  }
}