html {

  /*width: 100%;*/

}

body {
  margin:0;
}
main{

/* innan låg detta i body*/
  position: relative;
  width: 100%;
  /*height: 100%;*/
  height: 100vh;
  background: url('https://upload.wikimedia.org/wikipedia/commons/2/2e/Wood_background.jpg') center center fixed;
  overflow-x: auto;
  margin: 0;
  padding: 0;

}


#klaviatur-container{
  width: 1065px;
  background-color: #522;
  height:120px;
  display: block;
  position:absolute;
  bottom: 40px;
  padding-top: 5px;
  padding-left:5px;
  left:10px;
}

#keyboardKontroll{
  /*position: absolute;
  bottom:180px;*/
  text-align: center;
  margin-bottom: 5px;
  accent-color:black;

}


.miniOktav {
  height: 90px;
  width: 40px;
  background-color: grey;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  position: relative;
}
.oktav{
  height: 90px;
  width: 140px;
  background-color: grey;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  position: relative;
}
.pytteOktav {
  height: 90px;
  width: 20px;
  background-color: grey;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  position: relative;
}
.vitTangent{
  height: 90px;
  width: 20px;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  position: absolute;

}
.vitTangent:hover{
  background-color: lightgrey;
}

.vitTangent:active{
  background-color: grey;
}


.svartTangent{
  height: 45px;
  width: 14px;
  background-color: black;
  border-style: solid;
  border-width: 1px;
  position: absolute;

}
.svartTangent:hover{
  background-color: lightgrey;
}

.svartTangent:active{
  background-color: grey;
}

.tangentNere{
  background-color: grey;
}

.skugga {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}

#notark-container{
  background-color: white;
  height:450px;
  width: 315px;
  margin-left:350px;
  position: relative;
  margin-top: 5px;

}

#poäng-container {
  position: absolute;
  height:450px;
  width: 315px;
  /*border: solid;*/
  right: 5px;
  top: 5px;
}

#poäng{
  text-align: right;
  margin-right: 20px;
}
#ytterbar1{
  height: 20px;
  width: 90%;
  border-style: solid;
  position: absolute;
  bottom: 40px;
  left: 5px;
}

#innerbar1{
  height: 20px;
  width: 100%;
  background-color: #522;
}

#ytterbar2{
  height: 20px;
  width: 90%;
  border-style: solid;
  position: absolute;
  bottom: 5px;
  left: 5px;
}

#innerbar2{
  height: 20px;
  width: 100%;
  background-color: green;
}

#canvas{
  /*height:440px;
  width: 305px;*/

}

#gKlav{
  position: absolute;
  height: 132px;
  left: 20px;
  top: 78px;

}

#fKlav{
  position: absolute;
  height: 78px;
  left: 20px;
  top: 296px;
  transform: rotate(-2deg);

}



#creds{
  /*position: absolute;*/
  /*bottom: 2px;*/
  font-size: 0.75em;
  text-align: right;
}

#creds a{
  color: darkgrey;
  text-decoration: none;
}

#creds a:visited{
  color: black;
}

#creds a:hover{
  color: black;
  text-decoration: underline;
}

#poäng{
    font-size: 5em;
/*  position: absolute;

  left: 800px;
  top: 200px;*/

    /*animation: puls 1s infinite;*/

}

.pulsen{
  animation: puls 1s infinite;
}

@keyframes puls {
    0% {

        color:grey;
    }

    50% {

        color:black;
    }

    100% {
    color: grey;
    }
}

#levelKontroll {

  accent-color:black;
  position: absolute;
  left: 700px;
  top: 280px;
}

#nivåkontroll {

  position: absolute;
  left:5px;
  top: 20px;
  font-size: 1.3em;
  font-family: fantasy;


}



.caveat-1 {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3em;
}

.dynapuff-1 {
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.arrowCursor {
  cursor: pointer;
}

#niv0{
  font-weight: bold;

}

#startaSpel{

    font-size: 2.5em;

}

#startaSpel:hover{
  color: grey;
}


.val:hover{
  color: grey;
}
#ljudknapp{
  position: absolute;

  left: 10px;
  /*top: 10px;*/
}



footer{
  width: 100%;

  display: block;
  position: relative;
  background-color: #522;
}
#author {
  /*position: absolute;*/
  font-family: cursive;

  font-size: 2em;
  /*left: 760px;*/
  /*bottom: 180px;*/
  /*right:10px;*/
  text-align: center;
}

.spalt{
width: 32vw;
display: inline-block;
}
#spalt1 {

}
#spalt2 {

}
#spalt3 {

}

@media screen and (max-height: 620px) {
  #notark-container {
    scale: 0.75;
    top:-60px;

  }
  #poäng-container{
    scale: 0.75;
    top: -50px;
  }
}

@media screen and (max-height: 510px) {
  #notark-container {
    scale: 0.5;
    top:-110px;
    left:-100px;

  }
  #poäng-container{
    scale: 0.5;
    top: -105px;
  }


  #nivåkontroll {
    scale: 0.75;
    top:-40px;
    left: -35px;

  }
}


@media screen and (max-width: 1080px) {
  #klaviatur-container {
    scale: 0.8;
    left:-100px;


  }
}

@media screen and (max-width: 870px) {
  #klaviatur-container {
    scale: 0.7;
    left:-150px;


  }
}

@media screen and (max-width: 770px) {
  #klaviatur-container {
    scale: 0.6;
    left:-210px;


  }
}