@font-face {
    font-family: 'Clash Font';

    src: url('fonts/Clash_Regular.otf');

    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Clash Font';

    src: url('fonts/Clash_Bold.otf');

    font-style: normal;
    font-weight: 700;
}

p {
    font-family: Clash Font;
}

h1 {
    font-family: 'Clash Font';
    font-weight: 700;
    font-size: 3em;
    text-align: center;
}

body {
    background-color: rgba(137, 43, 226, 0.698);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5em;
    gap: 2em;
}

.start-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: rgba(228, 202, 202, 0.457);
    border-radius: 1em;
    padding: 1.5em;
}

input {
    font-family: 'Clash Font';
    font-weight: 400;
}

.row-image-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100vw;
}

.sub {
    background-image: url('images/icons/icon_star_level.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 6em;
    height: 6em;
    background-color: transparent;
    cursor: pointer;
    border-style: none;
    font-family: 'Clash Font';
}

.main-form {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
}

.hidden {
    display: none;
}

@media screen and (max-width: 830px) {
    .row-image-container img {
        display: none;
    }
}

.error-msg {
    color: rgb(95, 1, 1);
    font-weight: 400;
    text-align: center;
}

.data-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.plr-name {
    font-family: Clash Font;
    font-weight: 700;
    font-size: 2em;
}

.card-icon {
    width: 100px;
    height: 147px;
}

.win-record-container {
    display: flex;
    flex-direction: row;

    min-width: 100vw;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.wins-losses {
    text-align: center;
}

.num_sum {
    font-size: 1.5em;
}

.percentage {
    font-size: 2em;
}

.wins {
    color: rgb(111, 182, 4);
}

.losses {
    color: rgb(181, 21, 21);
}

.cards-container {
    display: grid;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2em;
    margin: 1.5em;
}

@media screen and (max-width: 906px) and (min-width: 690px) {
    .cards-container {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
}

@media screen and (max-width: 689px) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
}

.card-slot {
    display: flex;
    flex-direction: row;
}

.used-num {
    width: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
}

.classic-header {
    font-family: Clash Font;
    font-size: 2em;
}

.against-header {
    margin-top: 4em;
}