// Colors
@import "global-colors"
$gradient1: #c7a25c
$gradient2: #ff9601
$gradient3: #980d0d

body
  margin: 0
  padding: 0
  display: flex
  justify-content: center
  background-image: linear-gradient(165deg, $gradient1 0%, $gradient2 43%, $gradient3 100%)
  min-height: 100vh
  font-family: monospace

.mainContainer
  margin-top: 3rem
  width: 95%
  display: flex
  flex-direction: column
  align-items: center

  h1
    text-align: center
    font-weight: 800
    font-size: 1.5rem
    color: $g_white

  img
    height: 8rem
    width: 8rem
    border-radius: 50%
    object-fit: cover


.linkBox
  display: flex
  flex-direction: column
  width: 750px
  max-width: 90%
  align-items: center

  a
    $height: 3rem
    $transitionDuration: 0.25s
    margin-top: 0.5rem
    margin-bottom: 0.5rem
    width: 100%
    height: $height
    line-height: $height
    text-align: center
    border-style: solid
    border-color: $g_white
    border-width: 4px
    color: $g_white
    text-decoration: none
    font-size: 1rem
    font-weight: 600
    transition: background-color $transitionDuration ease-in-out, color $transitionDuration ease-in-out
    &:hover
      background-color: $g_white
      color: $gradient2

//@TODO Add colors for different Platforms