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

*
{
	font-family: "Comic Sans MS", "Comic Sans", cursive; /* Fredoka One */
}

html, body
{
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-size: 20px;
	
}

body 
{
  background: #eee;
  background: linear-gradient(to left, #ddd , #eee);
  position: relative;
	overflow: hidden;
}

.page
{
  z-index: 2;
  position: relative;
  width: calc(80vw - 80px);
  padding: 20px 40px;
  margin: 0;
  
}

#canvas-container
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    
}

.spacer
{
  display: block;
  width: 100%;
  height: 40vh;
}

.status
{
  font-size: 3rem;
}

#loading
{
    position: absolute;
    background-color: #3A3F69;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    font-family: 'Fredoka One', cursive;
}

#ui
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;

  user-select: none;

  .positioner
  {
    width: 130vh;
    max-width: 100vw;
    height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 100px 1fr 200px;
    align-items: flex-end;
  }

  .speech-bubble
  {
    display: none; /* flex */
    justify-content: flex-end;
  }
  
  #bubble 
  {
	display: none;
    padding: 1.5rem 2rem;
    width: calc(100% - 4rem);
    max-width: calc(400px - 4rem);
    background-color: white;
    border-radius: 1.7rem;
    margin-bottom: 3rem;
    position: relative;
    cursor: pointer;

    &::after
    {
      content: '';
      width: 0; 
      height: 0; 
      border-top: 1rem solid transparent;
      border-bottom: 1rem solid transparent; 
  
      border-left:1rem solid white; 
      position: absolute;
      left: calc(100% - 0.25rem);
      bottom: 1rem;
    }

    
  }
}

#text-highlight
{
  font-size: 1.5rem;
  display: inline-block;
}

#next
{
  // opacity: 0;
  color: #505050;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-align: right;
  margin-top: 1rem;
  transition: opacity 0.2s ease-in-out;
  display: none;
}

#steve
{
	display:none;
width: 100%;
}

.waiting
{
  #next
  {
    // display: block;
  }
}

.game
{
  cursor: url(/cannon/crosshair.svg) 41 41, auto;
}