WebAPISignalRChat/Frontend/src/index.css

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ======================================= root vars */
:root {
  --main-bg: linear-gradient(0deg,#00c9ff, #92fe9d);
  --main: #00c9ff;
  --secondary: #92fe9d;

  --medium-font-size: 1.5rem;
  --icon-font-size: 2.25rem;
}
/* ======================================= backgrounds */
.bg-main{
  background: var(--main-bg) !important;
}
.bg-main-primary{
  background: var(--main) !important;
}
.bg-light-transparent{
  background: rgba(255,255,255,0.75);
  background-size: cover;
  background-position: center;

}
/* ======================================= heights & widths */
.h-100-auto-overflow{
  height: 100vh !important;
  overflow-y: auto !important;
}
/* ======================================= borders */
.border-right{
  border-right: 2px solid #ababab;
}
/* ======================================= typography */
.medium-fs{
  font-size: var(--medium-font-size);
}
.icon-fs{
  font-size: var(--icon-font-size);
}
/* ======================================= buttons */
.btn-main{
  background-color: var(--main) !important;
}
.leave-btn{
  position: absolute;
  right: 3rem;
  top: 1.25rem;
}
.button-block{
  height: 50px;
  width: 50px;
  margin-bottom: 20px !important;
}
button.button-block{
  margin-top: 10px;
}
.button-block-flex-column{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.roomsBtn{
  transition: 0.35s;
}
.roomsBtn:hover{
  transition: 0.35s;
  padding: 0 20px;
  transform: scale(1.1);
}
/* ======================================= flex */
.flex-center{
  display: flex;
  justify-content: center !important;
  align-items: center !important;
}
/* ======================================= links */
.home-link{
  height: 200px !important;
  width: 350px !important;
  transition: 0.35s;
}
.home-link:hover{
  transform: scale(1.025);
  transition: 0.35s;
}
/* ======================================= forms */
.responsive-input{
  width: 325px !important;
}
.responsive-input-register{
  width: 575px !important;
}
@media screen and (max-width: 800px){
  .responsive-input-register{
    width: 100% !important;
  }
}
input[type=submit]{
  font-size: 1.25rem !important;
  text-transform: uppercase;
}
.messages{
  height: calc(100% - 130px);
  background: url('/public/background.jpg');
}
.overlay{
  height: 100%;
  background-color: rgba(255,255,255,0.9);
  overflow-y: scroll;
}
/* ======================================= overrides */
.overflow-auto{
  overflow-y: auto !important;
}
/* ======================================= chat */
.message{
  max-width: 70%;
}
.notification{
  height: 30px;
  width: 45px;
  display: flex;justify-content: center;align-items: center;
  color: white;
  background-color: crimson;
  border-radius: 50%;
  font-size: 0.8rem;
}
.text-main{
  color:var(--main) !important;
  font-weight: 900;
}
.chatMsg{
  font-size: 1.25rem;
}