/* Stylesheet for login page canvas.mdh.se */

* {
    margin: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color:rgb(253,247,239);
    font-family: 'Proxima Nova', 'LatoWeb','Open Sans', sans-serif;
}
.content {
    flex: 1 0 auto;
    width: 800px;
    margin: 0 auto;
    text-align:center;
}
main nav{
    margin-top: 50px;
    text-align: center;
}
main nav p{
    margin: 10px;
}
main nav div{
    display: inline-block;
    width: 200px;
    vertical-align: top;
    margin:0 20px;
}
main nav div p{
    text-align: left;
}
main nav a{
    border: 2px solid rgba(50,50,50,0.5);
    border-radius: 6px;
    padding: 25px 10px 10px 10px;
    display: inline-block;
    margin: 4px;
    height: 90px;
    text-decoration: none;
    background-color: rgb(233,75,30);
    color:#fff;
    font-size: 20px;
}
hr{
    margin: 0 auto;
    width:80%;
}
.eng{
    font-size:12px;
}
main nav a:hover{
    background-color: bisque;
    color:rgb(233,75,30);
    font-weight:600;
}
div.content > nav{
   padding-top: 40px;
}
footer {
    background: rgb(233,75,30);
    text-align: center;
    padding:20px;
    line-height:20px;
}
.footer{
    flex-shrink:0;
}
#footerlinks a{
    color: rgb(253,247,239);
}

/* On screens that are 1200px or less */
@media screen and (max-width: 1200px)  {
  main nav div{
    width: 250px;
    margin:10px 20px;
  }
   main nav a{
    vertical-align: top;
  }
  div.content > nav{
   padding-top: 10px;
  }
  .content {
    width: 100%;
    margin: 0 auto;
  }
  img#mdulogo{
        width: 110px;
  }
  main nav{
    margin-top: 10px;
  }
}

/* On screens that are 600px or less */
@media screen and (max-width: 600px) {
  main nav a{
    vertical-align: top;
    width: 80%;
  }
  .content {
    max-width: 100%;
    margin: 0 auto;
  }
    img#mdulogo{
        width: 110px;
    }
}