/*----------GENERAL STYLING----------*/
html {
  box-sizing:border-box;
  scroll-behavior:smooth;
}

body {
  background-color:#322f31;
  color:#fefefe;
  padding:3rem;
  font-family:'Montserrat', 'Arial', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family:'Ubuntu', 'Arial', sans-serif;
}

a {
  color:#5ab5d1;
  text-decoration:none;
}

a:hover, a:active {
  color:#5ab5d1;
  text-decoration:underline;
}

img {
  max-width:100%;
}

.container {
  max-width:1000px;
}

/*--User Avatar--*/
.icon {
  width:250px;
  height:250px;
  border-radius:50%;
  margin:auto;
  background-size:cover;
  background-position:center;
  border:.55rem solid rgba(255,255,255,0.8);
}

/*----------GALLERY IMAGES----------*/

/*--Thumbnail--*/
.img-thumbnail {
  height:250px;
  background-color:rgba(255,255,255,0.8);
  border:none;
}

/*--Thumbnail (Image)--*/
.img-preview {
  height:100%;
  background-size:cover;
  background-position:center;
}

/*----------BUTTONS----------*/

.btn {
  border:none;
}

.btn-primary {
  background-color:#5ab5d1 !important;
}

.btn-primary:hover, .btn-primary:active {
  background-color:#36a1c2 !important;
}

.btn-outline-primary {
  color:#36a1c2;
}

.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color:#5ab5d1 !important;
  color:#fff;
}

.btn-outline-secondary {
  border-radius:0;
}

.btn-outline-secondary:hover, .btn-outline-secondary:active {
  background-color:rgba(255,255,255,0.6) !important;
}

/*----------MODAL----------*/

.modal-dialog {
  max-width:100%;
}

.modal-content {
  width:100%;
  padding:1.5rem;
  border:none;
  background:none;
}