$widget-width: 18vmin
$widget-height: 7vmin
$color1: rgb(200, 50, 50)
$color1-dark: rgb(180, 30, 30)
$color2: white
$font-size1: 4.5vmin
$font-size2: 2.5vmin
$margin: 7px
$border: 4px

body
  font-family: 'Noto Sans SC', sans-serif
  font-weight: bold
  padding: 0px
  margin: 0px
#background
  position: fixed
  width: 100%
  height: 100%
  background-color: $color1
  box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset
#start
  position: absolute
  margin: $margin
  left: calc(50% - #{$margin})
  top: 50%
  transform: translate(-50%, -50%)
  text-align: center
  background-color: transparent
  border-radius: $border
  background-color: $color2
  box-shadow: 1px 1px 40px rgba(0, 0, 0, 0.8)
@media only screen and (orientation: landscape)
  #start
    width: 65%
@media only screen and (orientation: portrait)
  #start
    width: 85%
#title
  width: 100%
  color: $color2
  text-shadow: 1px 1px 40px black
  user-select: none
#inputpanel
  width: calc(100% - #{2 * $margin})
  height: $widget-height
  font-size: $font-size1
  position: relative
  margin: $margin
#matchhistory, #stats
  position: absolute
  font-size: $font-size2
  width: calc(100% - #{2 * $margin})
  height: calc(100% - (#{$widget-height} + #{3 * $margin}) - #{2 * $margin})
  margin: $margin
  top: calc(#{$widget-height} + #{3 * $margin})
  background-color: $color2
  border-radius: $border
  text-align: center
#historyfilters, #statsfilters
  position: relative
  width: calc(100% - #{2 * $margin})
  height: calc(#{3 * $widget-height} + #{2 * $margin})
  margin: $margin
#matchlist
  width: calc(100% - #{2 * $margin})
  height: calc(100% - #{4 * $margin} - 2px - (#{3 * $widget-height} + #{2 * $margin}))
  margin: $margin
  overflow: auto
hr
  margin: 0
select
  text-align: center
select:hover
  background-color: $color1-dark
select>option
  background-color: $color1
input
  border: none
  outline: none
  font-size: inherit
button, select
  vertical-align: baseline
  width: $widget-width
  height: $widget-height
  background-color: $color1
  color: $color2
  border-radius: $border
  border: none
  outline: none
  font-size: inherit
button:hover
  background-color: $color1-dark
.bottom-right
  position: absolute
  right: 0px
  bottom: 0px
.championIcon
  width: 60px
  height: 60px
#regionselect
  text-transform: uppercase
  position: absolute
  left: 0
  z-index: 1
#nameinput
  text-align: center
  border-bottom: 1px solid lightgray
  width: calc(100% - #{2 * $widget-width})
  height: $widget-height
  position: absolute
  left: $widget-width
  top: 0px
#gobutton, #statsbutton, #historybutton
  position: absolute
  margin: 0px
  top: 0px
  right: 0px
  z-index: 1
#refreshbutton
  position: absolute
  right: 0px
  bottom: 0px
#champselect
  position: absolute
  top: 0
  left: 0
  height: 100%
  width: auto
  overflow: auto
  text-align: left
button.champselect
  width: $widget-width / 2
  height: $widget-height / 2
@keyframes startup
  0%
    top: 50%
    transform: translate(-50%, -50%)
    @media only screen and (orientation: landscape)
      width: 65%
    @media only screen and (orientation: portrait)
      width: 85%
  100%
    top: 0%
    transform: translate(-50%, 0%)
    width: calc(100% - #{2 * $margin})
@keyframes startdown
  100%
    top: 50%
    transform: translate(-50%, -50%)
    @media only screen and (orientation: landscape)
      width: 65%
    @media only screen and (orientation: portrait)
      width: 85%
  0%
    top: 0%
    transform: translate(-50%, 0%)
    width: calc(100% - #{2 * $margin})
#start.slideup
  animation: startup 0.3s forwards linear
#start.slidedown
  animation: startdown 0.3s forwards linear
#start.up
  top: 0
  width: calc(100% - #{2 * $margin})
  transform: translate(-50%, 0%)
#start.down
  top: 50%
  transform: translate(-50%, -50%)
  @media only screen and (orientation: landscape)
    width: 65%
  @media only screen and (orientation: portrait)
    width: 85%