* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.main-container {
  background: lightgreen;
  width: 50vw;
  height: 100vh;
}
.upper {
  background: lightblue;
  height: 25%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap:1.8%;
}

.upper .upper-item {
  background: lightsalmon;
  width: 31%;
  height: 90%;
}

.lower {
  background: lightpink;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:2%;
}

.lower-left {
  display: flex;
  padding:10px;
  height: 96%;
  width: 47%;
  background: royalblue;
}
.lower-right {
  display: flex;
  background: royalblue;
  height: 96%;
  width: 47%;
}

.container {
  background: lightgreen;
  height: 400px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap:20px;
}

.item {
  background: lightyellow;
  padding: 20px;
  border:1px solid orange;
  width: 200px;
}

.content {
  color:white;
  background-color: royalblue;
  margin:20px;
  border: 15px solid orange;
  width: 50vw;
  height: 50vh;

}

.border {
  color:white;
  background-color: royalblue;
  margin:20px;
  border: 15px solid orange;
  width: 50vw;
  height: 50vh;
  box-sizing: border-box;
  font-family: 'Merriweather', serif;
  font-size: 5em;
}