@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Princess+Sofia&display=swap");

* {
  font-family: "Poppins", sans-serif;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #222831 url("images/Neon.png") no-repeat;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#shortview {
  color: white;
  font-weight: bold;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  background-color: black;
}

#viewicon {
  display: inline-block;
}

#shortcontent {
  display: flex;
  flex-direction: row;
  justify-content: left;
  margin-left: 30px;
  align-items: center;
  padding: 6px 0px;
  gap: 8px;
}

.views {
  font-size: 19px;
  font-weight: 900;
  color: #6d74af;
}

.shorttitle {
  font-size: 20px;
  font-weight: 900px;
  text-align: center;
  padding: 10px 39px;
  color: #b2becc;
}

#visitchannel,
#feedbackbtn,
#tips , #ratingsub{
  text-decoration: none;
  background-color: #222831;
  border: 2px solid #00adb5;
  border-radius: 50px;
  padding: 14px 40px;
  color: #00adb5;
  font-size: 2em;
}

#visitchannel:hover,
#feedbackbtn:hover {
  transition: 0.1s;
  background-color: #00adb5;
  color: white;
  box-shadow: 0 0 40px #00acb5d8;
}

#buttons {
  position: relative;
  top: -100px;
  font-weight: 500;
}

.visitchanneltext {
  font-size: 30px;
  margin: 50px 0px;
  color: white;
}

#logo {
  /* display: inline; */
  width: 8%;
  height: auto;
  position: relative;
  top: -30px;
  margin-left: 3vw;
}

#viewscount {
  text-shadow: 0px 1px 1px red;
  position: absolute;
  top: 100px;
  right: 4px;
  font-size: 8vh;
  font-weight: 900;
}

#downcontent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: center;
  align-self: center;
  margin: 50px 0px;
  gap: 40px;
}

#popshortstext {
  color: #bfbfce;
  font-size: 46px;
  font-weight: 900;
}

#popshortstext img {
  position: relative;
  right: 10px;
}

strong {
  color: #00adb5;
  text-shadow: 0 0 10px #00acb58e;
}

#abouttext {
  font-weight: regular;
  background-color: #393e465e;
  font-family: "Poppins", sans-serif;
  font-size: x-large;
  width: 90vw;
  border-radius: 30px;
  color: white;
  text-align: justify;
  height: auto;
  padding: 5rem;
  margin: auto;
  margin-top: 20px;
}

#subscount {
  text-shadow: 0px 1px 1px red;
  position: absolute;
  top: 100px;
  left: 4px;
  font-size: 8vh;
  font-weight: 900;
}

#chname {
  position: relative;
  top: -72px;
  left: 0px;
  font-size: 50px;
  font-weight: 900;
  text-shadow: 1px 0px 20px lightyellow;
  filter: brightness(200);
  text-decoration: blink;
}

#handle {
  position: relative;
  top: -110px;
  left: 0px;
  font-size: 17px;
  font-weight: lighter;
}

header {
  position: relative;
  background-image: url(images/board.png);
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position: center; */

  background-color: #393e46;
  /* Adding transparency */
  color: white;
  padding: 40px 0;
  top: 0px;
  width: 100%;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  text-align: center;
}

nav {
  text-align: center;
  margin-bottom: 20px;
}

#button-a {
  text-decoration: none;
  background-color: none;
  border: 2px solid #00adb5;
  border-radius: 50px;
  padding: 14px 40px;
  color: #00adb5;
  font-size: 0.8em;
}

#button-a:hover {
  transition: 0.1s;
  background-color: #00adb5;
  color: white;
  box-shadow: 0 0 40px #00acb5d8;
}

nav a {
  color: #333;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #fff;
  margin: 0 10px;
  transition: background-color 0.3s;
}

nav a:hover {
  background-color: #666;
  color: #fff;
}

.container {
  max-width: 800px;
  margin: auto;
  padding: 0 20px;
  flex: 1;
}

#maintext {
  font-family: "Princess Sofia", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 7em;
  text-shadow: 0 0 20px #ffffff;
}

#subtext {
  font-size: 1.4em;
}

.headings {
  width: 100vw;
  height: 70%;
  display: flex;
  justify-content: space-around;
}

.links {
  height: 30%;
  width: 100vw;
  /* background-color: blue; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.7em;
}

.links-wrapper {
  width: 50vw;
  height: fit-content;
  /* background-color: red; */
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

#btn {
  color: white;
  padding: 12px 40px;
  border-radius: 13px;
  background-color: #d9d9d932;
  border: none;
  cursor: pointer;
}

#btn:hover {
  transition: 0.1s;
  background-color: #d9d9d90d;
}

#stats {
  border-radius: 20px;
  width: 18rem;
  height: 12rem;
  background-color: #d9d9d934;
  position: relative;
  left: 75px;
}
#rapidlogo {
  margin-left: -29px;
  width: 45px;
  margin-bottom: 3px;
}

.subs,
.likes,
.chess {
  width: 100%;
  height: 32%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
}
.subs i {
  margin-left: -29px;
  color: rgb(245, 61, 61);
}

.subs p,
.likes p,
.chess p {
  font-size: 1.4em;
  padding-top: 0.6em;
  margin-left: 10px;
}

.shorts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

#shortimg {
  padding: 10px;
  border-radius: 20px;
}

.short {
  padding: 5px;
  border-radius: 20px;
  margin-right: 0px;
  transition: transform 0.3s;
  position: relative;
  background-image: url(images/shortback.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  overflow-y: hidden;
  overflow-x: hidden;
}

.short:hover {
  transform: scale(1.05);
}

/* #sbarbutton{
    position: ;
} */
.short img {
  max-width: 100%;
  height: auto;
  display: block;
  /* margin-bottom: 10px; */
}

.short p {
  margin: 0;
}

footer {
  /* Adding transparency */
  color: #fff;
  text-align: center;
  padding: 20px 0;
  width: 100%;
}

body,
h1,
h2,
nav a,
p,
footer {
  font-family: "Poppins", sans-serif;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  height: 100vh;
  overflow-x: hidden;
}
.content {
  flex-grow: 1;
  padding: 16px;
}
#rem {
  text-decoration: none;
  color: white;
}
#tips {
  color: rgb(0, 17, 255);
  filter: brightness(100);
  font-weight: 900;
  font-size: 80px;
  background-color: transparent;
  cursor: pointer;
  width: 100%;
}
.tipdesc {
  color: white;
  width: 79vw;
}
#tipsdes {
  color: white;
  font-size: 30px;
  font-style: italic;
  font-weight: 500;
  text-shadow: 2px 2px 20px blue;
}
#ratingcol{
  width: 75vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #202020;
  border-radius: 50px;
  padding: 50px;
}
#nameent , #ratingent{
  padding: 10px;
  font-size: 30px;
  font-weight: 200;
  text-shadow: none;
  color: white;
  border-radius: 19px;
  background-color: transparent;
  border: 2px solid white;
  margin: 10px;
}
.thankstext{
  font-size: 30px;
  color: white;
  text-shadow: none;

}
#ratingsub{
  border-radius: 50px;
  background-color: transparent;
  width: min-content;
  padding: 4px 20px;
  font-size: 20px;
  margin: 10px;
  color: red;
  font-weight: 900;
}
#ratingsub:hover{
  transition: 0.1s;
  background-color: rgb(248, 248, 68);
  color: black;
  box-shadow: 0 0 40px #f7f30fd8;
}
.rating{
  color: white;
  font-size: 50px;
  font-weight: 900;
}
.tip:hover , .tip:hover #tips {
  transition: 0.1s;
  background-color: #00adb5;
  color: white;
  box-shadow: 0 0 40px #00acb5d8;
}
.tip:hover img{
    transition: 0.1s;
    filter: brightness(800%);
    color: yellow;
  
}
.tip {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  padding: 10px;
  border-radius: 50px;
  /* border: 2px solid #00adb5; */
}
.tip img {
  width: 120px;
}
/*  footer css */

.footer-dark {
  color: #f0f9ff;
  background-color: #383843;
}

.footer-dark h3 {
  margin-top: 0;
  /* margin-bottom: 12px; */
  font-weight: bold;
  font-size: 16px;
}

.footer-dark ul {
  padding: 0;
  list-style: none;
  line-height: 1.6;
  font-size: 14px;
  margin-bottom: 0;
}

.footer-dark ul a {
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
}

.footer-dark ul a:hover {
  opacity: 0.8;
}

.footer-dark .item.text {
  margin-bottom: 36px;
}

.footer-dark .item.social > a {
  font-size: 20px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
  margin: 0 8px;
  color: #fff;
  opacity: 0.75;
}

.footer-dark .item.social > a:hover {
  opacity: 0.9;
}

.footer-dark .copyright {
  text-align: center;
  padding-top: 24px;
  opacity: 0.3;
  font-size: 13px;
  margin-bottom: 0;
}

#main {
  height: 500vh;
}

html {
  height: 500vh;
}

@media (max-width: 800px) {
  #tips {
    font-size: 30px;
  }
  .footer-dark .item.social {
    text-align: center;
    margin-top: 20px;
  }

  #popshortstext {
    font-size: 35px;
  }

  #popshortstext img {
    width: 70px;
  }

  .footer-dark .item.text {
    margin-bottom: 0;
  }

  .footer-dark .item.text p {
    opacity: 0.6;
    margin-bottom: 0;
  }

  .footer-dark .item.social {
    text-align: center;
  }

  .footer-dark .item:not(.social) {
    text-align: center;
    padding-bottom: 20px;
  }

  .headings {
    flex-direction: column;
    align-items: center;
  }

  .links-wrapper {
    width: 90vw;
    gap: 0px;
  }
  #stats {
    width: 40%;
    height: 82%;
    position: relative;
    left: 10px;
    top: -8px;
  }
  #rapidlogo {
    width: 33px;
  }

  .subs i,
  .likes i {
    scale: 0.7;
  }

  .subs p,
  .likes p {
    font-size: 1.2em;
    margin-left: 2px;
    padding-top: 0.8em;
  }

  #maintext {
    margin-top: -20px;
    font-size: 3em;
  }

  #subtext {
    font-size: 0.5em;
  }

  #btn {
    color: white;
    padding: 8px 10px;
    border-radius: 10px;
    background-color: #d9d9d932;
    border: none;
    cursor: pointer;
    font-size: 13px;
  }

  #logo {
    width: 34%;
    margin-left: 76px;
  }

  .short img {
    width: 100vw;
  }

  #buttons {
    display: none;
  }

  #subscount,
  #viewscount {
    font-size: 1vh;
    margin-left: 1px;
  }

  #chname {
    margin-top: 40px;
    font-size: 55px;
  }

  .container {
    max-width: 100%;
    padding: 0 10px;
  }

  .shorts {
    margin-top: 20px;
  }

  .short {
    width: 100%;
    height: 320px;
  }

  h1 {
    font-size: 30px;
    margin-top: 20px;
  }

  nav a {
    font-size: 14px;
  }

  p {
    font-size: 16px;
  }

  footer {
    padding: 10px 0;
  }

  /* SideBar */
  .msidebar {
    width: 0;
  }

  header {
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: repeat;
    height: 300px;
  }

  #abouttext {
    padding: 15px;
    line-height: 29px;
  }
  #viewicon {
    height: 30px;
    width: 30px;
  }
}