@media all and (max-width: 1300px) {
    #profile-main-wrapper {
        width: 90%;
    }
    #about-amplua,
    #about-spec {
    margin-left: 5%;
    }
}

@media all and (max-width: 1170px) {
    #graph-card {
        width: 355px;
        height: 250px;
    }
    
    #medium-card {
        width: 355px;
        height: 250px;
    }
    
    #position-card {
        width: 230px;
        height: 250px;
    }
    
    #matches-card {
        width: 720px;
        height: 350px;
    }
    
    #compare-card {
        width: 230px;
        height: 350px;
    }


}

@media all and (max-width: 1100px) {
    #profile-main-wrapper {
        width: 95%;
    }
    

}

@media all and (max-width: 1050px) {
    #profile-main-wrapper {
        width: 100%;
        margin-top: 7vh;
    }

    #profile-wrapper {
        margin-top: 1px;
        margin-bottom: 1px;
        border-radius: 0;
    }

    #down-wrap {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .info-value {
        width: 120px;
        height: 90%;
        color: aliceblue;
        font-family: 'Exo 2';
        padding: 2.5px;
        font-size: 14px;
    }

    #graph-card {
        width: 345px;
        height: 250px;
    }
    
    #medium-card {
        width: 345px;
        height: 250px;
    }
    
    #position-card {
        width: 220px;
        height: 250px;
    }
    
    #matches-card {
        width: 700px;
        height: 350px;
    }
    
    #compare-card {
        width: 220px;
        height: 350px;
    }


    #about-amplua:hover::after {
        width: 100px;
        left: -115px;
        bottom: unset; /* Положение подсказки */
        top: 50%;
    }
}

@media all and (max-width: 930px) {
    #graph-card {
        width: 410px;
        height: 280px;
    }
    
    #medium-card {
        width: 410px;
        height: 300px;
    }

    #position-card {
        width: 285px;
        height: 280px;
    }
    
    #matches-card {
        width: 705px;
        height: 380px;
    }

    #compare-card {
        width: 285px;
        height: 300px;
    }

    .card:nth-child(2) {
        margin-left: 10px;
        margin-right: 0px;
    }

    #photo-wrapper {
        width: 150px;
        height: 150px;
        top: 75px;
        left: 55px;
    }

}

@media all and (max-width: 830px) {
    .info-value {
        width: 100px;
        height: 90%;
        color: aliceblue;
        font-family: 'Exo 2';
        padding: 2.5px;
        font-size: 12px;
    }

    #photo-wrapper {
        width: 150px;
        height: 150px;
        top: 75px;
        left: 35px;
    }

    .info-header {
        font-size: 10px;
    }

    .info-header-stat {
        font-size: 10px;
    }
}



@media all and (max-width: 768px) {

    #profile-main-wrapper {
        margin-top: 10vh;
    }

    #up-wrap {
        width: 100%;
        height: 200px;
        position: relative;
    }

    #down-wrap {
        padding-top: 2.5%;
    
    }

    #player-info-wrapper {
        background-color: rgb(18, 18, 18);
        position: relative;
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: end;
        box-shadow: 0px 3px 10px 0px rgb(0, 0, 0);
    }

    .info-card{
        margin-top: 30px;
    }

    .info-value {
        width: 100px;
        height: 50%;
        color: aliceblue;
        font-family: 'Exo 2';
        padding: 2.5px;
        font-size: 12px;
    }

    .info-value-stat {
        width: 100%;
        height: 80%;
        font-size: 28px;
    }

    #for-color {
        background-color: #202020;
        height: 0px;
    }

    #profile-wrapper {
        margin-top: 2px;
        margin-bottom: 1px;
        border-radius: 0;
        border-top: 1px solid goldenrod;
    }

    #photo-wrapper {
        width: 150px;
        height: 150px;
        top: 25px;
        left: 20px;
    }

    a {
        text-decoration: none;
    }

    body {
        overflow-x: hidden;
    }

    #about-amplua:hover::after,
    #about-spec:hover::after {
        z-index: 9999;
    }

    #about-spec:hover::after {
        width: 150px;
    }

}

@media all and (max-width: 739px) {
    .info-card-stat {
        width: 20%;
    }
    #photo-wrapper {
        width: 150px;
        height: 150px;
        top: 25px;
        left: 15px;
    }
}

@media all and (max-width: 705px) {
    #graph-card {
        width: 390px;
        height: 280px;
    }
    
    #medium-card {
        width: 390px;
        height: 300px;
    }

    #position-card {
        width: 265px;
        height: 280px;
    }
    
    #matches-card {
        width: 665px;
        height: 380px;
    }

    #compare-card {
        width: 265px;
        height: 300px;
    }
}

@media all and (max-width: 680px) {

    #up-wrap {
        width: 100%;
        height: 500px;
        position: relative;
    }

    #down-wrap {
        padding-top: 5%;
    }

    #info-wrap {
        /* background-color: aquamarine; */
        background-color: rgb(18, 18, 18);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
    }

    #info {
        width: 100%;
        height: 80%;
        background-color: rgb(18, 18, 18);
        display: flex;
        flex-direction: column;
        border-top-right-radius: 10px;
        align-items: center;
    
    }

    #name {
        background-color: rgb(18, 18, 18);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
    }

    /* .under-photo:nth-child(1){
        margin-bottom: 5px;
    } */

    .under-photo:nth-child(2){
        margin-bottom: 35px;
        margin-top: 2.5px;
    }

    #role {
        position: absolute;
        left: calc(50% + 2.5px);
        top: calc(50% + 2.5px);
    }

    #flag {
        position: absolute;
        left: calc(50% - 27.5px);
        top: calc(50%);
    }

    #number-span {
        font-family: 'Exo 2';
        font-size: 36px;
        font-style: italic;
        font-weight: 900;
        color: grey;
        background-color: rgb(18, 18, 18);
    }

    #player-info-wrapper {
        background-color: rgb(18, 18, 18);
        position: relative;
        width: 100%;
        height: 500px;
        display: flex;
        justify-content: end;
        box-shadow: 0px 3px 10px 0px rgb(0, 0, 0);
        padding-top: 10px;
    }

    .info-row {
        width: 80%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .info-header,
    .info-header-stat {
        font-size: 14px;
    }

    .info-value {
        width: 100%;
        height: 60%;
        color: aliceblue;
        font-family: 'Exo 2';
        padding: 2.5px;
        font-size: 14px;
    }

    .info-card {
        width: 150px;
        margin-top: 0;
    }

    #photo-wrapper {
        width: 170px;
        height: 170px;
        top: 10px;
        left: calc(50% - 85px)
    }


    /* 210px 120px*/
    #graph-card {
        width: 95%; 
        height: 440px;
    }
    
    #medium-card {
        width: calc(47.5% - 5px);
        height: 300px;
    }

    #position-card {
        width: 95%;
        height: 440px;
    }
    
    #matches-card {
        width: 95%;
        height: 400px;
    }

    #compare-card {
        width: calc(47.5% - 5px);
        height: 300px;
    }

    #about-amplua:hover::after {
        width: 100px;
        left: 100%;
    }

    .card:nth-child(2) {
        margin-left: 10px;
        margin-right: 10px;
    }

}

@media all and (max-width: 600px) {
    .match-date {
        font-size: 9px;
    }

    .info-row {
        width: 100%;
    }

    #about-amplua:hover::after {
        width: 100px;
        left: -115px;
    }

    .match-stat-name {
        width: 55%;
        background-color: transparent;
    }

    .team-logo {
        width: 80%;
        background-color: transparent;
    }

    .match-score {
        font-family: 'Exo 2';
        font-size: 20px;
        background-color: transparent;
    }

    .match-goals,
    .match-assists,
    .match-defence,
    .match-saves,
    .match-passes {
        font-family: 'Exo 2';
        font-size: 20px;
        color: aliceblue;
        background-color: transparent;
    }

    .match-link {
        width: 60%;
    }
}

@media all and (max-width: 540px) {

    #medium-card {
        width: 95%;
        height: 300px;
    }
    #compare-card {
        width: 95%;
        height: 400px;
    }
    .best-btn {
        width: 40%;
        background-color: rgb(18, 18, 18);
        cursor: pointer;
    }

    #best-defence {
        background-color: transparent;
        width: 55%;   
    }

    .card:nth-child(1) {
        margin-left: 0;
        margin-right: 0;
    }
    .card:nth-child(2) {
        margin-left: 0;
        margin-right: 0;
    }
    .card:nth-child(3) {
        margin-left: 0;
        margin-right: 0;
    }

    .card:nth-child(4) {
        margin-left: 0;
        margin-right: 0;
    }

    .compare-player-name {
        font-size: 16px; 
    }

    .medium-stat-name {
        font-size: 14px;
    }

    .medium-stat {
        font-size: 24px !important;
    }

    .info-card {
        width: 120px;
        margin-top: 0;
    }

    .info-value {
        width: 100%;
        height: 60%;
        color: aliceblue;
        font-family: 'Exo 2';
        padding: 2.5px;
        font-size: 14px;
    }

    .opponent {
        font-size: 12px;
    }

    .match-score {
        font-family: 'Exo 2';
        font-size: 18px;
        background-color: transparent;
    }

    .match-goals,
    .match-assists,
    .match-defence,
    .match-saves,
    .match-passes {
        font-size: 18px;
    }

    .match-link {
        width: 70%;
    }

    .team-logo {
        width: 90%;
        background-color: transparent;
    }

    #graph-card,
    #position-card,
    #matches-card,
    #medium-card,
    #compare-card {
        width: 95%; 
        height: 370px;
    }

}

@media all and (max-width: 490px) {
    .match-score {
        font-family: 'Exo 2';
        font-size: 14px;
        background-color: transparent;
    }

    .match-goals,
    .match-assists,
    .match-defence,
    .match-saves,
    .match-passes {
        font-size: 14px;
    }

    .info-card {
        width: 120px;
        margin-top: 0;
    }

    .info-value {
        width: 100%;
        height: 60%;
        color: aliceblue;
        font-family: 'Exo 2';
        padding: 2.5px;
        font-size: 14px;
    }
    #graph-card {
        width: 95%; 
        height: 300px;
    }

    #position-card {
        width: 95%; 
        height: 300px;
    }
    #compare-card {
        width: 95%; 
        height: 300px;
    }

    #matches-card {
        width: 95%; 
        height: 300px;
    }

    .info-header,
    .info-header-stat {
        font-size: 12px;
    }
}

@media all and (max-width: 450px) {
    .info-card {
        width: 100px;
        margin-top: 0;
    }

    .info-value {
        width: 100%;
        height: 60%;
        color: aliceblue;
        font-family: 'Exo 2';
        padding: 2.5px;
        font-size: 14px;
    }
}

@media all and (max-width: 426px) {

    .match-score {
        font-family: 'Exo 2';
        font-size: 12px;
        background-color: transparent;
    }

    .match-goals,
    .match-assists,
    .match-defence,
    .match-saves,
    .match-passes {
        font-size: 12px;
    }
}

@media all and (max-width: 400px) {
 .info-row:last-child {
    width: 80%;
 }
 .info-card-stat {
    width: 30%;
}

.opponent {
    font-size: 10px;
}

#graph-card {
    width: 95%; 
    height: 280px;
}

#position-card {
    width: 95%; 
    height: 280px;
}
#compare-card {
    width: 95%; 
    height: 280px;
}

#matches-card {
    width: 95%; 
    height: 280px;
}

}
@media all and (max-width: 360px) {
    .info-card {
        width: 90px;
        margin-top: 0;
    }

    .info-value {
        width: 100%;
        height: 60%;
        color: aliceblue;
        font-family: 'Exo 2';
        padding: 2.5px;
        font-size: 12px;
    }

    .info-row:last-child {
        width: 100%;
     }
     .info-card-stat {
        width: 25%;
    }
}