@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playball&family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

body, html {
    font-family: "Share Tech Mono", 'Segoe UI', Tahoma;
    margin: 0;
    padding: 0;
    scrollbar-color: grey transparent;
}

a {
    color:black;
    text-decoration-line: none;
}
a:hover {
    text-decoration-line: underline;
}

#top-margin {
    margin-bottom: 6vw;
}

.cross-btn {
    margin: 0;
    font-size: 1vw;
    position: absolute;
    right: 0.1vw;
    top: 0.1vw;
    cursor: pointer;
    padding: 0.25vw;
    padding-right: 0.8vw;
}

#login-box {
    display: none;
    position: fixed;
    z-index: 100;
    top: 10vw;
    left: 30vw;

    background-color: #F9F0E9;
    border-radius: 0.3vw;
    border: solid 0.1vw black;
    padding: 0.5vw;

    width: 30vw;
    padding-bottom: 1vw;
}

#login-identifier {
    font-family: "Share Tech Mono", 'Segoe UI', Tahoma;
    width: 70%;
    height: 1.7vw;
    border: solid 0.1vw black;
    border-radius: 0.2vw;
    padding-left: 0.5vw;

    margin-top: 2vw;
    margin-bottom: 1vw;
    margin-left: calc(15% - 1vw);
}

#login-passwrd {
    font-family: "Share Tech Mono", 'Segoe UI', Tahoma;
    width: 70%;
    margin-left: calc(15% - 1vw);
    height: 1.7vw;
    border: solid 0.1vw black;
    border-radius: 0.2vw;
    padding-left: 0.5vw;

    margin-bottom: 1vw;
}

#login-submit {
    font-family: "Share Tech Mono", 'Segoe UI', Tahoma;
    font-size: 0.8vw;
    height: 1.7vw;
    background-color: rgb(255, 116, 139);
    margin-bottom: 0.5vw;
    margin-left: calc(50% - 2.5vw);

    border: solid 0.1vw black;
    border-radius: 0.2vw;
    border-right: solid 0.15vw black;
    border-bottom: solid 0.15vw black;

    cursor: pointer;
}
#login-submit:active {
    border: solid 0.1vw black;
    border-radius: 0.2vw;
}

#login-error {
    color: red;
    margin-top: -0.5vw;
    width: 70%;
    margin-left: calc(15% - 1vw);
}

#logo {
    position: fixed;
    top: 0.9vw;

    width: 9.65vw;
    height: 4vw;

    background: url(/images/site/ScienseRegular.svg) center center no-repeat;
    background-size: contain;
    overflow: visible;
}

#navbar {
    position: fixed;
    width: 4vw;
    left: 0;
    top: 6vw;
}

.navbarItem {
    width: 100%;
    margin: 0;
    height: 4vw;
    border: solid 0.1vw black;
    border-top: none;
    border-left: none;
    background-color: #F9F0E9;
    border-right: solid 0.2vw black;
    cursor: pointer;
}

.navbarItem.top {
    border: solid 0.1vw black;
    border-right: solid 0.2vw black;
    border-radius: 0 0.3vw 0 0;
    border-left: none;
}

.navbarItem.bottom {
    border: solid 0.1vw black;
    border-right: solid 0.2vw black;
    border-radius: 0 0 0.3vw 0;
    border-top: none;
    border-left: none;
}

.navbarItem.selected {
    border-right: solid 0.1vw black;
    width: 4.1vw;
    background-color: rgb(238, 230, 222);
    border-left: none;
}

.navbarImg {
    width: 2.5vw;
    height: 4vw;
    margin-left: calc(50% - 2.5vw / 2);

    background: url('/images/site/ScienseSmall.svg') center center no-repeat;
    background-size: contain;
}

#logoImg {
    width: 3.5vw;
    margin-left: calc(50% - 3.5vw / 2);
}

#NavGlobe {
    width: 3vw;
    margin-left: calc(50% - 3vw / 2);
    
    background: url('/images/site/Globe.png') center center no-repeat;
    background-size: contain;
}

#navTV {
    background: url('/images/site/tv-512.webp') center center no-repeat;
    background-size: contain;
}

#WinAmp {
    width: 3vw;
    margin-left: calc(50% - 3vw / 2);

    background: url('/images/site/WinAmp.png') center center no-repeat;
    background-size: contain;
}

#navSettings {
    background: url('/images/site/Settings.png') center center no-repeat;
    background-size: contain;
}

.VerifiedCheck {
    height: 0.95em;
    width: 0.95em;
    display: inline-block;
    vertical-align: -0.12em;
    margin-left: 0.4em;

    background: url('/images/site/Verified.png') center center no-repeat;
    background-size: contain;
}

.tooltiptext {
  visibility: hidden;
  background-color: rgb(255, 255, 255);
  color: #000000;
  border: solid 0.1vw black;
  text-align: center;
  padding: 0.3vw 0.5vw;
  border-radius: 0.2vw;
  margin-left: 0.3vw;
  font-size: 0.7vw;
  font-weight: 600;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;

}

.award {
    height: 1em;
    width: 1em;
    border-radius: 0.5em;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.25em;

    background: url('/Noel.jpg') center center no-repeat;
    background-size: contain;
    cursor: help;

}

.award:hover .tooltiptext {
    visibility: visible;
    transition-delay: 0.2s;
}