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

header{
  position:fixed;
  display:flex;
  justify-content: center;
  align-items: center;
  width:100vw;
  padding:5px 10px;
  background-color: var(--menu-color);
  border-bottom: 2px solid var(--menu-border-col);
  color:white;
}

.main-title{
  -webkit-text-stroke: 1.2px var(--menu-border-col);
}

.main-container{
  padding:50px 20px 20px 20px ;
  background-color: #363636;
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none;/* IE e Edge vecchio */
}

.main-container::-webkit-scrollbar {
  display: none;           /* Chrome, Safari, Edge Chromium */
}

.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:#ffe9e3;
  box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;;
  /* animation: bumping_red_bg 4s linear 2s infinite; */
  background: linear-gradient(-45deg,#ff0000, #bb0000, #ff0000);
	background-size: 200% 200%;
  animation: gradient 3s linear 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;
}

footer{
  position:fixed;
  display:flex;
  justify-content: space-around;
  align-items: center;
  bottom:0;
  background-color: black !important;
  width:100vw;
  padding:14px;
  border-top: 2px solid var(--menu-border-col);
  color:white;
}

footer > div{
  background-color: #cccccc;
  color:black;
  padding:5px 10px;
  border-radius: 20px;
  border: 2px solid var(--menu-border-col);
}