style.css

*{
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
}

#root{
  position: relative;
  overflow-y: hidden;
  width: 100vw;
  height: 100vh;
}

#container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(to right, #ccc, yellow, lightblue, white);
  width: 7777px;
  height: 100vh;
}

.square {
  position: absolute;
  width: 100px;
  top: 250px;
  height: 100px;
  box-shadow: 2px 2px 5px darkolivegreen;
}
.square p{
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  color: white;
  font-weight: bold;
  font-size: 20px;
  text-shadow: 1px 1px 3px grey;
}

#k1 {
  background: purple;
  left: 2000px;
}

#k2 {
  background: blue;
  right: 50%;
}

#k3 {
  background: pink;
  right: 2500px;
}

#k4 {
  background: darkolivegreen;
  right: 2000px;
}

.btns {
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 10px;
  width: 100vw;
  text-align: center;
}
h4{
  margin-bottom: 10px;
}
.btn{
  display: block;
  box-shadow: 1px 1px 4px darkolivegreen;
  margin: 0 auto;
  padding: .5em;
  margin-bottom: 4px;
  font-weight: bold;
}

.screen-center{
  position: absolute;
  top: 0;
  left: 50%;
}

.screen-center .square-dash-frame{
  position: absolute;
  top: 240px;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border: 5px dashed tomato;
}

.screen-center .square-dash-frame::after{
  position: absolute;
  content: 'screen center';
  width: 100%;
  height: 15px;
  left: 0;
  bottom: -20px;
  text-align: center;
}