body {
    margin: 0;
}

@font-face {
    font-family: 'Micro5';
    src: url('./fonts/Micro5-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Pokemon';
    src: url('./fonts/Pokemon\ Classic.ttf');
}

@keyframes fadeInFromTop {
  0% {
    transform: translateY(-20%);
    opacity:0;
  }
  100% {
    transform: translateY(0);
    opacity:1;
  }
}

* {
    font-family: Pokemon;
}

h2 {
    text-shadow: 3px 0px #2e461b;
}

.micro5 {
    font-family: Micro5;
}

button {
    font-family: 'Pokemon';
    font-weight: 800;
    text-shadow: 2px 2px #6e6e6e;
    background-color: black;
    color: white;
    border: 2px solid white;
    border-radius: 10px;
}

button:hover {
    background-color: #222222;
}

button:active {
    background-color: #2e2e2e;
}

#content {
    background: repeating-conic-gradient(#aeff7e 0% 25%, #c8ff9b 25% 50%);
    background-size: 100px 100px;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

#maincontainer {
    width: 90vw;
    height: 90vh;
    border: 2px solid black;
    border-radius: 10px;
    overflow-y: hidden;
    animation: 0.6s ease-in-out 0s 1 fadeInFromTop;
}

#partitioncontainer {
    transform: translateY(0vh);
    transition: transform 0.4s ease-in-out;
    overflow:hidden; 
}

#firstquestion {
    margin-top: 0;
    padding-top: 0.83em;
}

#faq {
    background-color: black;
    color: white;
    overflow-y: scroll;
    scrollbar-color: white black;
}

#faq * {
    margin-left: 1vw;
}

#faq * a {
    margin-left: 0;
}

#title {
    background: repeating-conic-gradient(#6e6e6e 0% 25%, #8b8b8b 25% 50%);
    background-size: 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 10px;
}

#notes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color: white;
    margin: 2px 26px;
    background-size:10px;
    gap: 1px;
}

#notes * {
    text-align: center;
}

#title p {
    margin: 15px;
}

#entrytitle {
    font-size: 6em;
    text-shadow: 2px 2px 0px #aeff7e;
    transition: all 0.2s ease-in-out;
}

#entrytitle:hover {
    transform: scale(1.15) rotate(-3deg);
}

.partition {
    width: 100%;
    height: 90vh;
}

a {
    color: rgb(0, 0, 0);
    margin: 0;
    padding: 0;
}

i { 
    margin: 0;
    padding: 0;
}

#game {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 10px;
    background: transparent;
    overflow:hidden;    
    --url: url("https://hc-cdn.hel1.your-objectstorage.com/s/v3/e1b70eb3d2324688695605ff4fa6e2e314673b50_saton55.jpeg");
}

#game::before {
    content: "";
    z-index: -1; 
    width: 150%;
    height: 150%;
    position: absolute;
    y:-500px;
    bottom:10px; 
    background-size: 20%;
    background-repeat: repeat;
    background-image: var(--url);
    transform: rotate(45deg);  
}

#gamecontent {
    border: 2px solid black;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 50%;
    height:65%;
}

#controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 5px;
    border: 2px solid black;
    background-color: white;
    min-width: 50%;
    height: 30%;
}

#controls div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 10px;
}

.back {
    margin-top: 20px;
}

#pokeimage {
    filter: contrast(0%) brightness(0%);
    image-rendering: pixelated;
    height: 45vh;
    transition: filter 0.2s ease-in;
}

#imagebox {
    height: 45vh;
    width: 45vh;
}

#pokeidentifier {
    transform: translateY(-250px);
    background-color: #aeff7e;  
    justify-content: center;
    justify-self: center;
    max-width: 45vh;
    opacity: 0.7;
    visibility: hidden;
}

#hints {
    width: 100%;
}

#hints * {
    font-size: 12px;
}

#hints *:hover {
    font-size: 14px;
}

select, input, input:focus, input:active  {
    border:2px solid black;
    border-radius: 2px;
}

#play {
    height:70px;
    width:140px;
    font-size: 130%;
    font-weight:bold;
}

#guessbutton, #giveupbutton, #play, #hints * {
    transition:all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#play:hover, #guessbutton:hover, #giveupbutton:hover {
    transform: scale(1.1);
}

#play:active, #guessbutton:active, #giveupbutton:hover {
    transform: scale(1.05);
} 

#controls * p, #controls p{
    margin: 0 12px;
} 

#themebg {
    background-color: #222222;
    width:100%;
    height:100%;
    display:block;
    position:absolute;
    z-index: -600;
}

#themes * {
    margin-left: 1vw;
}

#themes #themebg {
    margin-left:0;
}