/* Enter Animation Fonts */
@font-face {
  font-family:'GalleryModern';
  src: local('GalleryModern'), local('../FONT/GalleryModern'),
      url('../FONT/GalleryModern.otf') format('opentype');
}

@font-face {
  font-family:'Branch';
  src: local('Branch'), local('../FONT/Branch'),
      url('../FONT/Branch.otf') format('opentype');
}

@import url('https://fonts.cdnfonts.com/css/gill-sans');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@200&display=swap');



/* Enter random site */

/* canvas */



/* custom bouquet */
.randoms_background{
  /* border: #1f1f1f solid;
  border-width: 0.07em; */
  overflow: hidden;
  position: relative;
  
  /* align-items: center; */
  opacity: 1;
  /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%,-50%); */
  height: 100%;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: blueviolet;
  /* border-radius: 20px; */
}

.random_canvas{
  overflow: hidden;
  position: relative;
  height: 100%;
  /* max-height: fit-content; */
  opacity: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  background-color: #ffffff;
  
}

#scroller_random_canvas{
  overflow: hidden;
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: white;
  display: none;
  margin-top: auto;
}


/* canvas */
.entersite_subheading{
  opacity: 0;
  z-index: 30;
  text-align: center;
  align-content: center;
  margin: 0;
  left: 50%;
  bottom: 10%;
  width: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.entersite_subheading p{
  font-family: "GalleryModern";
  font-size: 1.13rem;
  font-weight:lighter;
  letter-spacing: 0.1em;
  text-align: center;
  color: #1f1f1f;
  z-index: 15;
  line-height: 22px;
  text-shadow: 0 2 30px rgb(255, 255, 255);
}

.entersite_subheading button{
  font-family:'Branch';
  font-size: 2.1vh;
  line-height: 1em;
  font-weight: 400;
  font-style: italic;
  text-align: center;
  color: #1f1f1f;
  background-color: #fff;
  border: 2em #1f1f1f solid;
  border-width: 0.1px;
  border-radius: 3em;

  cursor: pointer;
  padding: 0 1.5em;
  height: 2em;
  margin: 2em auto 0;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

            .random_heart {
              display: flex;
              background-color:rgba(255, 255, 255, 0);
              border: rgba(255, 255, 255, 0) solid;
              justify-content: center;
              color: rgb(246, 98, 123);
              padding: 0;
              width: 100%;
            }
            .random_box{
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
              flex-direction: column;
              width: 100%;
              height: 100vh;
              background-color: #ffffff;
              z-index: 5;
            }

            .random_box input{
              border: #00000000 solid;
              border-top-style: hidden;
              border-right-style: hidden;
              border-left-style: hidden;
              border-bottom-style: groove;
              outline: none;
            }
                      .random_box .random_submit_input{
                        border: 0;
                        background: none;
                        outline: none;
                        padding: 0;
                        margin: auto;
                        text-align: center;
                        align-items: center;
                        top: 50%;
                        width: 100%;
                        height: 100%;
                        cursor: pointer;
                        pointer-events: all;
                        -webkit-user-select: pointer;
                        -moz-user-select: pointer;
                        -ms-user-select: pointer;
                        user-select: pointer;
                      }
                      .random_form div #username:hover,
                      .random_form div #receiver:hover{
                        font-size: 8rem;
                      }

                      .random_invalid_check::placeholder{
                        color: #d84949;
                      }

                      .random_form div #username::placeholder,
                      .random_form div #receiver::placeholder{
                        transition: all 0.4s ease; 
                      }

                      .random_form div #username:hover::placeholder,
                      .random_form div #receiver:hover::placeholder{
                        color: #1f1f1f58;
                        letter-spacing: 6vh;
                        padding-left: 52.5px;
                        align-content: center;
                        text-align: center;
                        justify-content: center;
                        
                      }
                      
                      .random_form div input{
                          font-family: "GalleryModern";
                          font-size: 6.6rem;
                          font-weight: 100px;
                          text-align: center;
                          color: rgb(0, 0, 0);
                          left: auto;
                          width: 100%;
                          height: 200px;
                          outline: none;
                      }

                      .random_form  h2{
                        font-family: "GalleryModern";
                        font-size: 3.6rem;
                        font-weight: 100px;
                        text-align: center;
                        color: rgb(0, 0, 0);
                        left: auto;
                        margin: 2rem 0 6.2rem 0;
                    }
              
              
              .random_content_box button{
                background-color: #00000000;
                border: #00000000 solid;
                padding:  1.5em 0 1.5em 0;
                margin: auto;
                font-size: 0.6rem;
                transition: all 0.4s ease;
              }
                    .random_content_box button i {

                      border: #1f1f1f solid;
                      border-width: 0.01em;
                      background: #fff;
                      border-radius: 50%;
                      padding: 3.8px;
                      z-index: 2;
                    }

                    .random_content_box button:hover,
                    .random_content_box button:hover{
                        font-size: 1.6rem;
                      }

                    .random_content_box button h3{
                      font-family: 'Gill Sans', sans-serif;
                      font-size: 1.4rem;
                      font-weight: 100px;
                      text-align: center;
                      color: rgb(0, 0, 0);
                      padding: .3em 1em .3em 1em;
                      border-radius: 50%;
                      text-align: center;
                      transition: all 0.4s ease;
                    }


                    .random_content_box button h3:hover{
                        font-size: 2.1rem;
                        border: #1f1f1f solid;
                        border-width: 0.01em;
                        background: #fff;
                      
                      }


            
.random_smll_content {
  margin: auto;
  margin-top: 3em;
  margin-bottom: 3em;
}
    .random_smll_content img{
      position: absolute;
      left: 52%;
      top: 43%;
      width: 60vh;
      height: 60vh;
      transform: translate(-50%,-50%);
    }
    .random_smll_content .random_smll_frame{
      position: absolute;

      background-image: url('/static/IMG/RANDOMS/random_sunflower_bg.png');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      border-top-left-radius: 13em;
      border-top-right-radius: 13em;
      border: #1f1f1f solid;
      border-width: 0.07em;
      left: 50%;
      top: 5%;
      width: 39vh;
      height: 63vh;
      transform: translate(-50%, 0%);
      box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    }
                .random_smll_content .random_smll_frame .random_smll_text{
                    position: absolute;
                    background-color: #ffffff;
                    border: #1f1f1f solid;
                    border-width: 0.07em;
                    left: 50%;
                    bottom: -1%;
                    width: 39vh;
                    height: auto;
                    padding-bottom: 3vh;
                    transform: translate(-50%, 0%);
                }

                .random_smll_content .random_smll_frame .random_smll_text h1,
                .random_smll_content .random_smll_frame .random_smll_text h2{
                    font-family: "GalleryModern";
                    font-size: 2rem;
                    font-weight: 100px;
                    text-align: center;
                    color: rgb(0, 0, 0);
                    margin: 3vh 0 0 0;
                }

                .random_smll_content .random_smll_frame .random_smll_text h2{
                  padding-top: 0.4em;
              }

                .random_smll_content .random_smll_frame .random_smll_text h3{
                  font-family: 'Gill Sans', sans-serif;
                  font-size: 1.4rem;
                  font-weight: 100px;
                  text-align: left;
                  color: rgb(0, 0, 0);
                  margin: 0 0 0 0;
                  text-align: center;
              }

                .random_smll_content .random_smll_frame .random_smll_text p{
                  font-family: 'Noto Sans Thai', sans-serif;
                  line-height: 1.4em;
                  font-size: 14px;
                  font-weight: 100px;
                  text-align: left;
                  color: rgb(0, 0, 0);
                  margin: 0 0 0 0;
                }
.random_bg_ceontent {
    position: absolute;
    background-color: rgba(255, 228, 196, 0.561);
    border: #1f1f1f solid;
    border-width: 0.07em;
    overflow: hidden;
    right: -1vh;
    top: -1vh;
    width: 40%;
    height: 100vh;
    transform: translate(0%, 0%);
    z-index: -1;
}
.random_IconWrapper {
  padding-left: 5em;
  padding-right: 5em;

  position: absolute;
  border-top: #1f1f1f solid;
  border-width: 0.07em;
  
  background-color: #ffffff;

  
  left: 50%;
  bottom: 0%;
  width: 100%;
  height: 8vh;
  transform: translate(-50%,0%);
  grid-template-columns: 8vh 8vh 8vh;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 3em;
}

      .random_IconWrapper a,
      .random_IconWrapper button{
        background-color: #00000000;
        border: #00000000 solid;
        color: #1f1f1f6c;
        padding: 0 1.5em 0 1.5em;
        margin: 0 0 0 0;
      }
              .random_IconWrapper .icon {
                cursor: pointer;
              }
                      .random_IconWrapper .icon span {
                        border: solid #1f1f1f;
                        border-width:  0.07em;
                        display: flex;
                        height: 40px;
                        width: 40px;
                        background: #fff;
                        border-radius: 50%;
                        z-index: 2;
                        text-align: center;
                      }
                              .random_IconWrapper .icon span i {
                                flex: 1;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                margin: auto;
                                font-size: 1.5rem;
                              }