/**************
|  style.css  |
**************/

html {
  background-color: red;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lemonchiffon;
  box-sizing: border-box;
  text-align: center;
  min-height: 100vh;
  padding: 10px 0;
  margin: 0;
}

img {
  width: 100%;
}

.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  /* border: solid 1px red; */
}

.gbox1 {
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 20px auto;
  background-color: white;
  box-shadow: 5px 5px 11px black;
  /* one way to do it */
  border-top: 100px solid rgb(234, 67, 53);
  border-left: 100px solid rgb(251, 188, 5);
  border-right: 100px solid rgb(66, 133, 244);
  border-bottom: 100px solid rgb(52, 168, 83);
}

.gbox2 {
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 20px auto;
  background-color: white;
  box-shadow: 5px 5px 11px black;
  /* another way to do the same thing */
  border-width: 100px;
  border-style: solid;
  border-color: rgb(234, 67, 53) rgb(66, 133, 244) rgb(52, 168, 83) rgb(251, 188, 5);
}

.frame1  {
  width: 100px;
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 20px auto;
  background-color: white;
  box-shadow: 5px 5px 11px black;
  border: 100px ridge rgb(52, 168, 83);
}

.frame2  {
  width: 100px;
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 20px auto;
  border-radius: 25px;
  background-color: white;
  box-shadow: 5px 5px 11px black;
  border: 100px outset rgb(66, 133, 244);
}