/* === Styling === */
body {
  font-family: Arial, sans-serif;
  margin: 50px;
  padding: 20px;
  background-color: #F9E79F;
}

/* === Float === */
.float-container {
  border: 3px solid #333;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #A9DFBF;
}

.float-left {
  float: left;
  margin-right: 15px;
  border: 1px solid #000;
}

.float-text {
  overflow: auto;
}

/* === Positioning: edits positions and the way the boxes look (for example: border width, height, etc.) === */
.position-box {
  position: relative;
  border: 2px dashed #555;
  padding: 10px;
  height: 100px;
  background-color: #e0f7fa;
  margin-bottom: 20px;
}

.absolute-box {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ffcc80;
  padding: 5px;
  border: 1px solid #333;
}

/* === Flexbox: creates the different boxes within the site === */
.flex-container {
  display: flex;
  gap: 15px;
  background-color: #c8e6c9;
  padding: 15px;
  justify-content: space-around;
  border: 4px solid #4caf50;
}

.flex-item {
  background-color: #81c784;
  padding: 20px;
  border: 1px solid #2e7d32;
  flex: 3;
  text-align: center;
}