/* main style sheet */

* {
  font-family: 'Montserrat', sans-serif;
}

html { height: 100%}

body { 
  background: white;
  height: inherit;
  margin: 0;
  display: flex;
}

body > section {
  flex: 1 1 auto;
  padding: 0;
  height: 100%;
  width: 100%;
}

/* controls -------------------------*/

section#controls {
  flex: auto;
  display: flex;
  background: orange;
}

section#controls > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

section#controls > div > * {
  margin: 3px;
}

/* site */

section#controls > div#site {
  vertical-align: 3px;
}
section#controls > div#site > * {
  width: 24px;
  height: 24px;
}

section#controls > div#site > span#svglogin > svg {
  width: inherit;
}

/* logo */

section#controls > div#logo img {
  height:60px;
  width:60px;
}

/* links */

section#controls > div#links {
  font-size: 16px;
  vertical-align: 3px;
}

section#controls > div#links > * {
}

section#controls > div#links > a {
  color: black;
  text-decoration: none;
}

/* settings -------------------*/

section#settings {
  display: none;
}

/* main ----------------------*/

section#main {
  z-index: 1;
  background: grey;
  display: none;
}

/* login -----------------*/

section#login {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

section#login > form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  border: 2px solid black;
  border-radius: 10px;
  padding:5px;
  background: orange;
}

section#login > form > * {
  font-size: 12pt;
  border: 1px solid black;
  border-radius: 5px;
  margin: 5px;
  padding: 0.25rem;
}

section#login > form > button {
  background: #ffd587;
  text-align: center;
}

/* reactive ------------------------------*/

/* controls on top, main below */
@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
  section#controls {
    flex-direction: row;
    width: 100%;
    height: auto;
  }
  section#controls > div#site {
    flex-direction: column;
    width: 30px;
  }
  section#controls > div > * {
    margin-right: 0px;
  }
}

/* controls on right, main on left */
@media (orientation: landscape) {
  body {
    flex-direction: row-reverse;
  }
  section#controls {
    flex-direction: column;
    height: 100%;
    width: auto;
  }
  section#controls > div#site {
    height: 30px;
    flex-direction: row-reverse;
  }
  section#controls > div > * {
    margin-bottom: 0px;
  }
}

/* EOF */