* {
   box-sizing: border-box;
   font-family: Arial, sans-serif;
   margin:0;
   
}

body{
   background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(site.jpg)  ;
   color: white;
   background-position: center;
   background-size: cover;
   position: relative;
}

label{
   display: block;
   font-size: 14px;
   font-weight: bold;
   margin-bottom: px;
   margin-top: 20px;
}

h2.title{
   margin-top: 10px;
}

.tip{
   display: block;
   font-size: small;
   margin-bottom: 40px;
}

.formContainer,
.dashboardContainer{
   background-color: transparent;
  
   border-radius: 20px;
   min-height: 550px;
   padding: 20px;
   width:350px;
   margin:100px auto;
}

input[type=text],
input[type=password]{
   border: 1px solid transparent;
   border-radius: 5px;
   height:40px;
   padding: 0 10px;
   outline-color: rgba(8,35,172,0.8);
   width: 100%;
   color: black;
}
.dashboardContainer{
   width: 850px;
}

input[type=submit]{
   background-color: deepskyblue;
   border:none;
   border-radius: 5px;
   color:black;
   height: 40px;
   margin-top: 30px;
   width:100%;
   cursor: pointer;
}
input[type=submit]:hover{
   opacity: 0.7;
}

.link{
   font-size: small;
   margin-top: 30px;
   text-align: center;
   color: white;
}

a{
   color:deepskyblue;
   font-weight: bold;
   text-decoration: none;
}

.avatar img{
   width: 100px;
}

.welcomeMessage{
   margin-top: 20px;
}

.notes{
   font-style: italic;
   margin-bottom: 30px;
}

.errorMsg{
   font-size: small;
   background-color: #ff7979;
   color: #ffffff;
   border-radius: 5px;
   padding:10px;
}

.successMsg{
   font-size: small;
   background-color: #2ecc71;
   color: #ffffff;
   border-radius: 5px;
   padding:10px;
}