.username-container{
  padding-left: 2rem;
  font-size: 2rem;
}

.list-group-container {
  width:80%;
}

.viewnote-body{
  width: 75%;
}

.input-container {
  padding-top: 2rem;
}

.login-input-container{
  padding-left: 1rem;
}

.button-container {
  padding-left: 2rem 
}

.icon-button-container{
  display: flex;
  flex-direction: row;
}

.icon-button-text{
  padding-left: 0.5rem;
  
}

.viewnote-title {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.viewnote-container{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.confirm-logout-container{
  display: block;
  position: fixed;
  margin-top: 33vh;
}

.user-avatar {
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.logout-button-container{
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: 2rem;
}

.note-container{
  width: 80vw;
  border-left: 2px solid black;
  padding-top: 2rem;
}

.add-note-button-container{
  position: fixed;
  top: 80vh;
  left: 90vw;
}

.left-nav-bar-notes-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.left-nav-bar-container {
  width: 100vw;
  display: flex;
  flex-flow: row;
  height: calc( 100vh - 200px );
}

.main-content {
  
}

.name-nav-bar {

}

.top-nav-bar {
  height: 100px;
  width: calc( 100vw - 0.001px );
  border-bottom: 2px solid black ;
}

.home-background {
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

.home-container {
  width:100vw;
  height:100vh;
}

.login-background {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; 
}

.menu-input-field {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
