html, body {
    background-image: url("https://cdn.pixabay.com/photo/2015/03/17/01/19/wood-floor-677054_1280.jpg");
    min-height: 100% ;
    font-family: 'Lalezar', cursive;
    font-size: x-large;
}

#main-title{
    font-family: 'Lalezar', cursive;
    text-align: right;
    text-shadow: 3px 3px 6px red;
}

.container {
    padding: 5%;
}

.getCardsNav{
    padding: 30px;
}

.card-space{
    padding: 50px;
    margin: 10px;
}

.button-style{
    text-shadow: 2px 2px 5px red;
    border-style: inset;
    border-width: 2px;
    border-color: red;
}

#packimg {
    height: 400px; 
    width: 300px;
    border-style: inset;
    border-width: 10px;
    border-color: red;
}

.common{
    background-image: url("https://lh3.googleusercontent.com/ISQggQsgiFhsOf8HU-89s99exWSAV4Ag8o9DSUcpHCCSZDb0Z_Gl7y7zG2IAEADblTCTNtgjcb4Mz_Hb70NKgO-_9oqWg7s8RBfo59ooiDF_JakIZKDVBEUoXCQirAYLu1veVAPhqxPaqWCYgmEjC2YSIYpQaF8itekB4oYQDYgk_Fe6cheS2BDDUYuz0kCf0Hjp70auK8-EZ0JMLXgqQNjBnPTr3KreDmxOXelpZCdV_jLqRQSdvNWfB9OaDR5PbBl539kDiV-4s_FF42CWbKISVllD_cJ_esU-HnwAnIobquMSABphyD4JsdWulxivWkn8g6P6d76roDfusBIO3PnjDdK3gFA28EtOVF90RP56GjtgkZ-sEfXxHtwxf_dVNoWP_jHMpMSzu3ZfAp-Vc805-AFzrBZfuIyYKvvNev1vJhsQUJ4kKLmoVZLGYiRL9TjeSeP5qi8aZWHvTUB3Iz71lpVWNYF2fw0Q2G9215dxUybES0g-Kdv_p6iwj0bGS2VZq7cwbdSNi13PgDATOV96-t9zMZmXd3-dKJlAwgErsCg5fw2niQb_6-2b6Qlb1JMd9yXedNcwbp6YQ6p0lQwlVIBJbxGYZa2gowvYNyNcAGNXA8aiKPuaV8pN25uduRRxOAGy3-eEYdcqXgaIf4FmXIKbDgxcDxHHa9whJj2vPSnNJM1o6RsMbdt7XWgRE_hgAKlwCeNFVvL3EaQJ79ODKyl-SwBGywuYmkhGwz9c8FuqXUlo=w559-h800-no");
    background-size: 100% 100%;
}

.rare{
    background-image: url("https://lh3.googleusercontent.com/9JmbDzqrsMd54r_-HebUtiX5jVGo8_i38R2jPKk_hnJo_C2ovCrbK_nojjGyKvLVrxC7Hk_FdehDtOw9xblgIZC6sb3mz-Z9SU3P0iQoKiMTViVlPh_XZPlws7Ts5mhUqwaVW92Ih_A8IG9czT0By1M3U3UNShT9QGCx2p791mXeQzEv6tLuqpGbLg9flD1hgWK3pc3cuPtsm6yLLaPYLhpmpf_y1v57HSXaWbgCodlvvum42CgivM-YygFkUaYfJ6CiBSAeFPNv-g9HSddUN6V4PeS_eKeAMYtSTEQiszCscd-9gv4S7HIf5gd5rsC8f66w5FCc71W96Tlqa9y8dQJ4lv4g58j1trke5jUf8PCzq3lsW5WEJysayf3qqHiGvJkkBhhZ7HJ67jUAn4CoI1hBdN8rSIeg7u957TaOmXkefFmDDQsjkiJW5qwch9hlOMEq99Mv0q1zdKwg0vsRe5J4DCMNXomP2_ly9PIGZw_druqGg9uYAOmh21T14oMmAvmHwo0CY6sVF1qUwJ1alYjyHawuP1w-VqMy2A39Gh5bf4Clwxl1SHy9SP0wqLFfoknEmR87Ik5antb6iD1rQHtu8S9aPXfn2FkQOJMmelnjrMAMC9JKKQJoAU47hd8vBhdt-WmoCQPi-647dCdRUKf3CFvu6t-LMoBlDOLcZy7d1xq_elpWTM3kma6ghEQejOUj0BujuzYx0EvBFaQQjlhozQyhRhS1C9W2_LoRPo5gdMAIF1HM=w559-h800-no");
    background-size: 100% 100%;
}

.legendary{
    background-image: url("https://lh3.googleusercontent.com/tD0cjUKsoKvjZvlTam7D-Lt9Du4pvZaTuL-D_AOYGq5XtJxxWcHlpLtc_VRaO7hJ2oGPKW1vhUcoBiSmIEmtgzOOjW60N6_wVqDImeYOmwlKYa_Rl1h1APkSCqR7XSVddNJxqn4tp6R7JLB6DaPrbd5N_a_Reg4Z1uxdZJkVFnuT1mh6_9D5cLlD8n6XXD8TgPxwoDOMCg5uqexZ95h_-MQTOTwhi9zxaGhOfE-6mnZ64x0kltYKabGfp2usZUvj_nrNcn0c2szYcHJo1Ucs_QA2Eqq1ssOYLjVKStzNrWGbm15ry3cX51zE0Xyf3Igbbab173OTf6uBc8wcSgLUJ7fvlGb7whl9XPj3BKbYUraUuuYLXmOAtN4G6UMm9Gto0Sa1Ie-u-RwrCL9sGRxpdCitJF92G7vrtvQW0RAgt6kI5hwSCHvXsbpgKYOFS2mkCTYTEW_ZSdClKIwiJgppiijT7R7Ilf8YR9eMrVtk3qoJhlvMIMIGdaAoegKO0hgxmsga8eyb88os9cpyYDsQIHT6gCxNZaw2k8hKTuML8Mk8nUNwZ-fEzkXEh7BbBDhs9yAJeebvvHtof-nTCFzs7jVdzyW6NY-eSZHoV60IUMvy_RNH4fCpG9KX3i8f98UA7nnOe3IE0O2Pbt7_JyAXu7wWgVO37xuueYPF5B3_AWj9ppWJDCV989FUsybKGdCpjz1Ku8FbgAH6vQbo8bFE220N1vBZr0h53bCm8furHMVia3nQhlFz=w559-h800-no");
    background-size: 100% 100%;
}

@viewport {
    width: device-width ;
    zoom: 1.0 ;
}

@media only screen and (max-device-width: 480px) {
    #main-title{
        width: 100%;
        text-align: center;
    }
    .container {
        padding: 0%;
        float: left;
        margin-top: 10%;
    }
    .uk-subnav{
        width: 100%;
    }
    h2 {
        font-size: 14px;
    }
    .uk-animation-toggle {
        padding-top: 15%;
        margin-top: 15%;
    }
    .player-div{
        margin-top: 5%;
        padding-top: 5%;
        max-width: fit-content;
        max-height: fit-content;
    }
    p {
        font-size: 14px;
        margin: 0px;
    }
    .player-card {
        max-width: fit-content;
        max-height: fit-content;
        float: left;
        position: relative;
    }
    .uk-card-media {
        float: left;
    }
    .card-space {
        float: left;
        padding: 10px;
        margin: 10px;
        max-height: fit-content;
        padding-top: 10px;
    
    }
    .uk-card-title {
        font-size: 14px;
    }
    .uk-child-width-1-3{
        display: flex;
    }
}