.design-id-panel{
    text-align: center;
    width: 100%;
}

.design-id-container{
    margin: 20px auto 20px auto;
    width: 200px;
}

.design-id-title{
    margin-top:20px;
}

.design-id-text{
    text-align: center;
    width: 200px;
    height: 60px;
    font-size: 28px;
    display:block;
    color: white;
    background-color: #0c0c0c;
    border-color: black;
}

.design-id-button{
    width:200px;
    height: 60px;
    display:block;
    font-size:32px;
    background-color: #008CBA;
    border-color: #006C9A;
    color: white;
}

.design-id-button:hover, .design-id-button:active {
    background-color: #006C9A;
}

.popular-link-container{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 450px;
}

.popular-panel:hover,
.popular-panel-rank-1:hover,
.popular-panel-rank-2:hover,
.popular-panel-rank-3:hover
 {
    background-color: #222;
    text-decoration: none;
}

.popular-title{
    font-size: 20px;
    color: white;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.popular-thumbnail{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.popular-title,
.popular-title-rank-1,
.popular-title-rank-2,
.popular-title-rank-3
{
    color: #aaa;
    margin-top: 5px;
    color: white;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.popular-title{
    font-size: 14px;
}

.popular-title-rank-1{
    font-size: 32px;
}

.popular-title-rank-2,
.popular-title-rank-3
{
    font-size: 18px;
}

.popularity-rank-text{
    position: absolute;
    color: white;
    border-radius: 50%;
    border-style: solid;
    width: 34px;
    height: 34px;
    text-align: center;
    background-color: gray;
}

.popular-author{
    font-size: 12px;
    color: #ccc;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.popular-text-container{
    margin-left: 10px;
    margin-right: 10px;
}

.popular-thumbnail{
    display: block;
}

.medal-container {
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}

.popular-medal{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    bottom: 0px;
}

@media only screen and (max-width:989px){
    .medal-mobile-invisible {
        display: none !important;
    }
    
    .popular-panel-top-3 {
        width: 90%;
    }
}

@media only screen and (min-width:990px){

    .medal-desktop-invisible {
        display: none !important;
    }

    .medal-container-rank-1 {
        width: 100px;
        height: 100px;
    }
    
    .medal-container-rank-2 {
        width: 80px;
        height: 80px;
    }
    
    .medal-container-rank-3 {
        width: 70px;
        height: 70px;
    }
    
    .popular-panel-rank-1 {
        width: 400px;
        height: 600px;
    }
    
    .popular-panel-rank-2 {
        width: 300px;
        height: 480px;
        top: 120px;
    }
    
    .popular-panel-rank-3 {
        width: 260px;
        height: 429px;
        top: 172px;
    }
    
    .popular-panel-top-3 {
        position: relative;
    }
    
    .popular-top-3-container {
        display: block;
        height: 610px;
    }
    
    .center-popular-top-1{
        left: 300px;
        position: relative;
    }
    
    .popular-panels-container {
        display: table;
        width: 100%;
        margin-bottom: 50px;
    }
}

.popular-panel {
    width: 188px;
    height: 230px;
}

.design-banner{
    background-color: #0c0c0c;
    padding: 10px 0 10px 0;
}

.design-banner-inner{
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width:600px;
}

.design-description-panel{
    width: 100%;
    float: left;
}

.panel-title{
    font-size: 24px;
    margin: 10px 0 10px 20px;
    font-weight: 100;
    color: white;
    text-align: center;
}

.design-description{
    margin: 20px;
}

.panel{
    background-color: #3a3a3a;
    margin: 15px 5px 5px 5px;
    padding: 10px;

    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-radius: 8px;

    display: block;
    float: left;
}

.wide-panel {
    width: 100%;
}

.design-title{
    font-size: 48px;
    text-align: center;
    color: white;
    font-weight: 100;
    width: 100%;
    margin-top: 20px;
}

.design-title-solo {
    margin-bottom:20px;
}

.design-subtitle{
    font-size:14px;
    text-align: center;
}

div.social-media-buttons {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.social-media-panel{
    width: 100%;
}

.social-media-buttons > a {
    margin: 20px;
}

.design-container{
    width:664px;
}

.tile-sprite-small{
    width:70%;
    height:70%;
    display:block;
    margin-left: auto;
    margin-right: auto;
    filter:brightness(0);
}

.api-button-container{    
    margin: 10px 10px 20px 5px;

    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    font-family: "Courier New", Courier, monospace;
    background-color: #f44336;
    text-decoration: none;
    width: 150px;
}

.api-button-container:hover:hover, .api-button-container:hover:visited, .api-button-container:hover:link, .api-button-container:hover:active
{
    text-decoration: none;
    color: white;
}

.api-button-container:hover, .ccn-button-container:active {
    background-color: #d42316;
}

.api-button{
    width:100px;
}

.rules-container {

}

.rule-container {
    width: 31%;
    margin: 10px 10px 10px 5px;
    background-color: #3a3a3a;

    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-radius: 8px;

    display: block;
    float: left;
}

.rule-icon {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.rule-title {
    color: white;
    text-align: center;
}

.rule-label {
    text-align: center;
}

.white{
    background: #f0d9b5
}
.inactive.white{
    background: #3c372e
}
.black{
    background: #b58863
}
.inactive.black{
    background: #2e2219;
}