:root {
    font-size: min(calc(100vw/60), calc(100vh/35));
}

/* google fonts stuff */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

body.dark {
    --bg: #101010;
    --highlight: #202020;
    --main-accent: #ff8426;
    --semi-accent: #ffb780;
    --minor-text: #bbbbbb;
    --text: #ffffff;
}

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    background-color: var(--bg);
    color: var(--text);

    font-family: "Space Mono", monospace;
}

.content {
    /* width: 32rem; */
    display: flex;
    flex-direction: column;
    background-color: var(--highlight);
    padding: 2rem;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
}

.bold { font-weight: bold; }

.divider {
    border-top: dotted;
    border-color: var(--main-accent);
    border-width: .2rem;
    width: 100%;
}

/* #region SEARCH */

.search {
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-input {
    background-color: transparent;
    border: none;
    border-bottom: .15rem dashed var(--main-accent);
    color: var(--main-accent);
    font-family: inherit;
    font-weight: bold;
    font-size: 1.25rem;
}

.text-input:focus {
    outline: transparent;
}

.submit-button {
    margin-left: .75rem;
    background-color: var(--main-accent);
    border: none;
    border-radius: .25rem;
    
    display: block;
    
    color: var(--bg);
    font: 1.75rem;
    cursor: pointer;
    padding: .25rem;
    width: 1.5rem;
    text-align: center;
    font-weight: bold;
}

.submit-button:hover {
    background-color: #ffb780;
}

/* #endregion */

/* #region RESULTS */

.results {
    margin-top: 2rem;
    /* width: 30rem; */
}

.p-basics {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 .5rem;
}

.p-name-anchor {
    color: inherit;
    text-decoration: none;
}

.p-name {
    font-size: 1.5rem;
    text-decoration: underline;
    cursor: pointer;
}

.p-number {
    font-style: italic;
    color: var(--minor-text);
    margin-left: .5rem;
}

.p-abilities {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: .5rem 0 .5rem;
}

.p-typing {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.p-type-advantages {
    display: flex;
    flex-direction: column;
    margin: .5rem 0 .5rem;
}

.p-ta-cat {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .1rem 0px .1rem;
}

.p-ta-cat.invis { display: none; }

.p-ta-cat t {
    display: block;
    width: 12rem;
}

.p-ta-list {
    justify-self: right;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 20rem;
    flex-wrap: wrap;
}

.p-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr;
    margin: .5rem 0 .5rem;
}

.not-found {
    text-justify: center;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 2rem 2rem .5rem;
}

.invis {
    display: none;
}

.type {
    font-size: .75rem;
    height: 1.5rem;
    width: 4.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: .2rem;
    margin: .1rem;
}

/* #endregion */

/* #region TYPES */

.type.bug{
    background-color: #A6B91A;
}

.type.dark{
    background-color: #705746;
}

.type.dragon{
    background-color: #6F35FC;
}

.type.electric{
    background-color: #F7D02C;
}

.type.fairy{
    background-color: #D685AD;
}

.type.fighting{
    background-color: #C22E28;
}

.type.fire{
    background-color: #EE8130;
}

.type.flying{
    background-color: #A98FF3;
}

.type.ghost{
    background-color: #735797;
}

.type.grass{
    background-color: #7AC74C;
}

.type.ground{
    background-color: #E2BF65;
}

.type.ice{
    background-color: #96D9D6;
}

.type.normal{
    background-color: #A8A77A;
}

.type.poison{
    background-color: #A33EA1;
}

.type.psychic{
    background-color: #F95587;
}

.type.rock{
    background-color: #B6A136;
}

.type.steel{
    background-color: #B7B7CE;
}

.type.water{
    background-color: #6390F0;
}

/* #endregion */