/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  font-family: "Courier New";
  background-image: url("stars.gif");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: white;
}

iframe{
  border: none;  
  overflow:hidden;
}

.heading-container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: "Honk", system-ui;
  font-weight: 400;
  font-size: x-large;
}
.title{
  display: flex;
  flex-direction: row;
}
.nav{
  display: flex;
  flex-direction: row;
  font-family: "Honk", system-ui;
  font-weight: 400;
  font-size: x-large;
}

.nav a {
  margin: 0px 10px;
  cursor: pointer;
  text-decoration: none;
  color: white;
}

.home-container{
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content:center;
  align-content:center;
  cursor: url(cursor.png), auto ;
}

.home-container-left,
.home-container-center,
.home-container-right{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 1200px;
  justify-content:center;
  align-self:center;
  gap: 20px;
}

.home-div-left{
  display: flex;
  background-color: black;
  background-image: url("https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExemtoM2k3NHk1OGFudzI2MTY0aW9zbzY3MGg3YWlyeDQ0ajkzamFjcyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/xULW8l2gXuRPmsQe8U/giphy.gif");
  width: 100%;
  height: 400px;
  border: 1px red solid;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
}

.home-div-right-top,
.home-div-right-bottom
{
  display: flex;
  background-color: black;
  background-image: url("https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExemtoM2k3NHk1OGFudzI2MTY0aW9zbzY3MGg3YWlyeDQ0ajkzamFjcyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/xULW8l2gXuRPmsQe8U/giphy.gif");
  width: 100%;
  border: 1px red solid;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
}

.home-div-right-top{
  height: 400px;  
}

.home-div-right-bottom{
  height: 800px;  
}

.home-div-center{
  display: flex;
  flex-direction: column;
  background-color: black;
  background-image: url("https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExemtoM2k3NHk1OGFudzI2MTY0aW9zbzY3MGg3YWlyeDQ0ajkzamFjcyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/xULW8l2gXuRPmsQe8U/giphy.gif");
  width: 100%;
  height:1200px;
  border: 1px red solid;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
}

.inner-home-div{
  border: 1px red solid;
  border-radius: 15px;
  background-color:black;
  width: 95%;
  height:90%;
  overflow:scroll;
  padding: 3px;
}

.rocker{
 position: absolute;  
 top: 50px;
 right:50px;
}

.rocker-left{
 position: absolute;  
 top: 50px;
 left:50px;
}

.center-flex{
  display: flex;
  justify-content: center;
  align-items: center;  
}

.hidden{
  overflow: hidden;  
}
.about-section{
  width: 80%;
  background-color: black;
  padding: 30px;
  margin: auto;
  border-radius: 15px;
  font-family: "Pixelify Sans", sans-serif;
}

.gif{
  margin: auto auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* Track */
::-webkit-scrollbar-track {
  background: black; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: red; 
}