/* 
    Created on : 05.01.2015, 10:27:18
    Author     : antonepple
*/

/* Style guide:
This CSS file is organized according to the following rules.
If you modify the file, please stick to these rules!
(A) Organizing files
In general, modularization is good. Files can be combined to a single file using 
a script.
1. Create a separate file for each template (= "subpage"). This template contains 
styles specific to the template. 
2. Create a separate file for resets.
3. Don't create separate files for specific aspects like animations, typography, ...


(B) Organizing selectors
Don't use indentation. Some people do use it to beautify their code.
I find it hard to set up easy rules for indentration.
1. universal rules (*)
2. Document (html)
3. Meta (head, title, base)
4. Structure (body, header, footer, nav, aside, main, article...)
5. Headings (h1,...)
6. Lists (ul, ol, li, menu,...)
7. Media (Canvas, Object, audio,..)
8. Forms (form, fieldset, legend, label, input, button...)
9. Tables
10. Phrasing (strong, a, i, u, )
11. Misc
12. Animations

(C) Organizing rules and properties inside a selector:
1. Rules are organized into the four semantic sections layout, typography, 
style, animation.
2. No shorthand is used if it would mix style and layout:
E.g. don't do this: 'border-bottom: 1px solid #e6e6e6'
Instead:
    <in layout section:>
    border-bottom-width: 1px;

    <in style section:>
    border-bottom-style: solid;
    border-bottom-color: #e6e6e6;
3. Inside these sections Rules are sorted alphabetically by Property name.

(D) Comments
I tend to comment a lot, as I'm still learning, and it helps me to remember why
I did something. Please add a comment, whenever you fix something, including your
Email address so others can ask yor clarification.

(E) Resources
Don't download resources. The links might get outdated, sites might be offline,
and most important, the user might be offline. This is an app, so it will also 
improve performance to package resources.
*/

/*******************************************************************************
* 1. universal rules (*)
*******************************************************************************/

/*******************************************************************************
* 2. Document (html)
*******************************************************************************/

/*******************************************************************************
* 3. Meta (head, title, base)
*******************************************************************************/

/*******************************************************************************
* 4. Structure (body, header, footer, nav, aside, main, article...)
*******************************************************************************/

body {
    background: #A8A8A8;

    /*-
     * #%L
     * fifteen General Client Code - a library from the "DukeScript" project.
     * %%
     * Copyright (C) 2018 Dukehoff GmbH
     * %%
     * Permission is hereby granted, free of charge, to any person obtaining a copy
     * of this software and associated documentation files (the "Software"), to deal
     * in the Software without restriction, including without limitation the rights
     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
     * copies of the Software, and to permit persons to whom the Software is
     * furnished to do so, subject to the following conditions:
     * 
     * The above copyright notice and this permission notice shall be included in
     * all copies or substantial portions of the Software.
     * 
     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     * THE SOFTWARE.
     * #L%
     */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome and Opera */

    font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
}

/*******************************************************************************
* 5. Headings (h1,...)
*******************************************************************************/

/*******************************************************************************
* 6. Lists (ul, ol, li, menu,...)
*******************************************************************************/

/*******************************************************************************
* 7. Media (Canvas, Object, audio,..)
*******************************************************************************/

/*******************************************************************************
* 8. Forms (form, fieldset, legend, label, input, button...)
*******************************************************************************/

/*******************************************************************************
* 9. Tables
*******************************************************************************/

/*******************************************************************************
* 10. Phrasing (strong, a, i, u, )
*******************************************************************************/

/*******************************************************************************
* 11. Misc
*******************************************************************************/

#shuffle-button{
    fill: #304860;
    vertical-align: middle;
    text-align: center;
}

#moves, #best{
    text-align: center; 
    background: #304860;
    border-radius: 5px;
}

#github-star{
    display: flex;
    justify-content: flex-end;
    margin-right: 1vw;
    margin-bottom: 1vw;
}

.tile{
    /*layout*/

    position: absolute;
    vertical-align: middle;
    text-align: center;

    /*typography*/
    /*style*/
    color: #304848;

    /*animation*/
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -moz-transition:  all 0.2s ease-out;  
    background:#A8C0D8;
}

.tile.with-image{
    background-image: url(../assets/javaduke_html5.png); 
}

#grid.with-image{
    background-image: url(../assets/javaduke_html5.png);   
}

#grid{
    position:relative;
    background: #304860;
    border-radius: 5px;
}

#tile-0{
    visibility: hidden;
}


#hurray{
    vertical-align: middle;
    text-align: center;
    color: #304848;
}

@media screen and (orientation: landscape){
    #hurray{
        font-size: 14vh; 
        margin: 0 auto auto auto;
    }

    #shuffle-button{
        margin-left: 14vh;
        height: 14vh;
        width: 14vh;
    }
    
    #moves, #best{
        float:right;
        margin-right: 1vh;
        margin-top: auto;
        height: 15vh;
        width: 15vh;
    }

    #grid{
        width: 65vh;
        height: 65vh;
        background-size: 65vh 65vh;
        margin: auto;
    }

    .icon {
        display: inline-block;
        width: .9em;
        height: .9em;
    }

    .display-title{
        display: block;
        color: #A8A8A8; 
        font-size: 3vh;
    }

    .display-text{
        color: #A8A8A8; 
        font-size: 8vh;
    }


    .tile{
        line-height:22vh;
        height: 15vh;
        width: 15vh;   
        font-size: 11vh;
        background-size: 60vh 60vh;
    }

    .tile.tile-position-1-1 {
        top:1vh; left: 1vh;
    }
    .tile.tile-position-1-2 {
        top:1vh; left: 17vh; }
    .tile.tile-position-1-3 {
        top:1vh; left: 33vh; }
    .tile.tile-position-1-4 {
        top:1vh; left: 49vh; }
    .tile.tile-position-2-1 {
        top:17vh; left: 1vh; }
    .tile.tile-position-2-2 {
        top:17vh; left: 17vh; }
    .tile.tile-position-2-3 {
        top:17vh; left: 33vh; }
    .tile.tile-position-2-4 {
        top:17vh; left: 49vh; }
    .tile.tile-position-3-1 {
        top:33vh; left: 1vh; }
    .tile.tile-position-3-2 {
        top:33vh; left: 17vh; }
    .tile.tile-position-3-3 {
        top:33vh; left: 33vh; }
    .tile.tile-position-3-4 {
        top:33vh; left: 49vh; }
    .tile.tile-position-4-1 {
        top:49vh; left: 1vh; }
    .tile.tile-position-4-2 {
        top:49vh; left: 17vh; }
    .tile.tile-position-4-3 {
        top:49vh; left: 33vh; }
    .tile.tile-position-4-4 {
        top:49vh; left: 49vh; }

    #tile-1{
        background-position: 0vh 0vh;
    }
    #tile-2{
        background-position: -15vh 0vh;
    }
    #tile-3{
        background-position: -30vh 0vh;
    }
    #tile-4{
        background-position: -45vh 0vh;
    }
    #tile-5{
        background-position: 0vh -15vh;
    }
    #tile-6{
        background-position: -15vh -15vh;
    }
    #tile-7{
        background-position: -30vh -15vh;
    }
    #tile-8{
        background-position: -45vh -15vh;
    }
    #tile-9{
        background-position: 0vh -30vh;
    }
    #tile-10{
        background-position: -15vh -30vh;
    }
    #tile-11{
        background-position: -30vh -30vh;
    }
    #tile-12{
        background-position: -45vh -30vh;
    }
    #tile-13{
        background-position: 0vh -45vh;
    }
    #tile-14{
        background-position: -15vh -45vh;
    }
    #tile-15{
        background-position: -30vh -45vh;
    }

}

@media screen and (orientation: portrait){
    #hurray{
        font-size: 16vw; 
        margin: 0 auto auto auto;
    }

    #shuffle-button{
        color: #304860;
        margin-left: 5vw;
        height: 12vw;
        width: 11vw;
    }

    #grid{
        width: 89vw;
        height: 89vw;
        margin-left: 4vw ;
        margin-right: 4vw ;
        margin-top: 5vw ;
        margin-bottom: 1vw ;
        background-size: 89vh 89vh;
    }

    .tile{
        height: 21vw;
        width: 21vw;   
        font-size: 16vw;
        line-height:21vw;
        border-radius: 2vw;  
        background-size: 84vw 84vw;
    }
    


    #moves{
        float: right;
        margin-right: 1vw;
        height: 15vw;
        width: 15vw;
    }

    #best{
        float: right;
        margin-right: 4vw;
        height: 15vw;
        width: 15vw;
    }
    

    .display-text{
        color: #A8A8A8; 
        font-size: 8vw;
    }

    .display-title{
        color: #A8A8A8; 
        font-size: 3.8vw;
    }

    .tile.tile-position-1-1 {
        top:1vw; left: 1vw; }
    .tile.tile-position-1-2 {
        top:1vw; left: 23vw; }
    .tile.tile-position-1-3 {
        top:1vw; left: 45vw; }
    .tile.tile-position-1-4 {
        top:1vw; left: 67vw; }
    .tile.tile-position-2-1 {
        top:23vw; left: 1vw; }
    .tile.tile-position-2-2 {
        top:23vw; left: 23vw; }
    .tile.tile-position-2-3 {
        top:23vw; left: 45vw; }
    .tile.tile-position-2-4 {
        top:23vw; left: 67vw; }
    .tile.tile-position-3-1 {
        top:45vw; left: 1vw; }
    .tile.tile-position-3-2 {
        top:45vw; left: 23vw; }
    .tile.tile-position-3-3 {
        top:45vw; left: 45vw; }
    .tile.tile-position-3-4 {
        top:45vw; left: 67vw; }
    .tile.tile-position-4-1 {
        top:67vw; left: 1vw; }
    .tile.tile-position-4-2 {
        top:67vw; left: 23vw; }
    .tile.tile-position-4-3 {
        top:67vw; left: 45vw; }
    .tile.tile-position-4-4 {
        top:67vw; left: 67vw; }

    #tile-1{
        background-position: 0vw 0vw;
    }
    #tile-2{
        background-position: -21vw 0vw;
    }
    #tile-3{
        background-position: -42vw 0vw;
    }
    #tile-4{
        background-position: -63vw 0vw;
    }
    #tile-5{
        background-position: 0vw -21vw;
    }
    #tile-6{
        background-position: -21vw -21vw;
    }
    #tile-7{
        background-position: -42vw -21vw;
    }
    #tile-8{
        background-position: -63vw -21vw;
    }
    #tile-9{
        background-position: 0vw -42vw;
    }
    #tile-10{
        background-position: -21vw -42vw;
    }
    #tile-11{
        background-position: -42vw -42vw;
    }
    #tile-12{
        background-position: -63vw -42vw;
    }
    #tile-13{
        background-position: 0vw -63vw;
    }
    #tile-14{
        background-position: -21vw -63vw;
    }
    #tile-15{
        background-position: -42vw -63vw;
    }

}


/*******************************************************************************
* 12. Animations
*******************************************************************************/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}


@-webkit-keyframes bounceInUp {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 100vh, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}