html {
   font-family: 'Open Sans', sans-serif;
   font-weight: 700;
}

html * {
   box-sizing: border-box;
}

body {
   background-color: #f1f2f6;
   box-sizing: border-box;
   margin: 0;
}

.container {
   max-width: 536px;
   min-height: 100vh;
   background-color: white;
   text-align: center;
   margin: 0 auto;
}

.container-inner {
   padding-top: 43px;
   margin: 0 30px;
}

h1 {
   font-size: 20px;
   font-weight: bold;
   padding-bottom: 15px;
   border-bottom: 1px solid #EAEAEA;
}

h2 {
   font-size: 1rem;
   margin: 18px 0;
}

.button {
   margin: 30px 0;
   display: flex;
   justify-content: center;
   background-color: #1C6EE8;
   border-radius: 2em;
}

.btn{
   padding: 19px 0;
   width: 100%;
   color: white;
   font-weight: bold;
   font-size: 1rem;
   background-color: transparent;
   border-color: transparent;
   text-decoration: none;
}

.login {
   flex: 1;
   padding: 19px 0;
   color: white;
   font-size: 1rem;
   text-decoration: none;
}

.input-login{
   flex: 1;
   padding: 10px 0;
   font-size: 1em;
}

.register-form{
   width: 100%;
}

.input-form input[type=text], .input-form input[type=password]{
   width: 100%;
   border-radius: 2em;
   text-align: left;
   padding-left: 1em;
   margin-bottom: 1em;
   box-sizing: border-box;
}

.input-form label{
   width: 50px;
   text-align: center;
}

.gallery {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   row-gap: 10px;
}

.img-container {
   width: calc(33.3333% - (20px / 3));
   border-radius: 5px;
   border: 1px solid #EAEAEA;
   position: relative;
}

.img-container::before {
   content: '';
   display: block;
   padding-top: 100%;
}

.img-container > span {
   position: absolute;
   display: flex;
   border-radius: 3px;
   overflow: hidden;
   top: 9px;
   left: 9px;
   right: 9px;
   bottom: 9px;
}

.thumb {
   object-fit: cover;
   flex: 1;
}

hr {
   border: none;
   border-top: 1px solid #EAEAEA;
}

.step{
   font-size: .9em;
   color: grey;
   margin-bottom: 0;
   padding-top: 22px;
   font-weight: 400;
}

.logout{
   text-align: right;
   padding-top: 22px;
   padding-right: 22px;
}

.logout-button > img{
   width: 5%;
}

.images{
   width: 100%;
   display: flex;
}

.images img{
   width: 50%;
   padding: 0 5px;
}

.thin{
   font-weight: 400;
}

.alert, .alert-danger{
   color: #e10015;
   padding-bottom: 22px;
}