body{
  margin: 0;
  padding: 0;
  background-color: rgb(172, 242, 254);
}

.titleAndCommands{
  display: flex;
  align-items: center;
  background-color: rgb(46, 100, 123);
  width: 100%;
  height:10vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.paragTitleBar{
  font-size: 3vh;
  margin-left: 3vw;
  color: white;
  text-decoration: none;
}
.paragTitleBar:hover {
  color: #a1a1a1;  
}

.paragTitleBar:active {   
  transform: scale(0.95);
}

#info{
  margin-left: auto;
  margin-right:2vw;
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-size: 3vw;
}
#info:hover {
  color:  #a1a1a1;  
}

#info:active {  
  transform: scale(0.95);
}

#problems{
  margin-right: 5vw;
  margin-bottom: 0px;
  text-decoration: none;
  color: rgb(255, 255, 255);

  font-size: 3vw;
}
#problems:hover {
  color:  #a1a1a1;  
}

#problems:active {  
  transform: scale(0.95);
}

.RandomAndproblems{
  display:flex; 
  flex-direction: column; 
  width: 60%;
  gap: 5vh;
  /*background-color: brown;*/
}

.updatesAndproblems{
  display:flex; 
  margin: 10vh auto; 
  margin-top: 20vh;
  width:97vw;
  gap: 5vw;
  /*background-color: brown;*/
}

#DailyProblem{
  border: 3px solid black;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
}
#RandomProblems{
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
}
.listItem{
  background-color: bisque;
  border: solid 5px black;
  width:50vw;
  margin-left: 6%;
  margin-bottom: 6%;
  min-height:5vh;
  border-radius: 15px;

  max-width: 100%;   
  word-break: break-word; 
  overflow-wrap: break-word; 
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 10;           
  -webkit-line-clamp: 10; 
  overflow: hidden;
  text-overflow: ellipsis;
}