@import url('https://fonts.googleapis.com/css2?family=BBH+Bogle&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');


*{
  margin: 0;
  padding: 0;
  font-family: "BBH Bogle", sans-serif;
  font-weight: 400;
  font-style: normal;
}



body{
  background-color: #212121;
  background-image: url(assets/justclouds.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}




#loader{
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner{
  width:70px;
  height:70px;
  border:7px solid #eee;
  border-top:7px solid #cf4040;
  border-radius:50%;
  animation:spin 1s linear infinite;
  position:absolute;
  
}


@keyframes spin {
  100% { 
    transform: rotate(360deg);
   }
}



a{
  text-decoration: none;
  color: white;
  padding: 10px;
}
header nav .logo-nav{
  display: flex;
  justify-content: space-between;
  height: 10vh;
  align-items: center;
  /* background-color: #8C9491; */
}

header nav .logo-nav .img{
  margin: 20px;
  font-size: 40px;
  color: white;
  margin-left: 40px;
}

header nav .logo-nav .text{
  font-size: 40px;
  margin: 20px;
}

.container{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 60px 30px;
  align-items: center;
  flex: 1;
  visibility: hidden;
}

.container .box{
  background-color: #DBD3D8;
  height: 400px;
  width: 350px;
  margin: 20px;
  border-radius: 80px;
  box-shadow: rgba(11, 11, 11, 0.3) 0px 0px 0px 3px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  position: relative;
  max-width: 95vw;
}

#harshfoot{
  background-image: url(assets/7.jpg);
  background-position: top;
  background-size: cover;
}

#raunakfoot{
 background-image: url(assets/personclouds.jpeg);
  background-position: center;
  background-size: cover;
}

#prathamfoot{
 background-image: url(assets/lampclouds.jpeg);
  background-position: top;
  background-size: cover;
}

#prahladfoot{
 background-image: url(assets/cloudrailing.jpg);
  background-position: top;
  background-size: cover;
}

.container .foot{
  background-color: black;
  height: 90px;
  width: 100%;
}



.container .box .content{
  margin-top: 50px;
  font-size: 40px;
}

.container .pfp{
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 40px;
  right: 10px;
  /* transform: translateX(-50%); */
  width: 100px;
  height: 100px;
  border-radius: 20px;
  border: 2px solid black;
  background-color: aliceblue;
}

.box-wrap{
  position: relative;
  display: inline-block;
}

.box-wrap .streak{
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  background-image: url(assets/output-onlinegiftools.gif);
  /* background-position: center; */
  background-size: cover;
  background-repeat: no-repeat;
  right: -5px;
  top: -5px;
  z-index: 10;
  padding: 6px;
  /* transform: translateX(-20%); */
  width: 100px;
  height: 100px;
  border-radius: 20px;
  /* background-color: #CD6858; */
}


.streak span{
    font-family: "Rye", serif;
    font-size: 52px;
    /* color: red; */
}

.streak-count{
  transform: translateY(25px);
}
@media (max-width: 900px){
  .container .box{
    width: 300px;
    height: 380px;
  }
  .container .box .content{
    font-size: 28px;
  }
}

@media (max-width: 700px){
  header nav .logo-nav .img{
    font-size: 30px;
  }

  header nav .logo-nav .text{
    font-size: 25px;
  }

  .container{
    margin: 40px 10px;
  }

  .container .box{
    width: 280px;
    height: 360px;
  }

  .container .box .content{
    font-size: 24px;
  }

  .pfp{
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 500px){
  .container{
    margin-top: 20px;
  }

  .container .box{
    width: 90vw;
    height: 350px;
  }

  .container .box .content{
    font-size: 22px;
  }
}


@media (max-width: 600px){
  header nav .logo-nav{
    flex-direction: column;
    height: auto;
    gap: 10px;
  }
}



footer{
  visibility: hidden;
  background-color: #212121;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


footer h1{
  font-size: 34px;
}

footer span{
  font-size: 34px;
  padding: 20px;
  color: red;
}
footer .foot-container .text{
  color: white;
  font-size: 34px;
}