html { scroll-behavior: smooth; font-family: ubuntu; }
*{ box-sizing: border-box; margin:0; padding:0;}

.main-container{
  padding:20px;
  background-color: rgb(186, 186, 186);
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction: column;
  align-items: center;
}

.alert-container{
  margin-bottom:10px;
  border: 2px solid black;
  width:fit-content;
  padding:8px 10px;
  border-radius: 10px;
  cursor: pointer;
  background-color: #3380c8;
}

.alert-container:first-of-type{ margin-top:15px;}
.alert-container:last-of-type{ margin-bottom: 15px;}

.alert-info{
  display:grid;
  grid-template-columns: 200px 400px auto auto;
}

.alert-info > div {
  margin: 5px auto 3px auto;
  display:flex;
  justify-content: center;
  align-items: center;
  
}

.alert-container div{
  text-align: left;
  min-width: 200px;
  
}

.alert-details{
  display:none;
  padding:10px;
  border:1px solid black;
  border-radius: 10px;
  margin:5px;
  background-color: rgba(255, 255, 255, 0.774);
  color:black;
  
  justify-content: space-between;
  flex-wrap: wrap;
  
}

.alert-details > div{
  margin:10px;
}

.details-show{
  display:flex;
}

.alert_red{
  background-color: #df1414;
  color:#ff9175;
  box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;;
  animation: bumping_red_bg 4s linear 2s infinite;
}

.alert_green{
  background-color: #1f991b;
  color:#c3ffb4;
  box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;;
  animation: bumping_green_bg 4s linear 2s infinite;
}