@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Outfit',sans-serif;
}

body{
  background:#030816;
  color:#fff;
  overflow-x:hidden;
}

/*
========================
HERO SECTION
========================
*/

.hero{
  min-height:85vh;
  padding:90px 8%;
  display:flex;
  flex-direction:column;
  justify-content:center;

  background:
  radial-gradient(circle at top left,#1357d8 0%,transparent 28%),
  radial-gradient(circle at bottom right,#00d4ff 0%,transparent 25%),
  linear-gradient(135deg,#030816,#071832);
}

.badge{
  width:max-content;
  padding:12px 24px;
  border-radius:40px;
  background:rgba(255,255,255,.08);
  color:#8eefff;
  border:1px solid rgba(255,255,255,.15);
  font-weight:800;
  margin-bottom:25px;
}

.hero h1{
  font-size:78px;
  line-height:1;
  max-width:950px;
  margin-bottom:25px;

  background:linear-gradient(90deg,#fff,#8eefff);

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero p{
  font-size:20px;
  max-width:800px;
  color:rgba(255,255,255,.72);
  line-height:1.8;
}

/*
========================
SEARCH BOX
========================
*/

.searchBox{
  margin-top:45px;

  display:flex;
  gap:15px;

  padding:18px;
  border-radius:28px;
  max-width:1100px;

  background:rgba(255,255,255,.08);

  border:1px solid rgba(255,255,255,.12);

  backdrop-filter:blur(20px);
}

.searchBox input,
.searchBox select{

  flex:1;

  padding:18px;

  border:none;
  outline:none;

  border-radius:18px;

  background:rgba(255,255,255,.09);

  color:#fff;

  font-size:16px;
}

.searchBox option{
  color:#000;
}

button{

  border:none;

  padding:16px 26px;

  border-radius:16px;

  background:linear-gradient(135deg,#00d4ff,#246bff);

  color:#fff;

  font-weight:900;

  cursor:pointer;

  transition:.3s;
}

button:hover{
  transform:translateY(-2px);
  opacity:.92;
}

/*
========================
DASHBOARD
========================
*/

.dashboard{

  max-width:1300px;

  margin:-55px auto 50px;

  padding:0 20px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));

  gap:20px;
}

.dashCard{

  padding:30px;

  border-radius:26px;

  background:rgba(255,255,255,.07);

  border:1px solid rgba(255,255,255,.1);

  backdrop-filter:blur(18px);

  transition:.3s;
}

.dashCard:hover{
  transform:translateY(-5px);
}

.dashCard h3{
  font-size:42px;
  color:#8eefff;
}

.dashCard p{
  color:rgba(255,255,255,.75);
}

/*
========================
LOADING
========================
*/

#loading{
  display:none;
  text-align:center;
  padding:30px;
  color:#8eefff;
  font-size:22px;
  font-weight:900;
}

/*
========================
BOOK SECTION
========================
*/

.book{

  display:none;

  max-width:1300px;

  margin:60px auto;

  padding:45px;

  border-radius:36px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.12);
}

.bookTop{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  flex-wrap:wrap;

  margin-bottom:30px;
}

.small{
  color:#8eefff;
  font-weight:900;
}

.book h2{
  font-size:46px;
  margin-top:8px;
}

/*
========================
BUTTONS
========================
*/

.btns{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.btns button{
  min-width:170px;
}

/*
========================
IMAGE GRID
========================
*/

.imageGrid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:20px;

  margin-bottom:30px;
}

.imgBox{

  min-height:340px;

  border-radius:26px;

  padding:18px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  gap:15px;

  background:
  linear-gradient(
  135deg,
  rgba(0,212,255,.25),
  rgba(36,107,255,.16)
  ),
  rgba(255,255,255,.06);

  border:1px solid rgba(255,255,255,.12);

  color:#8eefff;

  font-weight:900;

  overflow:hidden;
}

.imgBox h3{
  font-size:20px;
}

.imgBox img{

  width:100%;

  height:200px;

  object-fit:cover;

  border-radius:18px;

  border:1px solid rgba(255,255,255,.15);
}

.generateImageBtn{

  width:100%;

  background:
  linear-gradient(135deg,#00d084,#00b368);

  color:#fff;

  font-weight:800;
}

/*
========================
CONTENT
========================
*/

.content{

  padding:35px;

  border-radius:28px;

  background:rgba(255,255,255,.06);

  border:1px solid rgba(255,255,255,.1);

  color:rgba(255,255,255,.82);

  line-height:1.9;

  white-space:pre-wrap;

  margin-top:20px;
}

.content h3{

  color:#8eefff;

  font-size:26px;

  margin-top:25px;

  margin-bottom:10px;
}

.content[contenteditable="true"]{
  outline:2px solid #00d4ff;
}

/*
========================
SCROLLBAR
========================
*/

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-thumb{
  background:#00d4ff;
  border-radius:20px;
}

/*
========================
MOBILE
========================
*/

@media(max-width:768px){

  .hero{
    padding:70px 20px;
  }

  .hero h1{
    font-size:42px;
  }

  .hero p{
    font-size:16px;
  }

  .searchBox{
    flex-direction:column;
  }

  .book{
    padding:22px;
  }

  .book h2{
    font-size:32px;
  }

  .btns button{
    width:100%;
  }

  .imgBox{
    min-height:300px;
  }

}