body,html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  background-image: url('/public/images/background.jpg');
  background-repeat: repeat;
  background-size: 25vw;
}

.navbar-brand > img, .nav-link > img {
  width: 40px;
}

ul.navbar-nav > li {
  border-right: 2px solid rgba(255, 255, 255, 1)
}

ul.navbar-nav > li:last-child {
  border: none;
}


.top-nav,
footer  {
  background-color: rgb(124, 220, 251);
}

.link-nav-font-color {
  color: rgb(255, 255, 255) !important;
}

.fab {
  position: fixed; /* Fixed/sticky position */
  bottom: 40px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  max-width: 6rem;
}

.btn-fab {
   /* Hidden by default */
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  
  cursor: pointer; /* Add a mouse pointer on hover */
  border-radius: 10px; /* Rounded corners */
}

.foot-img {
  max-height: 10em;
}

.user-img {
  max-height: 10em;
}

.main-body {
  background-color: rgba(255, 255, 255, 0.7);
  flex-grow: 1;
}

.main-body,
.top-nav,
.heaer-img,
.footer {
  max-width: 900px;
}

.record-div {
  width:300px;
  margin:0 auto; 
  padding:20px 0;
}

.record-link {
  display:inline-block;
  text-decoration:none;
  height:20px;
  line-height:20px;
}

.record-link>p {
  float:left;
  height:20px;
  line-height:20px;
  margin: 0px 0px 0px 5px;
  color:#939393;
}



.text-right {
  text-align: right!important;
}

.blog-content {
  background-color: rgba(255, 255, 255, 0.7);
}

.blog-content img {
  max-width: 100%;
  height: auto!important;
}
/* input:invalid {
  border-color: red;
} */

.img-art {
  max-width: 30%;
}