/* darkicity.css by gdi & demonickatsu */
/* use with credit */

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

html {
    font-family: "Montserrat", sans-serif;
    height: max-content;
    min-height: 100%;
    text-align: center;
}

body {
    background: radial-gradient(circle at top right, #3000a0 0%, #000000 300vh);
    color: #b0b0b0;
}

a {
    color: #10c8f7;
    text-decoration: none;
}

a:visited {
    color: #a23ce6;
    text-decoration: none;
}

input {
    font-family: 'Montserrat', sans-serif;
    background-color: #33293f;
    color: #e0e0e0;
    border: 1px solid #6209cf;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 10px;
}

input[type='text'] {
    transition: scale 0.25s cubic-bezier(0.2, 2.5, 1, 1);
}

input[type='text']:focus {
    scale: 105%;
}

input[type='checkbox'] {
    transition: scale 0.25s cubic-bezier(0.2, 2.5, 1, 1);
}

input[type='checkbox']:checked {
    scale:120%
}

input[type='range'] {
    transition: scale 0.25s cubic-bezier(0.2, 2.5, 1, 1);
}

input[type='range']:active {
    scale: 105%;
}

button {
    font-family: 'Montserrat', monospace;
    transition: scale 0.25s cubic-bezier(0.2, 2.5, 1, 1);
    transition: background-color 0.15s ease-in-out;
    background-color: #33293f;
    color: #e0e0e0;
    border: 1.5px solid #6209cf;
    padding: 5px 10px;
    /* margin: 1.5px 0px; */
    cursor: pointer;
    border-radius: 10px;
}

button:hover {
    background-color: #7139b6;
}

button:active {
    scale: 90%;
}

button:not(:active) {
    scale: 100%;
}

select {
    font-family: 'Montserrat', monospace;
    transition: scale 0.25s cubic-bezier(0.2, 2.5, 1, 1);
}

select:focus {
    scale: 110%;
}

ul#games-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: auto auto auto;
}

.search-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

#search {
    width: 100%;
    max-width: 800px;
    font-size: 10pt;
    transition: scale 0.25s cubic-bezier(0.2, 2.5, 1, 1);
    text-align: center;
}

#search:focus {
    scale: 105%;
}