/**
 * index.css - All styles (mostly) for course index page
 */

html 
{
  box-sizing: border-box;
  font-size: 100%;
}

*, *:before, *:after 
{
  box-sizing: inherit;
  -ms-text-size-adjust: 100%; 
  -moz-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%; 
}

body,html
{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

body
{
  /**
   * https://unsplash.com/license 
   *
   * To change background photo, 
   * replace "bg.jpg" in the skin folder.
   */
  background-image: url(bg.jpg); 

  display: flex;
  flex-direction: column;
  justify-content: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: all 200ms ease-out;
  font-size: 1rem;
}

.container
{
  width:100%;
  position: relative;
  padding:0 1rem;
  display:flex;
  flex-direction: column;
}

#header,
#username-container,
#meta
{
  margin: 0 auto;
  max-width: 725px;
  width:100%;
  transition: all 200ms ease-out;
}

#header
{
  position: relative;
  padding: 3rem 7rem;
  text-align: center;
}

.header-background
{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity: .85;
  z-index: -1;
  /*mix-blend-mode: multiply;*/
}

#title
{
  font-size: 2rem;
  font-weight: lighter;
  margin: 0;
  padding: 0;
}

#row-description
{
  font-size: 1rem;
}

#username-container
{
  padding: 1rem 7rem;
}

#username,
#current-username-container
{
  border: none;
  width: 100%;
}

#username
{
  padding:.5rem 1rem;
  margin:0 .5rem 0 0;
}

#current-username-container
{
  justify-content: space-between;
  border: 2px solid #fff;
  background: rgba(255,255,255,0.125);
}

#current-username
{
  display: block;
  padding:.5rem 1rem;
  word-break: break-all;
}

#save-username-btn
{
  border: none;
  text-align: center;
  font-size: 1.125rem;
  padding:.5rem 2rem;
  cursor: pointer;
  border:2px solid transparent;
  transition: all 200ms ease-out;
}

#save-username-btn:hover
{
  border:2px solid #fff;
}

#clear-username-btn
{
  color:#fff;
  border: none;
  background:transparent;
  transition: all 200ms ease-out;
  padding:.25rem 1rem;
  cursor: pointer;
}

#clear-username-btn:hover
{
  color:#333;
  background:#fff;
}

#meta
{
  font-size: .875rem;
  padding: 2rem 7rem;
}

#launch-course-btn
{
  border: none;
  outline: none;
  padding:1rem 2rem;
  cursor: pointer;
  background: #fff;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1rem;
  font-family: inherit;
  text-transform: uppercase;
  min-width: 300px;
  margin:2rem 0;
  transition: all 200ms ease-out;
  color:#666;
  border:4px solid transparent;
}

#launch-course-btn:hover
{
  color:#333;
  border:4px solid #333;
}

#username-container,
#current-username-container
{
  display: none;
}

.row
{
  display:flex;
  justify-content:space-between;
  margin: 0 0 .5rem 0;
  overflow: hidden;
}

.row-label
{
  font-weight: bold;
}

.row .row-label
{
  flex:1;
}
.row .row-value
{
  flex:2;
}

#footer
{
  margin:1rem 0 0 0;
}

#footer a:link
{
  text-decoration: underline;
}

/* Flex vert center bugfix */
@media only screen and (max-height: 768px), only screen and (max-device-height: 768px) {

  body
  {
    justify-content: flex-start;
  }

  .container
  {
    margin:1rem 0;
  }

}

/* Generic Tablet */
@media only screen and (max-device-width: 768px) {
  html { font-size: 125%; }
}
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {

  body
  {
    justify-content: flex-start;
  }

  #header,
  #username-container,
  #meta
  {
    padding:4rem;
  }

  .container
  {
    margin: 1rem 0;
  }

  #launch-course-btn
  {
    font-size: 1.275rem;
  }

  #current-username-container
  {
    margin: 0;
    width: auto;
  }

  #meta
  {
    font-size: 1rem;
  }
}

/* Generic Phone */
@media only screen and (max-device-width: 480px) {
  html { font-size: 250%; }
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

  #launch-course-btn
  {
    margin:2rem auto;
  }

  #row-description
  {
    line-height: 1.5rem;
  }

  #row-description .row-label
  {
    text-align: center;
    text-transform: uppercase;
    padding:.5rem 0;
  }

  #header,
  #username-container,
  #meta
  {
    max-width: 100%;
    margin: 0 auto;
    padding:2rem;
  }

  #username-form .row,
  #meta .row
  {
    flex-direction: column;
  }

  #meta .row
  {
    margin: 0 0 .75rem 0;
  }

  .container
  {
    margin:0;
    padding:0;
  }

  #footer
  {
    margin:2rem 0 0 0;
  }

  #save-username-btn
  {
    margin:1rem 0 0 0;
  }

  #username,
  #current-username-container
  {
    margin: 0;
    width: auto;
  }

}