html, body 
{
  font-family: 'Noto Sans KR', sans-serif; /* Body Font */
  height: 100%; /* Body Height */
  width: 100%; /* Body Width */
  margin: 0; /* Body Margin */
  background: -webkit-linear-gradient(90deg, rgb(72, 206, 254) 0%, rgb(235, 27, 254)100%); /* Body Background Color */
}

#main /* Page Main Style */
{
  display: flex; /* Display */
  height: 100%; /* Height */
  width: 100%; /* Width */
  cursor: not-allowed; /* Set Cursor To not-allowed */
  justify-content: center; /* Set All Content In Center */
  align-items: center; /* Set All Items In Center */
}

#main > div /* Main div Style */
{
  filter: blur(30px); /* Set Blur Effect */
  transition: .2s; /* Set Transition Effect */
  text-align: center; /* Set Text In Center */
  transform: scale(.6); /* Set Transform Effect */
  position: fixed; /* Position */
}

#main > div.on /* Style When div Is On */
{
  transform: scale(1); /* Set Transform Effect*/
  filter: blur(0); /* Set Blur Effect */
  z-index: 1; /* Set Z Axis*/ 
}

#main > #game /* Game div Style */
{
  filter: blur(0); /* Set Blur Effect */
  transform: scale(1); /* Set Transform Effect */
}

#main > #game > #ponggameCanvas /* Canvas div Style */
{
  margin: auto; /* Set Margin */
  box-shadow: 0 0 30px 30px black; /* Set Glow-Shadow */
  border: 3px dashed rgb(72, 206, 254); /* Border Around Canvas */
  background: black; /* Set Background Color */
  width: 50%; /* Set Width */
}

#main > div.on ~ #game /* game div Style When div Is On */
{
  opacity: .78; /* Set Opacity Effect */
  filter: blur(15px); /* Set Blur Effect */
  transform: scale(.90); /* Set Transform Effect */
}

#ExitButton
{
  position: absolute; /* Exit Button Position */
  top: 120%; /* Exit Button Distance From Top */
  left: 55%; /* Exit Button Distance From Left */
  transform: scale(1.5); /* Set Transform Effect */
  background-color: rgb(0,0,0); /* Exit Button Background Color */
  color:rgb(72, 206, 254); /* Exit Button Background Color */
}

#ExitButton:hover /* Exit Button Style When Hover With Mouse */
{
  box-shadow: 0 0 5px 5px rgb(0,0,0); /* Add Glow-Shadow When Hover */ 
  opacity: 1; /* Change Opacity From 0.6 To 1 When Hover */
}

#PauseButton
{
  position: absolute; /* Pause Button Position */
  top: 120%; /* Pause Button Distance From Top */
  left: 35%; /* Pause Button Distance From Left */
  transform: scale(1.5); /* Set Transform Effect */
  background-color: rgb(0,0,0); /* Pause Button Background Color */
  color:rgb(72, 206, 254); /* Pause Button Background Color */
}

#PauseButton:hover /* Pause Button Style When Hover With Mouse */
{
  box-shadow: 0 0 5px 5px rgb(0,0,0); /* Add Glow-Shadow When Hover */ 
  opacity: 1; /* Change Opacity From 0.6 To 1 When Hover */
}

button /* Page Buttons Style */
{
  background-color: rgb(72, 206, 254); /* Buttons Background Color */
  border: 0; /* Buttons Set Border To 0 */
  margin: 15px; /* Buttons Margin */
  letter-spacing: 1px; /* Buttons Font Size */
  font-size: 15px; /* Buttons Font Size */
  transition: .2s; /* Buttons Transition Effect */
  min-width: 165px; /* Buttons Minimum Width  */
  cursor: pointer; /* Buttons Cursor When Hover With Mouse */
  border-radius: 100px; /* Buttons Border Radius */
  text-transform: uppercase; /* Buttons Set Text To Uppercase */
  padding: 17px 25px; /* Buttons Padding */
  font-weight: bold; /* Buttons Font Weight */
  outline: none; /* Buttons Set Outline To None */
  opacity: 0.60; /* Buttons Opacity Effect */
}

button:hover /* Page Buttons Style When Hover With Mouse */
{
  box-shadow: 0 0 5px 5px rgb(72, 206, 254); /* Add Glow-Shadow When Hover */ 
  opacity: 1; /* Change Opacity From 0.6 To 1 When Hover */
}

h1 /* Page H1 Style */
{
  letter-spacing: 3px; /* H1 Space Between Letters */
  color: rgb(72, 206, 254); /* H1 Color */
  text-transform: uppercase; /* H1 Set Text To Uppercase */
  font-size: 50px; /* H1 Font Size */
}