@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins';
}

.nav {
  border-radius: 10px;
  top: 0px;
  z-index: 1;
  width: 60%;
  margin-right: auto;
  margin-left: auto;
  background: #1c4589;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  margin: 15px;
  height: 56px;
}

.navMain {
  border-radius: 10px;
  top: 0px;
  z-index: 1;
  width: 60%;
  margin-right: auto;
  margin-left: auto;
  background: #1c4589;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  margin: 15px;
  height: 56px;
}

.nav-time {
  width:100%;
  padding: 15px;
  background: #1c4589;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  margin: 10px;
  height: 56px;
}

.nav-left {
  z-index: 1;
  width:100%;
  padding: 15px 50px;
  background: #1c4589;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  margin: 10px;
  height: 56px;
}

.nav,
.nav .nav-links {
  margin-right: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.navMain,
.navMain .nav-links {
  margin-right: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.nav > a {
  text-decoration: none;
}
.navMain > a {
  text-decoration: none;
}

.nav > button {
        text-shadow:
    -1px -1px 0 #000000, /* Top-left shadow (black) */
    1px -1px 0 #000000, /* Top-right shadow (black) */
    -1px 1px 0 #000000, /* Bottom-left shadow (black) */
    1px 1px 0 #000000; /* Bottom-right shadow (black) */
}
.navMain > button {
  text-shadow:
-1px -1px 0 #000000, /* Top-left shadow (black) */
1px -1px 0 #000000, /* Top-right shadow (black) */
-1px 1px 0 #000000, /* Bottom-left shadow (black) */
1px 1px 0 #000000; /* Bottom-right shadow (black) */
}
a {
  color: #ffffff;
  text-decoration: none;
  
}
a:hover {
  color: #008FFF;
}

.logo {
  font-size: 20px;
  text-align: center;
}

.logo > a {
  justify-content: center;
  text-align: center;
}
.navdiv {
  position:fixed;
  width:100%;
  z-index: 9999;
}

.nav .nav-links {
  column-gap: 20px;
  list-style: none;
}
.nav .nav-links a {
  transition: all 0.2s linear;
}

.navMain .nav-links {
  column-gap: 20px;
  list-style: none;
}
.navMain .nav-links a {
  transition: all 0.2s linear;
}

label {
  font-family: 'Poppins';
}

#nav-home > .button {
  margin-top: 10px;
  padding: 5px;
  width: 100px;
  border: 1px solid #ffffff;
  background: none;
  border-radius: 30px;
}

#nav-apps > .button {
  margin-top: 10px;
  padding: 5px;
  width: 100px;
  border: 1px solid #ffffff;
  margin-left: 5px;
  background: none;
  border-radius: 30px;
}

#nav-games > .button {
  margin-top: 10px;
  padding: 5px;
  width: 100px;
  border: 1px solid #ffffff;
  margin-left: 5px;
  background: none;
  border-radius: 30px;
}

#nav-proxy > .button {
  margin-top: 10px;
  padding: 5px;
  width: 100px;
  border: 1px solid #ffffff;
  margin-left: 5px;
  background: none;
  border-radius: 30px;
}

#nav-extra > .button {
  margin-top: 10px;
  padding: 5px;
  width: 100px;
  border: 1px solid #ffffff;
  margin-left: 5px;
  background: none;
  border-radius: 30px;
}

 #nav-settings > .button {
  margin-top: 10px;
  padding: 5px;
  width: 100px;
  border: 1px solid #ffffff;
  margin-left: 5px;
  background: none;
  border-radius: 30px;
}

@media screen and (max-width: 1200px) {
  .navMain .nav-links {
    margin-top: -40px;
  }
  .navMain {
    padding: 50px;
  }
  #nav-settings > .button {
    margin-top: 100px;
    padding: 5px;
    width: 100px;
    border: 1px solid #ffffff;
    margin-left: -650px;
    background: none;
    border-radius: 30px;
  }
}
@media screen and (max-width: 1100px) {
  .navMain .nav-links {
    margin-left: 30px;
  }
  #nav-settings > .button {
    margin-left: -670px;
  }
  #nav-extra > .button {
    margin-top: 100px;
    padding: 5px;
    width: 100px;
    border: 1px solid #ffffff;
    margin-left: -400px;
    background: none;
    border-radius: 30px;
  }
}
@media screen and (max-width: 1000px) {
  .navMain .nav-links {
    margin-left: 0px;
  } 
}