@font-face {
    font-family: 'Greymalkin';
    src: url('fonts/greymalkin/graymalkin3d.ttf')  format('truetype')
}
@font-face {
    font-family: 'Fatsans';
    src: url('fonts/fatsans/FatsansShadow.ttf')  format('truetype')
}
@font-face {
    font-family: 'HighlandGothic';
    src: url('fonts/hg/HighlandGothicFLF-Bold.ttf')  format('truetype')
}

:root {
    --main-color: #03e9f4;
    --main-color--20: #03e9f420;
    --main-color--40: #03e9f440;
    --main-color--60: #03e9f460;
    --main-color--80: #03e9f480;
    --main-gradient--45: linear-gradient(45deg, #03e9f4a6, #00ffb3af, #03e9f49d);
    --main-gradient--90: linear-gradient(90deg, #03e9f4a6, #00ffb3af, #03e9f49d);
    --dark-gradient--45: linear-gradient(45deg, #00ffb310, #03e9f420, #00ffb310);
    --background: #15373f;
}

h1, h2, h3 {
    font-family: 'HighlandGothic';
}

div#results {
    margin-right: -1em;
}

.flex-cards {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
}

.flex-cards>article {
    cursor: pointer !important;
}

.flex-cards>article>header {
    display: flex;
    align-items: center;
}

.flex-cards>article {
    width: 100%;
    margin-right: 1em;
}

@media (min-width: 768px) {
    .flex-cards>article {
        width: Calc(50% - 1em);
    }
}

@media (min-width: 1024px) {
    .flex-cards>article {
        width: Calc(33% - 1em);
    }
}

@media (min-width: 1280px) {
    .flex-cards>article {
        width: Calc(25% - 1em);
    }
}


article>header>span:not([score]) {
    line-height: 1.15em;
}

article span[score] {
    display: inline-block;
    margin: .15em .5em .15em 0;
    border-radius: 50%;
    padding-top: .2em;
    vertical-align: middle;
    width: 1.9em;
    height: 1.9em;
    color: var(--pico-card-background-color);
    font-weight: bold;
    text-align: center;
    content: '100';
    flex-shrink: 0;
    flex-grow: 0;
}

span[score='0'],
span[score='1'],
span[score='2'],
span[score='3'],
span[score='4'],
span[score='5'],
span[score='6'],
span[score='7'],
span[score='8'],
span[score='9'] {
    background: #b90000;
}

span[score='10'],
span[score='11'],
span[score='12'],
span[score='13'],
span[score='14'],
span[score='15'],
span[score='16'],
span[score='17'],
span[score='18'],
span[score='19'] {
    background: #d25914;
}

span[score='20'],
span[score='21'],
span[score='22'],
span[score='23'],
span[score='24'],
span[score='25'],
span[score='26'],
span[score='27'],
span[score='28'],
span[score='29'] {
    background: #e07c1c;
}

span[score='30'],
span[score='31'],
span[score='32'],
span[score='33'],
span[score='34'],
span[score='35'],
span[score='36'],
span[score='37'],
span[score='38'],
span[score='39'] {
    background: #ec9b23;
}

span[score='40'],
span[score='41'],
span[score='42'],
span[score='43'],
span[score='44'],
span[score='45'],
span[score='46'],
span[score='47'],
span[score='48'],
span[score='49'] {
    background: #f3ae27;
}

span[score='50'],
span[score='51'],
span[score='52'],
span[score='53'],
span[score='54'],
span[score='55'],
span[score='56'],
span[score='57'],
span[score='58'],
span[score='59'] {
    background: #fac02b;
}

span[score='60'],
span[score='61'],
span[score='62'],
span[score='63'],
span[score='64'],
span[score='65'],
span[score='66'],
span[score='67'],
span[score='68'],
span[score='69'] {
    background: #ffce2f;
}

span[score='70'],
span[score='71'],
span[score='72'],
span[score='73'],
span[score='74'],
span[score='75'],
span[score='76'],
span[score='77'],
span[score='78'],
span[score='79'] {
    background: #b4c31d;
}

span[score='80'],
span[score='81'],
span[score='82'],
span[score='83'],
span[score='84'],
span[score='85'],
span[score='86'],
span[score='87'],
span[score='88'],
span[score='89'] {
    background: #7dbb10;
}

span[score='90'],
span[score='91'],
span[score='92'],
span[score='93'],
span[score='94'],
span[score='95'],
span[score='96'],
span[score='97'],
span[score='98'],
span[score='99'],
span[score='100'] {
    background: #37b000;
}

content {
    display: flex;
}

content>img {
    max-width: 50%;
    flex-shrink: 1;
}

dialog#modal-game article {
    max-width: calc(100vw - var(--pico-spacing) * 4) !important;
}

dialog#modal-game content {
    flex-direction: column;
}

#review, #gamedetails {
    position: relative;
    padding: 1em 1em 0 1em;
    overflow: hidden;
    margin-bottom: 2em;
}

#review>div {
    display: flex;
    justify-content: space-between;
    height: max-content;
    flex-wrap: wrap;
}

#review>div>div {
    width: Calc(33% - 20px);
    background: var(--dark-gradient--45);
    padding: .5em 1em;
    margin-bottom: 1em;
}

.voto {
    overflow: hidden;
}

.voto h3:before {}

.stars {
    width: auto;
    position: relative;
    display: inline-block;
    height: 3em;
}

.stars>span {
    font-size: 34px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0.75;
    line-height: 1;
}

.stars>span:nth-child(1) {
    background-image: linear-gradient(0deg, #ff114d, #eb520b);
    background-image: -webkit-linear-gradient(0deg, #ff114d, #eb520b);
}

.stars>span:nth-child(2) {
    background-image: linear-gradient(0deg, #eb700b, #ebb70b);
    background-image: -webkit-linear-gradient(0deg, #eb700b, #ebb70b);
}

.stars>span:nth-child(3) {
    background-image: linear-gradient(0deg, #ebb70b, #d3ff11);
    background-image: -webkit-linear-gradient(0deg, #ebb70b, #d3ff11);
}

.stars>span:nth-child(4) {
    background-image: linear-gradient(0deg, #d3ff11, #41b909);
    background-image: -webkit-linear-gradient(0deg, #d3ff11, #41b909);
}

.stars>span:nth-child(5) {
    background-image: linear-gradient(0deg, #1eb909, #09b93e);
    background-image: -webkit-linear-gradient(0deg, #1eb909, #09b93e);
}

.stars + .score {
    box-sizing: content-box;
    position: absolute;
    display: inline-block;
    height: 34px;
    border-left: 2px solid var(--main-color);
    border-image: var(--main-gradient--45);
    border-image-slice: 1;
    padding: .5em .75em 0em;
    width: auto;
}

.TGM a {
    margin: 0 .5em;
    color: var(--main-color);
}
.TGM a:hover {
    text-shadow: 0px 0px 10px var(--main-color--80);
}

.loading {
    width: 115px;
    height: 115px;
    box-sizing: content-box;
    border-radius: 50%;
    margin: 1em auto;
    border: 2px solid;
    border-top-color: transparent;
    border-right-color: var(--main-color);
    border-bottom-color: var(--main-color);
    border-left-color: var(--main-color);
    animation: spin 3s linear infinite;
}

.loading::after {
    content: '';
    box-sizing: content-box;
    margin: 5px;
    border: 2px solid;
    border-top-color: var(--main-color);
    border-right-color: var(--main-color);
    border-bottom-color: transparent;
    border-left-color: var(--main-color);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    display: block;
    position: absolute;
}

.loading::before {
    content: '';
    box-sizing: content-box;
    border: 2px solid;
    border-top-color: var(--main-color);
    border-right-color: var(--main-color);
    border-bottom-color: var(--main-color);
    border-left-color: transparent;
    width: 90px;
    height: 90px;
    margin: 10px;
    border-radius: 50%;
    animation: spin 3s linear infinite;
    display: block;
    position: absolute;
}

@keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

#gamedetails > div {
    display: flex;
    flex-direction: row;
}

.data {
    flex-flow: wrap;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
}

div.data > div {
    width: auto;
    display: inline-block;
    margin: 0 1rem 1rem 1rem;
    padding: .5em 1em;
    border: 1px dashed var(--main-color);
    border-left: 5px solid var(--main-color);
    border-image: var(--main-gradient--45);
    border-image-slice: 1;
    box-shadow: 4px 4px 3px black;
    min-width: 25%;
}

.image {
    flex-shrink: 0;
}

h3 {
    font-size: 26px;
    margin-bottom: .2em;
}

p {
    margin-bottom: .2em;
}

body {
    font-size: 16px;
}

#platforms i.fa-brands {
    font-size: 3em;
    padding: 0 .25em;
}


@media screen and (min-width: 761px) and (max-width: 1124px) {
    #review>div>div {
        width: Calc(50% - 20px) !important;
    }
}

@media screen and (max-width: 760px) {
    #review>div>div {
        width: 100% !important;
    }

    #gamedetails>div {
        flex-direction: column;
    }

    #gamedetails .image {
        margin: 0 auto 1em auto ;
    }

    #gamedetails .data> div {
        margin: 0 1em 1em 0;
    }
}

/* scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #00000055;
}
::-webkit-scrollbar-thumb {
  background: var(--main-color)42;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--main-color);
}

#review, #gamedetails {
    border: 2px solid var(--main-color);
    border-image: var(--main-gradient--45);
    border-image-slice: 1;
    box-shadow: 0 0 15px var(--main-color--60);
}