:root {
    --background: #d5e0e3;
    --original: #d5e0e3;
    --text: #595959;
    --footer-text: #0c313c;
    --accent: #8bc34a;
    --warning: #ca0016;
    --nav-text-light: #f1efef;
    --nav-text-dark: #0b323cb0;
}

html {
    background-color: var(--original);
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--background)!important;
}
.bg-original {
    background-color: var(--original);
}

.bg-accent {
    background-color: var(--accent);
}
h1 {
    color: var(--text);
    padding: 20px;
}

.nav-text-light {
    color: var(--nav-text-light) !important;
}
.nav-text-dark {
    color: var(--nav-text-dark) !important;
}

.content {
    /*opacity: 0.65;*/
    text-align: justify;
    /*padding-top: 15px !important;*/
    padding-bottom: 15px !important;
    /*margin-top: 20px !important;*/
    margin-bottom: 20px !important;
    background-color: rgba(255,255,255,0.5);
    color: var(--text);
    font-family: 'Open Sans',sans-serif;
    border-radius: 10px;
}
.content::after {
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.border-bottom {
    border-bottom: 1px solid #595959;
    padding-bottom: 10px;
}

footer {
    background-color: var(--original);
    color: var(--footer-text);
    padding: 5px;
    text-align: center;
    font-size: 16px;
    bottom: 0;
    width: 100%;
    position: relative;
    height: 30px;
}

.link:link, .link:visited, link:hover, link:active {
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;

}
#nav {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
}
#footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 100;
}
.navbar {
    width: 100%;
}
.active {
    font-weight: 800 !important;
    border-bottom: 1px solid var(--nav-text-dark);
    color: #0c313c !important;
}


.disableScroll {
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
}



.logo {
    display: inline-block;
    position: relative;
    width: auto;
    height: 35px;
}

.element {
    font-size: 18px;
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    color: transparent;
    /*border: 1px solid grey;*/
}

.element::before {
    content: attr(data-char);
    white-space: nowrap;
    overflow: hidden;
    width: 18px;
    height: 23px;
    text-align: center;
    color: #121212;
    position: absolute;
    left: 0px;
}
.targetElement::before {
    background-color: red;
    color: white;
}
.line {
    line-height: 16px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    height: 18px;
}

#game {
    padding: 10px 0 10px 0;
    cursor: pointer;
    /*background-color: lightblue;*/
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.hidden {
    opacity: 0;
    visibility: hidden;
}

#score, #timer {
    /*font-family: monospace;*/
    /*font-size: 22px;*/
    padding: 0 3px 0 3px;
    color: var(--nav-text-dark);
}
#info {
    font-size: 22px;
    color: var(--warning);
    font-weight: unset;
    vertical-align: -1px;
    font-style: normal;
}
.find {
    font-style: italic;
    font-weight: 100;
    font-size: 18px;
}

.block {
    display: flex;
}

.infobox, .scorebox, .timerbox, .retrybox{
    /*background-color: var(--nav-text-light)!important;*/
    color: var(--nav-text-dark);
    padding: 0px 10px 0px 10px;
    border-radius: 10px;
    margin: 10px 0 10px 5px;
    vertical-align: center;
    cursor: pointer;
}

.mutebox {
    position: fixed;
    display: inline-flex;
    top: 5px;
    right: 0px;
    z-index: 100;
}
.muteButton svg {
    fill: var(--nav-text-light)!important;
}
.muteButton, .modeButton {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    height: 33px;
    min-width: 33px;
    background-color: var(--nav-text-dark)!important;
    opacity: 70%;
    color: var(--nav-text-light);
    padding: 3px 3px 3px 3px;
    border-radius: 10px;
    cursor: pointer;

}
.modeButton {
    padding-top: 0;
    font-size: 23px;
    font-weight: bolder;
}
.retry-img {
    height: 22px;
    /*padding: 5px 0 0 0;*/
}
.description {
    display: inline-block;
    padding: 10px 0 10px 0;
}

.mute,.unmute {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    background-repeat: no-repeat;
    background-position: center; /* Centers the image */
    background-size: cover;
}

.mute {
    background-image: url('../assets/mute.svg');
}
.unmute {
    background-image: url("../assets/unmute.svg");
}
.rotate90 {
    transform: rotate(90deg);
}