body {
  font-family: sans-serif;
}


.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #202020;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 10px;
  z-index: 1000;
}
.navbar .logo {
  font-weight: bold;
}
.navbar .search {
  flex: 1;
  padding: 5px 10px;
}
.navbar .user {
  padding: 5px 10px;
  background: #333;
  border-radius: 4px;
}


.main-content {
  margin-top: 70px;  
  padding: 20px;
}


.sticky-alert {
  position: sticky;
  top: 0;
  background: #fffae6;
  padding: 10px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}


.box {
  padding: 15px;
  margin-bottom: 20px;
  background: #f0f0f0;
  border: 1px solid #999;
}


.static-box {
  position: static; 
}


.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
  background: #d0f0d0;
}


.container-for-absolute {
  position: relative;
  background: #e8e8ff;
  padding: 20px;
  margin-bottom: 40px;
  min-height: 200px;
}


.absolute-box {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ffd0d0;
  padding: 10px;
  border: 1px solid #c00;
}


.layout-duas-colunas {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}
.coluna {
  padding: 15px;
  border: 1px solid #ccc;
  min-height: 300px;
}
.esquerda {
  width: 70%;
}
.direita {
  width: 30%;

}


.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #202020;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}