@font-face {
    font-family: FredokaMedium;
    src: url("/fonts/Fredoka-Medium.ttf");
}

body {
    margin: 0px;
    padding: 20px;
    display: flex;
    justify-content: center;
    font-family: FredokaMedium;
    color: white;

    background-image: url("/characters/penny/bg2.png");
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    backdrop-filter: blur(8px);
}

a {
    color: rgb(167, 167, 167);
}

.main-holder {
    display: grid;
    grid-template-columns: 3fr 225px 225px;

    /*For 2 abilities*/
    grid-template-rows: 65px 620px 65px;
    max-width: 1100px;
}

.left-side {
    background: #2A2A2A;
    background: linear-gradient(0deg, rgba(42, 42, 42, 1) 0%, rgba(70, 70, 70, 1) 100%);
    grid-row: 1/-1;
    grid-column: 0/1;
    overflow-y: scroll;
    border: solid black;
    border-width: 10px 0px 10px 10px;
    border-radius: 10px 0px 0px 10px;

    scrollbar-color: #2a2a2a rgba(70, 70, 70, 1);
}

/* Track */
::-webkit-scrollbar-track {
    background: linear-gradient(0deg, rgba(42, 42, 42, 1) 0%, rgba(70, 70, 70, 1) 100%);
  }

.mid-side {
    background: #2A2A2A;
    background: linear-gradient(0deg, rgba(42, 42, 42, 1) 0%, rgba(70, 70, 70, 1) 100%);
    text-align: center;
    grid-row: 1/-1;
    grid-column: 2/3;
    border: solid black;
    border-width: 10px 10px 10px 0px;
    border-width: 10px 10px 10px 0px;
    border-radius: 0px 10px 10px 0px;
}

.right-side {
    background: #2A2A2A;
    background: linear-gradient(0deg, rgba(42, 42, 42, 1) 0%, rgba(70, 70, 70, 1) 100%);
    text-align: center;
    grid-row: 2/2;
    grid-column: 3/3;
    border: solid black;
    border-width: 10px 10px 10px 0px;
    border-radius: 0px 10px 10px 0px;
}

.greybg {
    background-color: rgba(0, 0, 0, 0.5);
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
}

.left-side > .greybg {
    margin: 10px 0px 10px 10px;
    padding: 10px 0px 10px 10px;
}

.mid-side > .greybg {
    margin: 10px 10px 10px 0px;
    padding: 10px 10px 10px 10px;
}

.mid-side > .greybg > img {
    width: 100%;
    background-color: black;
    border-radius: 5px;
}

.ability-box {
    background-color: rgba(0, 0, 0, 0.5);
}
.star-group {
    background-color: rgba(0, 0, 0, 0.5);
}

.star-group > img {
    width: 25px;
}

.stat-box {
    padding: 5px;
    border-radius: 5px;
}

.stat-box > p {
    margin: 2px;
}

.twisted-button {
    margin: 10px;
    border: 5px solid black;
    border-radius: 10px;
    background: #BA666B;
    background: linear-gradient(90deg,rgba(186, 102, 107, 1) 0%, rgba(247, 156, 156, 1) 50%, rgba(186, 102, 107, 1) 100%);
}

.twisted-button > a {
    color: rgb(104, 59, 59);
}

/*STYLINGS FOR MOBILE, YOU SHOULDN'T NEED TO EDIT THESE*/
@media screen and (max-width: 800px) {

    .main-holder {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        max-width: 1100px;
        background-color: black;
        border-radius: 10px;
    }
    
    .mid-side {
        background: #2A2A2A;
        background: linear-gradient(0deg, rgba(42, 42, 42, 1) 0%, rgba(70, 70, 70, 1) 100%);
        text-align: center;
        grid-row: 1/2;
        grid-column: 1/3;
        border: solid black;
        border-width: 10px 10px 0px 10px;
        border-radius: 10px 10px 0px 0px;
    }

    .mid-side > .greybg > img {
        width: 50%;
        background-color: black;
        border-radius: 5px;
    }

    .stat-box-holder {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .stat-box {
        width: 150px;
    }
    
    .right-side {
        background: #2A2A2A;
        background: linear-gradient(0deg, rgba(42, 42, 42, 1) 0%, rgba(70, 70, 70, 1) 100%);
        text-align: center;
        grid-row: 2/3;
        grid-column: 2/3;
        border: solid black;
        border-width: 10px 10px 0px 10px;
        border-radius: 0px 0px 10px 0px;
    }

    .left-side {
        background: #2A2A2A;
        background: linear-gradient(0deg, rgba(42, 42, 42, 1) 0%, rgba(70, 70, 70, 1) 100%);
        grid-row: 3/4;
        grid-column: 1/3;
        overflow-y: scroll;
        border: solid black;
        border-width: 10px;
        border-radius: 10px;
        overflow-y:visible;
        scrollbar-color: #2a2a2a rgba(70, 70, 70, 1);
    }

    .left-side > .greybg {
        margin: 10px;
        padding: 10px;
    }
    
    .mid-side > .greybg {
        margin: 10px;
        padding: 10px;
    }

}