@use "helpers";

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

body{
  background-image: url(../img/colchao-p.jpg);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 80vw auto;
  background-attachment: fixed;
  color: helpers.$textoDark;
  font-family: "Roboto_Regular", arial, sans-serif;
  font-size:  14px;
  white-space: pre-line;
}

*{
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  position: relative;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; 
}

#content{
  padding: 14px;
  position: absolute;
  width: 100%;
}

#content p{
  margin: 0;
  padding: 0;
}

#content .txt-det{
  color: helpers.$textoMedium;
}

#content .logo{
  margin: 14px 0;
  max-width: 70%;
}

#content strong{
  display: inline-block;
  margin-top: 10px;
}


@media(orientation:landscape){
  body{
    background-image: url(../img/colchao-m.jpg);
    background-size: 70vw auto;
  }

  #content .logo{
    max-width: 40%;
  }
}

@media(orientation:landscape) and (min-width:1000px){
  body{
    background-image: url(../img/colchao-l.jpg);
    background-color: helpers.$light;
    font-size: 18px;
  }

  #content{
    left: 15%;
    top: 10%;
    width: auto;
  }

  #content .logo{
    margin: 24px 0 50 0;
    max-width: none;
  }
}