@font-face {
  font-family: 'Montserrat Regular';
  font-weight: normal;
  src: url(Montserrat-Regular.ttf);
}
@font-face {
  font-family: 'Montserrat';
  src: url(Montserrat-SemiBold.ttf);
}
@font-face {
  font-family: 'Montserrat Bold Italic';
  src: url(Montserrat-BoldItalic.ttf);
}
.font-regular {font-family: 'Montserrat Regular';}
.font-semibold {font-family: 'Montserrat';}
.font-bold {font-family: 'Montserrat Bold Italic';}

body {
  font-family: 'Montserrat';
  width: 100vw;
  max-width: 480px;
  margin: auto;
}
a {color: #82373B; text-decoration: none; font-weight: bold;}
hr {border-color: #F492AB;}

*::-webkit-scrollbar {display: none;}
* {-ms-overflow-style: none; scrollbar-width: none;}

.no-scroll {overflow: hidden;}

.main-container {
  width: 100vw;
  max-width: 480px;
  min-height: 100vh;
  margin: auto;
  display: block;
  /* background-image: linear-gradient(to bottom right, #FCDEE3, #FDEBEE, #FEF8F9, #FCE5E8); */
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: 100% 100%;
  position: relative;
}
.main-container.white {
  background-color: #FFF;
  background-image: none;
}

.ws-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: linear-gradient(203.12deg, rgba(194, 194, 194, 0.59) 8.19%, #FFFFFF 65.94%, rgba(194, 194, 194, 0.59) 85.04%) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.ws-gradient-border.capsule::before {
  border-radius: 500px;
}
.ws-gradient-border.big-rad::before {
  border-radius: 36px;
}

.ws-navbar {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 5% 20px;
  transition: 0.2s;
  z-index: 2;
}
.ws-navbar.scrolled {background-color: #FFF;}

.ws-navbar .ws-logo {display: block; width: 25%;}
.ws-navbar .ws-logo img {width: 100%;}

/* .ws-nav-buttons {display: block; text-align: right;} */
.ws-navbar a {display: inline-block; width: 5%; margin-left: 10px;}
.ws-navbar a img {width: 100%;}

.back-button {display: block; width: 5%;}
.back-button img {width: 100%;}

.ws-text-button {
  border-radius: 500px;
  font-family: 'Montserrat Bold Italic';
  padding: 10px 60px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid #82373B;
  font-size: x-large;
  color: #A76B74;
  margin: auto;
  display: block;
}

.wardah-blue {
  color: #007393;
}


/* Editor */
.editor-list {
  display: block;
  width: 100%;
}

.editor-photo {
  display: inline-block;
  margin: 10px;
  width: 150px;
}
.editor-photo img {
  position: relative;
  width: 100%;
}