<style>
ion-content{
  background-color: #00091a;
  color:#e6eeff;

}
ion-card{
  text-align: right;
}
/*global CSS*/

#gems{
    background-color: inherit;
}
.more {
  float: none;
}
.menu{
  transform: translate(-50%, 55%);
}
/*small devices*/
@media (min-width: 320px) and (max-width: 480px)  {
    .more{
        margin-top: 20vh;
    }
    .container{
      margin-top: 20vh;
    }
    #avatar{
        float: center;
        height:50px;
        width:50px;
        margin-left: 19vw;
        margin-top: 2vh;
        border-radius: 50%;
    }
    .menu {
      position: relative;
      margin-top: 25%;
      left: 50%;
      width: 0px;

    }

    .toggle + .style {
        width: 190px;
        height: 190px;
        border-radius: 50%;
        cursor: pointer;
        transform: translate(-50%, -50%) scale(1);
        z-index: 5;
        display: block;
        max-width: 50vw;
        margin-bottom: 0;
        background-size: 200px 200px;
        background-position: center;
        background-repeat: no-repeat;
        color: #fff;
        font-size: 2.5em;
        text-align: center;
       -webkit-transition: all .8s;
       -moz-transition: all .8s;
       -o-transition: all .8s;
       -ms-transition: all .8s;
       transition: all .8s;
        }
        .menu p{
            max-width: 20vw;
            text-align: center;
            margin: 0 auto;
            line-height: 25px;
            padding-top: 30px;
            font-weight: 300;
            font-size: 1.5em;
        }
        .toggle {
          display: none;
        }
        .toggle + .style:hover{
        	-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
            -moz-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
            -ms-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
            -o-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
            box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
        }

        .toggle:checked + .style {
          transform: translate(-50%, -50%) scale(.5);
        }

        .menu input[type=checkbox] + label:before {
            content: "";
            position: absolute;
        }

        .toggle + .style:before, .toggle + .style:after {
          content: "";
          position: absolute;
          margin: -3px;
          border-radius:5px;
          transition: all 0.3s;
        }

        .toggle + .style:before {
          width: 30px;
          height: 0px;
          left: 10px;
          top: 25px;
        }

        .toggle + .style:after {
          width: 0px;
          height: 30px;
          left: 25px;
          top: 10px;
        }

        .toggle:checked + .style:before, .toggle:checked + .style:after {
          transform: rotate(135deg);
        }

        .toggle ~ .tab {
            position: absolute;
            background: #008DFF;
            color: #fff;
            width: 100px;
            height: 100px;
            left: 0px;
            top: 0px;
            transform: translate(-50%, -50%) scale(0);
            transition: all 0.3s;
            opacity: 0;
            border-radius: 50%;
        }

        .toggle:checked ~ .tab {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(1) {
          top: -110px;
          left: 0px;
          transition-delay: 0s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(2) {
          top: -60px;
          left: 110px;
          transition-delay: 0.125s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(3) {
          top: 50px;
          left: 110px;
          transition-delay: 0.25s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(4) {
          top: 100px;
          left: 0px;
          transition-delay: 0.375s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(5) {
          top: 45px;
          left: -100px;
          transition-delay: 0.5s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(6) {
          top: -70px;
          left: -100px;
          transition-delay: 0.625s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(7) {
          top: 0px;
          left: -133.33333px;
          transition-delay: 0.75s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(8) {
          top: -94.2809px;
          left: -94.2809px;
          transition-delay: 0.875s;
        }

        #nickname{
            float: right;
          color: black;
          font-size: 1.3em;

        }
        #conn_status{
            margin-top:3vh;

          margin-left: 21vw;
          height: 5vh;
          width: 10vw;
          float:  left;
        }

        #gems{
            margin-top:3vh;

          font-size: 4vh;
          float: left;
          margin-left:  1vw;
        }
        #gem-icon{
            margin-top:3vh;
          float: left;
          height: 5vh;
          width: 10vw;
        }

        hr{
            margin-top:5vh;
        }
    }
    @media (min-width: 481px) and (max-width: 767px) {
        .more{
            float: none;
            margin-top: 20vh;
        }
        .container{
          margin-top: 20vh;
        }
        #avatar{
            float: center;
            height:80px;
            width:80px;
            margin-left: 24vw;
            margin-top: 2vh;

            border-radius: 50%;
        }
        #style{
          background-size: 100% 100%;
        }
        .menu {
          position: relative;
          margin-top: 25%;
          left: 50%;
          width: 0px;
          transform: translate(-50%, 55%);
        }
        .toggle + .style {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            cursor: pointer;
            transform: translate(-50%, -50%) scale(1);
            z-index: 5;
            display: block;
            max-width: 50vw;
            margin-bottom: 100px;
            background-position: center;
            color: #fff;
            font-size: 2.5em;
            padding-top: 40px;
            text-align: center;
           -webkit-transition: all .8s;
           -moz-transition: all .8s;
           -o-transition: all .8s;
           -ms-transition: all .8s;
           transition: all .8s;
            }
            .menu p{
                max-width: 20vw;
                text-align: center;
                margin: 0 auto;
                line-height: 25px;
                padding-top: 30px;
                font-weight: 300;
                font-size: 1.5em;
            }
            .toggle + .style:hover{
            	-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
                -moz-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
                -ms-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
                -o-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
                box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
            }

            .toggle:checked + .style {
              transform: translate(-50%, -50%) scale(.5);
            }

            .menu input[type=checkbox] + label:before {
                content: "";
                position: absolute;
            }

            .toggle + .style:before, .toggle + .style:after {
              content: "";
              position: absolute;
              margin: -3px;
              border-radius:5px;
              transition: all 0.3s;
            }

            .toggle + .style:before {
              width: 30px;
              height: 0px;
              left: 10px;
              top: 25px;
            }

            .toggle + .style:after {
              width: 0px;
              height: 30px;
              left: 25px;
              top: 10px;
            }

            .toggle:checked + .style:before, .toggle:checked + .style:after {
              transform: rotate(135deg);
            }

            .toggle ~ .tab {
                position: absolute;
                background: #008DFF;
                color: #fff;
                width: 100px;
                height: 100px;
                left: 0px;
                top: 10px;
                transform: translate(-50%, -50%) scale(0);
                transition: all 0.3s;
                opacity: 0;
                border-radius: 50%;
            }

            .toggle:checked ~ .tab {
              opacity: 1;
              transform: translate(-50%, -50%) scale(1);
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(1) {
              top: -110px;
              left: 0px;
              transition-delay: 0s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(2) {
              top: -60px;
              left: 110px;
              transition-delay: 0.125s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(3) {
              top: 50px;
              left: 110px;
              transition-delay: 0.25s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(4) {
              top: 100px;
              left: 0px;
              transition-delay: 0.375s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(5) {
              top: 45px;
              left: -100px;
              transition-delay: 0.5s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(6) {
              top: -70px;
              left: -100px;
              transition-delay: 0.625s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(7) {
              top: 0px;
              left: -133.33333px;
              transition-delay: 0.75s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(8) {
              top: -94.2809px;
              left: -94.2809px;
              transition-delay: 0.875s;
            }
            #nickname {
              float: right;
              color: black;
              font-size: 3vh;

            }
            #conn_status{
                margin-top:3vh;

              margin-left: 21vw;
              height: 5vh;
              width: 10vw;
              float:  left;
            }

            #gems{
                margin-top:3vh;

              font-size: 4vh;
              float: left;
              margin-left:  1vw;
            }
            #gem-icon{
                margin-top:3vh;
              float: left;
              height: 5vh;
              width: 10vw;
            }

            hr{
                margin-top:15vh;
            }
    }
    @media (min-width: 768px) and (max-width: 1024px) {
        .more{
            float: none;
            margin-top: 30vh;
        }
        .container{
          margin-top: 100px;
        }
        #avatar{
            float: center;
            height:80px;
            width:80px;
            margin-left: 30vw;
            border-radius: 50%;
        }
        .menu {
          position: relative;
          margin-top: 25%;
          left: 50%;
          width: 0px;
          transform: translate(-50%, 55%);
        }
        .toggle + .style {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            cursor: pointer;
            transform: translate(-50%, -50%) scale(1);
            z-index: 5;
            display: block;
            max-width: 50vw;
            margin-bottom: 0;
            background-size: cover;
            background-position: center;
            font-size: 2.5em;
            padding-top: 75px;
            text-align: center;
           -webkit-transition: all .8s;
           -moz-transition: all .8s;
           -o-transition: all .8s;
           -ms-transition: all .8s;
           transition: all .8s;
            }
            .menu p{
                max-width: 20vw;
                text-align: center;
                margin: 0 auto;
                line-height: 25px;
                padding-top: 50px;
                font-weight: 300;
                font-size: 1.5em;
            }
            .toggle + .style:hover{
            	-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
                -moz-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
                -ms-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
                -o-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
                box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
            }

            .toggle:checked + .style {
              transform: translate(-50%, -50%) scale(.5);
            }

            .menu input[type=checkbox] + label:before {
                content: "";
                position: absolute;
            }




            .toggle:checked + .style:before, .toggle:checked + .style:after {
              transform: rotate(135deg);
            }

            .toggle ~ .tab {
                position: absolute;
                background: #008DFF;
                color: #fff;
                width: 120px;
                height: 120px;
                left: 0px;
                top: 0px;
                transform: translate(-50%, -50%) scale(0);
                transition: all 0.3s;
                opacity: 0;
                border-radius: 50%;
            }

            .toggle:checked ~ .tab {
              opacity: 1;
              transform: translate(-50%, -50%) scale(1);
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(1) {
              top: -130px;
              left: 0px;
              transition-delay: 0s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(2) {
              top: -70px;
              left: 120px;
              transition-delay: 0.125s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(3) {
              top: 70px;
              left: 130px;
              transition-delay: 0.25s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(4) {
              top: 150px;
              left: 0px;
              transition-delay: 0.375s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(5) {
              top: 80px;
              left: -120px;
              transition-delay: 0.5s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(6) {
              top: -50px;
              left: -120px;
              transition-delay: 0.625s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(7) {
              top: 0px;
              left: -133.33333px;
              transition-delay: 0.75s;
            }

            .menu > .toggle:checked ~ .tab:nth-of-type(8) {
              top: -94.2809px;
              left: -94.2809px;
              transition-delay: 0.875s;
            }
            #nickname{
                float:right;
              margin-right: 1vw;
              color: black;
              font-size: 2vh;

            }

            #conn_status{
              margin-top:3vh;
              margin-left: 220px;
              height: 50px;
              width: 50px;
              float:  left;
            }

            #gems{
                margin-top:2vh;
              font-size: 2vh;
              float: left;
              margin-left:  1vw;
            }
            #gem-icon{
                margin-top:1vh;
              float: left;
              height: 5vh;
              width: 10vw;
            }

            hr{
                margin-top:5vh;
            }
            #nickname{
                float: right;
            }
}

@media (min-width: 1025px) and (max-width: 1280px){
    .more{
        float: none;
        margin-top: 30vh;
    }
    .container{
      margin-top: 100px;
    }
    #avatar{
        float: center;
        height:100px;
        width:100px;
        margin-left: 28vw;
        border-radius: 50%;
    }
    .menu {
      position: relative;
      margin-top: 25%;
      left: 50%;
      width: 0px;
      transform: translate(-50%, 55%);
    }
    .toggle + .style {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        cursor: pointer;
        transform: translate(-50%, -50%) scale(1);
        z-index: 5;
        display: block;
        max-width: 50vw;
        margin-bottom: 0;
        background: #008DFF;
        color: #fff;
        font-size: 2.5em;
        background-size: 100% 100%;
        padding-top: 75px;
        text-align: center;
       -webkit-transition: all .8s;
       -moz-transition: all .8s;
       -o-transition: all .8s;
       -ms-transition: all .8s;
       transition: all .8s;
        }
        .menu p{
            max-width: 20vw;
            text-align: center;
            margin: 0 auto;
            line-height: 25px;
            padding-top: 50px;
            font-weight: 300;
            font-size: 1.5em;
        }
        .toggle + .style:hover{
            -webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
            -moz-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
            -ms-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
            -o-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
            box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
        }

        .toggle:checked + .style {
          transform: translate(-50%, -50%) scale(.5);
        }

        .menu input[type=checkbox] + label:before {
            content: "";
            position: absolute;
        }




        .toggle:checked + .style:before, .toggle:checked + .style:after {
          transform: rotate(135deg);
        }

        .toggle ~ .tab {
            position: absolute;
            background: #008DFF;
            color: #fff;
            width: 120px;
            height: 120px;
            left: 0px;
            top: 0px;
            transform: translate(-50%, -50%) scale(0);
            transition: all 0.3s;
            opacity: 0;
            border-radius: 50%;
        }

        .toggle:checked ~ .tab {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(1) {
          top: -130px;
          left: 0px;
          transition-delay: 0s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(2) {
          top: -70px;
          left: 120px;
          transition-delay: 0.125s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(3) {
          top: 70px;
          left: 130px;
          transition-delay: 0.25s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(4) {
          top: 150px;
          left: 0px;
          transition-delay: 0.375s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(5) {
          top: 80px;
          left: -120px;
          transition-delay: 0.5s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(6) {
          top: -50px;
          left: -120px;
          transition-delay: 0.625s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(7) {
          top: 0px;
          left: -133.33333px;
          transition-delay: 0.75s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(8) {
          top: -94.2809px;
          left: -94.2809px;
          transition-delay: 0.875s;
        }
        #nickname{
            float:right;
          margin-right: 1vw;
          color: black;
          font-size: 3vh;

        }

        #conn_status{
          margin-top:3vh;
          margin-left: 220px;
          height: 50px;
          width: 50px;
          float:  left;
        }

        #gems{
            margin-top:3vh;
          font-size: 4vh;
          float: left;
          margin-left:  1vw;
        }
        #gem-icon{
            margin-top:3vh;
          float: left;
          height: 80px;
          width: 80px;
        }

        hr{
            margin-top:5vh;
        }
        #nickname{
            float: right;
        }
}




@media (min-width: 1281px) {/*Desktops*/
    .container{
      margin-top: 50px;
    }
    #avatar{
        float: right;
        height:200px;
        width:300px;
        border-radius: 50%;
    }
    .menu {
      position: relative;
      margin-top: 200px;

      left: 50%;
      width: 0px;
      transform: translate(-50%, 55%);
    }
    .toggle + .style {
        width: 700px;
        height: 200px;
        border-radius: 50%;
        cursor: pointer;
        transform: translate(-50%, -50%) scale(1);
        z-index: 5;
        display: block;
        max-width: 100px;
        margin-bottom: 0;
        background: #008DFF;
        color: #fff;
        font-size: 2.5em;
        padding-top: 75px;
        text-align: center;
       -webkit-transition: all .8s;
       -moz-transition: all .8s;
       -o-transition: all .8s;
       -ms-transition: all .8s;
       transition: all .8s;
        }
        .menu p{
            max-width: 20vw;
            text-align: center;
            margin: 0 auto;
            line-height: 25px;
            padding-top: 30px;
            font-weight: 500;
            font-size: 1.5em;
        }

        .toggle:checked + .style {
          transform: translate(-50%, -50%) scale(.5);
        }

        .menu input[type=checkbox] + label:before {
            content: "";
            position: absolute;
        }

         .toggle + .style:after {
          content: "";
          position: absolute;
          margin: -3px;
          border-radius:5px;
          transition: all 0.3s;
        }


        .toggle + .style:after {
          width: 100px;
          height: 30px;
          left: 25px;
          top: 10px;
        }



        .toggle ~ .tab {
            position: absolute;
            background: #008DFF;
            color: #fff;
            width: 150px;
            height: 150px;
            left: 0px;
            top: 0px;
            transform: translate(-50%, -50%) scale(0);
            transition: all 0.3s;
            opacity: 0;
            border-radius: 50%;
        }

        .toggle:checked ~ .tab {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(1) {
          top: -180px;
          left: 0px;
          transition-delay: 0s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(2) {
          top: -90px;
          left: 150px;
          transition-delay: 0.125s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(3) {
          top: 80px;
          left: 160px;
          transition-delay: 0.25s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(4) {
          top: 200px;
          left: 0px;
          transition-delay: 0.375s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(5) {
          top: 100px;
          left: -150px;
          transition-delay: 0.5s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(6) {
          top: -80px;
          left: -150px;
          transition-delay: 0.625s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(7) {
          top: 0px;
          left: -133.33333px;
          transition-delay: 0.75s;
        }

        .menu > .toggle:checked ~ .tab:nth-of-type(8) {
          top: -94.2809px;
          left: -94.2809px;
          transition-delay: 0.875s;
        }


        #conn_status{
          margin-top:3vh;
          margin-left: 34vw;
          height: 10vh;
          width: 7vw;
          float:  left;
        }

        #gems{
            margin-top:5vh;
          font-size: 4vh;
          float: left;
          margin-left:  1vw;
        }
        #gem-icon{
            margin-top:3vh;
          float: left;
          height: 10vh;
          width: 7vw;
        }


        hr{
            margin-top:10vh;
        }
        #nickname{
            margin-top: 10vh
        }

}
#game{
  background-image: url("assets/static/icons/bazi.png");
  background-size: 100% 100%;
}
#history{
  background-image: url("assets/static/icons/eftekharat.png");
  background-size: 100% 100%;
}
#about{
  background-image: url("assets/static/icons/info.ico");
  background-size: 100% 100%;
}
#news{
  background-image: url("assets/static/icons/notif.png");
  background-size: 100% 100%;
}
#store{
  background-image: url("assets/static/icons/forushgah.png");
  background-size: 100% 100%;
}
#cup{
  background-image: url("assets/static/icons/jam.png");
  background-size: 100% 100%;
}
#best_avatar{
    float: left;
    display: inline;
    width: 18vw;
    height: 12vh;
}
#best_info{
    font-size: 1.3em;
}
</style>
<ion-content padding >
    <div id ="status">
     <img id=avatar src='' (click)="myHistory()"><img id='gem-icon' src='assets/static/gem.png' (click)="Store()"><span id='gems'>{{score}}</span><p align=right id=nickname>{{nickname}}</p>
    </div>

    <hr>
    <button ion-button (click)="new_HOME()">new ui</button>>
<div class="container">
    <div class='menu'>
    <input id='toggle' class='toggle'  type='checkbox'  checked >
      <label id='style'  class='style'  for='menu' (click)="Avatar()">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </label>
      <a id="game" class='tab' (click)="Game()" >
        <p></p>
      </a>
      <a id="history" class='tab' (click)="myHistory()">
        <p></p>
      </a>
      <a id="about" class='tab' (click)="AboutUs()">
        <p> </p>
      </a>
      <a id="news" class='tab' (click)="News()">
        <p></p>
      </a>
      <a id="store" class='tab' (click)="Store()">
        <P></P>
      </a>
      <a id="cup" class='tab' (click)="Cups()">
        <P></P>
      </a>
    </div>
  </div>
<br><br>
<br>
<br>
<br>


  <div>
    <ion-card>
        <ion-card-header>
            <img id="best_avatar" src="{{best_player_avatar}}">
          <p id="best_info">{{best_player_name}}:         {{best_player_gems}}</p>
        </ion-card-header>
        <ion-card-content>
        </ion-card-content>
      </ion-card>
  </div>

</ion-content>
