@import 'grid';

@import 'color';

body{
  font-family: 'Raleway', sans-serif;
  font-size: 22px;
  background-color: $color1;
  color:$color4;
  margin:0px;
}
*, ::after, ::before {
    box-sizing: border-box;
}
.container{
  padding-top:50px;
}

@for $i from 1 through 6 {
    h#{7 - $i} {
        color:$color2;
        font-size:2.4em / 6 * $i;
        font-family: 'Questrial', sans-serif;
    }
}
#userBox{
  margin-top: 2em;
  position: sticky;
  top: 65px;
  text-align: center;
  .avatar{
    display: inline-block;

    width:150px;
    height:150px;
    border-radius: 150px;
    background-position: center;
    background-size: contain;
  }
  p{
    font-size: 0.8em;
    text-align: left;
  }
}
nav{
  z-index: 999999;
  position: fixed;
  background-color: $color5;
  width:100%;
  height: 55px;
  display: flex;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
nav h1 {
    margin-top:0.9em;
    margin-left: 10px;
    font-size: 0.9em;
    a{
        color:$color3;
    }
    text-decoration: underline;
    flex-grow: 3;
    flex-basis: auto;
}

#menu-select{
  color:$color3;

  flex-shrink: 1;
  width:4em;
  padding:0.5em;
  font-size:1em;
  text-align: center;
  &:hover{
    cursor:  pointer;

  }

}
#menu{
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color:$color2;
    position:fixed;
    ul{

      list-style: none;
      padding:0px;
      padding-top: 0.8em;
      height: 100%;
      a{
        color:$color1;
        &:hover{
          color:$color4;
        }
      }
      li{
        margin:1em;
        color:$color1;
        font-size: 1.5em;
        text-align: center;
        &:hover{
          color:$color4;
        }
      }

    }
}

a{
  color:$color2;
  text-decoration: none;
  &:hover{

  }
}

img{
  max-width: 100%;
}

small{
  color: $color5;
}

.form-field{
  padding-top: 1em;
  label{
    width:100%;
    display: inline-block;
    color:$color2;
  }
  input{
    width:100%;
    padding: 0.5em;
    font-size: 1em;
  }
  textarea{
    width:100%;
    height:5em;
    padding: 0.8em;
    font-size: 1em;
  }
  select{
    width:100%;
    height:2em;
    background-color: $color3;
    font-size: 1em;
    padding-left: 0.8em;
    option{
      background-color: $color3;

      font-size:1.2em;
    }
  }
  .error{
    color:$color4;
    background-color: $color2;
    padding: 0.3em;
  }
}
button {

  padding: 10px;
  border:0px;
  font-size: 1.2em;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  &:hover{
    cursor: pointer;
    text-decoration: underline;

  }

  &.small{
    font-size: 0.5em;
  }

  &.default{
    background-color: $color4;
  }
  &.abort{
    color:$color1;
    background-color: $color2;
  }

}
