@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@400;700&display=swap');

html {
  font-family: 'M PLUS 1 Code', monospace;
  height: 100%;
  width: 100%;
}


.abt-website {

  background-color: #316fb3;
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 25px;
  padding-top: 5px;
}

.updates {
  background-color: #316fb3;
  padding: 20px;
  border-radius: 25px;
  padding-top: 5px;

}

.whats-next {
  margin-top: 25px;
  background-color: #316fb3;
  padding: 20px;
  border-radius: 20px;
  padding-top: 5px;

}


.home_image {
  display: inline-block;
  /* border-width:16px;
  border-color:black;
  border-style:solid; */
  text-align: center;
  padding-top: 3em;
  padding-bottom: 3em;
  margin-top: 0px;
  width: 100%;
  background-color: black
}

.platform {
  background-color: #218838;
  text-align: center;
  align-items: center;
}



.codd {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: center;

}


.index {
  font-family: 'M PLUS 1 Code', monospace;
  background-color: black;
  margin: 0;
  padding: 0;

}

.about {
  font-family: 'M PLUS 1 Code', monospace;
  background-color: black;
}

.projects {
  background-color: black;
}

.content {
  font-family: 'M PLUS 1 Code', monospace;
  background-color: black;
  margin: 0;
  padding: 0;
  align-items: center;
  text-align: center;
}

/* 
@keyframes slide {
  from {
    transform: translateX(-20);
  }

  to {
    transform: translateX(20);
  }
} */


.indexH1 {
  /* animation-name: slide; */
  animation-name: slide;
  color: #316fb3;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  text-align: center;
}

.indexH2 {
  text-align: center;
  color: #316fb3;
}

nav {
  max-width: 110%;
  margin: 0;
  padding: 0;


}

nav ul {
  margin:0px;
  text-align: center;
  background-color: #316fb3;
}

nav ul li {
  display: inline-block;
  
  
}

nav ul li a {
  display: block;
  padding: 10px 20px;
  font-size: 1.2em;
  color: rgb(0, 0, 0);
  text-decoration: none;
  background-color: #316fb3;
  transition-property: transform, background-color, color;
  transition-duration: 0.5s;
  transition-timing-function: ease;

}

nav ul li a:hover {
  transition-property: transform, background-color, color;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  background-color: black;
  color: #316fb3;

}

.nav-links li a:hover,
.dropdown-games:hover .games_button {

  transform: translateY(+10px);

}

.dropdown-games {

  display: none;
  position: absolute;
  min-width: 180px;
  /* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3); */
  z-index: 1;
}

.dropdown:hover .dropdown-games {
  display: block
}

.dropdown-games a {
  background-color: black;
  color: #316fb3
  ;
}

.dropdown-games a:hover {
  background-color: black;
}

.game1Text {
  margin-left: 10%;
  margin-right: 10%;
}

.game1 {
  background-color: lightblue;
  text-align: center;
}

.space {
  background-color: black;
  text-align: center;
  color: white
}

.game_image {
  width: 20em
}

.insane {
  background-color: teal;
  text-align: center;
}

/* #editor-container, */
#fileContent,
#fileUpload {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

#fileUpload {
  padding: 20px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#fileUpload:hover {
  background-color: #f1f1f1;
}

#fileContent {
  margin-top: 20px;
}

pre {
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

#editor-container {
  display: flex;
  flex-direction: column;
  align-items: left;
  width: 200em;
}

#editor {
  width: 50em;
  height: 200px;
  margin-top: 20px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#run-btn {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  background-color: #28a745;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#run-btn:hover {
  background-color: #218838;
}



iframe {
  width: 80%;
  height: 20em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#main-container {
  display: flex;
  width: 80%;
  margin-top: 2em;
  height: 100%;

}

#editor-container,
#canvas-container {

  display: flex;
  flex-direction: column;
  align-items: center;
}

#canvas-container {
  justify-content: center;
  width: 800%;
  height: 800%;

}

#output {
  height: 450px;
  width: 850px
}