/* @import "./../../common/mordern-reset.css"; */

div:not(#awebChromeHelper){
  font-size: 3rem;
  border: 1px solid currentColor;
  padding: 10px;
}

/* 요소 박스 위치 지정 (percentage value) */
.percentage-value{
  border: 1px solid currentColor;
  margin: 1em !important;
  padding: 10px !important;
  font-size: 1rem !important;
  width: 200px;
  inline-size: 200px;
  
  p{
    padding: 20%;
    margin: 0;
    border: inherit;
    position: relative;
    left: 50%;
    inset-inline-start: 50%;
    background-color: tomato;
  }
}


.static{
  background: yellow;
  margin-top: 50px;
  margin-block-start: 50px;
}

.fixed{
  background-color: hsla(250 50% 50% / 1);
  position: fixed;
  inset-inline-end: 0;
  inset-block-end: 0;
}

.relative-wrapper{
  position: relative;
  inset-block-start: 250px;
  inset-inline-start: 50px;
}
.absolute-wrapper{
  position: absolute;
}

.absolute{
  inline-size: 650px;
  background: sandybrown;
  position: absolute;
  inset-inline-start: 100px;
  inset-block-start: 0px;
}

.sticky{
  background-color: aquamarine;
  padding: 20px;
  margin-block: 100px;
  position: sticky;
  inset-block-start: 0;
}