/* TEMPLATIO BY VIKTOR RAMLYCKS */
html, body {
    width: 100vw;
  
    margin: 0;

    background-image: url(redbackis.jpg);
    background-size: cover;
    background-repeat: repeat;
    overflow-x: hidden;
  }
  
  
  /* sticky divven */
  
  #stickytop {
    background-color: #4F4789;
    position: fixed;
    width: 100vw;
    height: 12vh;
    text-align: center;
  
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  
  #text {
    color: #FFC997;
    text-align: center;
  
    font-family: 'Courier New', Courier, monospace;
    font-size: 4vh;
    font-weight: bold;
    text-decoration: none;
  }
  
  #stickybackground {
    background-color: #4F4789;
    position: sticky;
    width: cover;
    height: 12vh;
    text-align: center;
    z-index: 1;
  }
  
  #pengarpengar {
    display: none;
  }
  
  #navpengar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5vh;
    width: 50vw;
    background-color: #867BC1;
    border-radius: 5vh;

    position: relative;
    margin-top: 1.5vh;
    margin-left: 1.75vh;

}

#navpengar {
    color: #FFC997;
    font-size: 2.5vh;
    text-align: center;
    font-weight: bolder;
    font-family: 'Courier New', Courier, monospace§;
}

#navpengar:after {
    content: "kr";
}
  
  #botten {
    background-color: #6D6D6D;
    height: 13.5vh;
    width: cover;
  
    margin-top: 10vh;
    position: relative;
  }
  
#tablematta {
  position: absolute;
  display: flex;

  justify-content: center;
  align-items: center;

  height: 88vh;
  width: cover; 
}
  
#dududoda {
  position: absolute;
  display: flex;

  justify-content: center;
  align-items: center;

  background-image: url(grönmatta.jpeg);
  background-size: cover;

  height: 88vh;
  width: 100vh;
}

h1 {
  font-family: lily script one, 'Courier New', Courier, monospace;
  color: rgb(28, 122, 28);
}


#dealer-cards img {
  height:  175px;
  width: 125px;
  margin: 1px;

  top: 20vh;
}

#your-cards img {
  height:  175px;
  width: 125px;
  margin: 1px;

  top: 20vh;
}

#hit {
  height: 7vh;
  width: 10vh;

  margin: 1vh;

  border-color: black;
  border-width: 0.5vh;
  border-radius: 1vh;
  border-style: solid;

  background-color: #772323;
  color:  #e5b736;
  font-family: 'Courier New', Courier, monospace;
  font-size: 2.25vh;
  font-weight: bold;
}

#stay {
  height: 7vh;
  width: 10vh;

  margin: 1vh;

  border-color: black;
  border-width: 0.5vh;
  border-radius: 1vh;
  border-style: solid;

  background-color: #772323;
  color:  #e5b736;
  font-family: 'Courier New', Courier, monospace;
  font-size: 2.25vh;
  font-weight: bold;
}

#game {
  position: absolute;
  height: 120vh;
  width: 100vw;
  background-image: url(gronmatta.jpeg);
  background-size: 200vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-attachment: fixed;
}

h2 {
  top: 55vh;
}

#startscreen {
  position: absolute;
  height: 120vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.664);
  z-index: 1;

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

#starttext {
  margin-bottom: 10vh;

  color: white;
  font-family: 'Courier New', Courier, monospace;
  font-size: 4vh;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
}

#betflex {

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 10vh;
  margin-bottom: 30vh;
}

.betbutton {
  height: 7vh;
  width: 10vh;

  margin: 1vh;

  border-color: black;
  border-width: 0.5vh;
  border-radius: 1vh;
  border-style: solid;

  background-color: #772323;
  color:  #e5b736;
  font-family: 'Courier New', Courier, monospace;
  font-size: 2.25vh;
  font-weight: bold;
}

#lose {
  position: absolute;
  height: 120vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.664);
  z-index: 1;
  display: none;

  
}

#win {
  position: absolute;
  height: 120vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.664);
  z-index: 1;
  display: none;
}

#tie {
  position: absolute;
  height: 120vh;
  width: 100vw;
  background-color:  rgba(0, 0, 0, 0.664);
  z-index: 1;
  display: none;
}

#playagain {
  height: 10vh;
  width: 14vh;

  margin-top: 3vh;

  border-color: black;
  border-width: 0.5vh;
  border-radius: 1vh;
  border-style: solid;

  background-color: #772323;
  color:  #e5b736;
  font-family: 'Courier New', Courier, monospace;
  font-size: 3vh;
  font-weight: bold;
}

h1 {
  margin-top: 15vh;

  color: white;
  font-family: 'Courier New', Courier, monospace;
  font-size: 4vh;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
}

#losewintie {
  display: flex;
  align-items: center;
  justify-content: center;
}
  /* MEDIA QUERIES */
  
  @media only screen and (min-width: 600px) {
    #game{
      width: 50vw;
      left: 25vw;
      background-size: 100vw;
    }

    #slider {
        background: url(TETXTSTTXTT_PC.jpg);
        animation: textShine 32.5s infinite linear;
    }
  
    #braid {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    #textenspel {
        margin-left: 26.5vw;
    }
  
    #pengarpengar{
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bolder;
      font-family: 'Courier New', Courier, monospace§;
      font-size: 2.5vh;
      height: 5vh;
      width: 12vw;
      color: #FFC997;
      background-color: #867BC1;
      position: absolute;
      right: 10vw;
      border-radius: 2vh;
    }   
    #pengarpengar:after {
        content: "kr";
    }

    #navpengar {
        display: none;
    }

    #game{
      background-attachment: scroll;
    }
  }
  
  /* TEMPLATIO BY VIKTOR RAMLYCKS */