@font-face {
    font-family: IBM Plex Mono; 
    src: url(../assets/fonts/Oxanium-Medium.ttf);
}

:root {
    --main: #505050;
    --accent: white;
    --accent2: #b3b3b3;
    --accent3: #a77844;

    /* Needed for settings */
    --main-rgb: 80,80,80; /* numeric RGB for frosted backgrounds */
    --main-element-alpha: 1; /* 0 (transparent) - 1 (opaque) */
    --main-element-bg: rgba(var(--main-rgb), var(--main-element-alpha));
}

html,body {
    margin: 0;
    padding: 0;
    font-family: IBM Plex Mono;
    background-color: black;
    height: 100%;
}

body {
    padding-top: 4em;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    color:white;
    margin:0; padding:0;
}

input {
    padding:1em;
    margin-block:1em;
    width: 100%;
    background-color: var(--main);

    border-radius: 0.5em;

    &:hover {
        border: 2px solid var(--accent3);
    }
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.center {
    text-align: center;
}

.welcome {
    margin-inline: 10%;
}

.settings-button img {
  display: block;
  margin-left: auto;

  position: absolute;
  inset: 0;
  width: auto;
  height: 100%;
  object-fit: cover;

  cursor: pointer;
  transition: transform 0.3s;
  transform: rotate(0deg);
}

/* For spin */
.settings-icon.is-open {
  transform: rotate(360deg);
}

.slide-panel {
    margin: 0 !important;

    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

    right: -600px; /* hidden off-screen, adjust width as needed */
    width: 300px;
    height: 70vh;

    transition: right 0.3s ease;
    z-index: 1000;

    background: var(--main);
	margin: 1em;
	margin-inline: 15%;
	padding: 1em;

	border: 2px solid var(--accent);
	border-radius: 0.5em;
    
}

.slide-panel.active {
  right: 0;
}

.slide-panel:hover {
	border: 2px solid var(--accent3);
}

.redirect-prompt {
    display: none;
}

.align {
  display: flex;
  vertical-align: middle;
}

#content {
  flex: 1;}

.hidden {
    display: none;
}

.flex {
  display: flex;
  background-color: blue !important;
}