:root{

--gap:2rem;
--violet:#3C1053;
--pink:#FF8674;

}

body,html{margin:0;padding:0; color:var(--violet)} *,*::before,*::after{box-sizing:border-box; position:relative;}

[data-nav] img{pointer-events: none;}
@font-face {
  font-family: 'Allotrope';
  src: url('../fonts/AllotropeLight/font.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Allotrope';
  src: url('../fonts/AllotropeRegular/font.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Allotrope';
  src: url('../fonts/AllotropeMedium/font.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Allotrope';
  src: url('../fonts/AllotropeBold/font.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Example usage */
body,input,textarea {
  font-family: 'Allotrope', sans-serif;
}


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

body {
  inset: 0;
  overflow: hidden;
  /* touch-action: none; */
}

.nopoint{pointer-events: none;}
.tcenter{text-align: center;}

input[type="text"]:focus::placeholder{opacity: 0;}
img{width: 100%; display: block;}

button{outline: none; min-width: 250px; text-transform: uppercase; border: none; border-radius: 1000px; background-color: var(--violet); padding: .8rem 3rem; padding-top: 1.1rem; font-size: 1.4rem; color: white;
font-size: 20px;
font-family: "Allotrope", sans-serif;font-weight: 700;
}
button.pink{background-color: var(--pink); color: white;}
button.outline{background-color: white; color: white;border: 2px solid var(--violet); color: var(--violet);}
.full{width: 100%;height: 100%;}
svg{width: 100%;}

.online{
  display: grid;
  grid-template-rows: 1fr auto;
}
.page{opacity: 0; pointer-events: none;       width: 100%; transition: all .3s ease;
      height: 100dvh;
      left: 0;
      top: 0;
      position: absolute;}
.page.active{opacity: 1; pointer-events: all;}
.flexcenter{display:flex;align-items:center; justify-content:center;}
.clasic{
  display: grid;
  grid-template-rows:115px 1fr auto;
}
.scroll{
  display: grid;
  grid-template-rows: auto 1fr;
}
/* .scroll .content:focus{outline: 6px solid red;} */
.scroll .content{
    overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y; /* or pan-x if horizontal */
  
  padding-bottom: 4rem;}
  .scroll .content * {
   pointer-events: none;
  }
.center{margin: 0 auto;}
.back,.back2{width: 145px;}
.grid{display:grid; gap:var(--gap); justify-items: center; max-width: 700px; }
.col2{grid-template-columns: 1fr 1fr;}
input[type="text"]{padding: 1.5rem 2rem; border-radius: 20px; border: 1px solid var(--violet); font-size: 1.4rem; text-align: center; min-width: 420px;}

.login{background-color: var(--violet);}
.btmmenu{display: flex; justify-content: space-between;}
.topbg{position: fixed; top: 0;right: 0;}
.gbg{position: fixed; bottom: 0; left: 0;
background: linear-gradient(45deg,#9e0a771a,#9e0a7700);
}
.flowers{
width:100%;height:100%;left:0;top:0;position: absolute; 
}
.flowers img{position: absolute;}
.rotation{ width:100%;height:100dvh;left:0;top:0;position: fixed; background-color: var(--violet); display: none;}
.ftop{transform-origin: top center;}
.fbtm{transform-origin: bottom center;}
@media (orientation: portrait) {
    .rotation {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}