@font-face {
    font-family: 'Thorndale';
    src: url('thorndale_copyfonts.com.ttf') format('truetype');
}

body{
    background-color:#25272E;
    color:#fff;
    font-family: 'Thorndale';
}

body.rocMode {
    background-color:#0B271B;
}

#background {
    display:flex;
    flex-wrap:wrap;
    position:absolute;
    opacity:0.75;
    z-index:0;
    top:0;
    left:0;
    width:1262px;
}

#background img {
    width:50%;
}

#main {
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    width:544px;
    margin: 1rem;
}

input {
    font-size:16px;
}

input[type="number"] {
    width:50px;
}

.war3-button {
    cursor:pointer;
    color:#FCD211;
    background-color:#000039;
    font-size:24px;
    padding:12px 30px;
    border-top-color: #354AE7;
    border-left-color: #354AE7;
    border-right-color: #000057;
    border-bottom-color: #000057;
    border-width: 2px;
    border-radius: 0.5rem;
}

h1 {
    margin: 0 0 12px 0;
}

h2, h3, h4 {
    margin: 0;
}

#results {
    display:flex;
    margin:20px -20px 0 -20px;
}

.results-group {
    margin-left: 20px;
}

.results-group:last-child {
    margin-right: 20px;
}

.group-icons {
    display:flex;
}

.result-icon a {
   display:flex;
}

.result-icon:hover a {
    background-color:lightgreen;
}

.result-icon:hover a img {
    opacity:0.5;
}

#settings {
    margin:24px 0;
}

#settings h3 {
    margin-top:12px;
}

.setting-container {
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    margin-bottom:12px;
}

.setting-container .setting-label {
    margin-right:12px;
    width:21.25%;
}

#setting-race {
    display:flex;
}

#setting-race .race-select-button:not(.current-race) img {
    opacity:0.375;
}

#setting-race .race-select-button:not(.current-race):hover {
    background-color:lightgreen;
}

#setting-race .race-select-button:not(.current-race):hover img {
    opacity:0.5;
}

#setting-race .race-select-button:not(.current-race) {
    cursor:pointer;
}

/*
* SMALL SCREEN (Width: <= 1024)
*/
@media only screen and (max-width: 1024px) {
    #background {
        left:-256;
    }
}

/*
* SMALLER SCREEN (Width: <= 800)
*/
@media only screen and (max-width: 800px) {
    #background {
        left:-384;
    }
}

/*
* EVEN SMALLER SCREEN (Width: <= 640)
*/
@media only screen and (max-width: 640px) {
    #background {
        left:0;
        flex-direction:column;
    }

    #bg_topleft {
      display:none;
    }
    #bg_topright {
      height:75%;
    }
    #bg_botleft {
      display:none;
    }
    #bg_botright {
      height:25%;
    }
}

/*
* PORTRAIT ORIENTATION FOR PHONES
*/
@media only screen and (orientation: portrait) and (min-resolution: 2dppx) {
    #background {
        flex-direction:column;
        height:100%;
        transform:scale(1.2);
        transform-origin: left top;
        left:0;
    }

    #background img {
        width:auto;
        max-width:1024px;
    }

    #bg_topleft {
      display:none;
    }
    #bg_topright {
      height:75%;
    }
    #bg_botleft {
      display:none;
    }
    #bg_botright {
      height:25%;
    }
    
    #main {
        width:375px;
        transform:scale(2.75);
        transform-origin: left top;
        margin:2rem;
    }

    /* #main {
        font-size:2.5vh;
        width:100vw;
    }

    input {
        width:2.5vw;
    } */

    #results {
        flex-direction:column;
    }
    #group-hero {
        margin-bottom:0.5rem;
    }

    #settings h3 {
        margin-bottom:12px;
    }

    .setting-container .setting-label {
        width:28.25%;
    }

    #setting-race {
        width:100%;
    }

    #setting-neutral-hero {
        width:100%;
    }
  }