.trollfaceDiv
{
    width: 400px;
    height: 420px;
    background-image: url("../зображення/папір_фон.jpg");
    background-size: cover;
    margin: auto;
    display: none;
    margin-top: -10%;
    padding: 20px;
}

.trollfaceButton
{
    border: none;
    width: 200px;
    height: 150px;

    margin-left: 100px;
    margin-top: 50px;

    cursor: pointer;
    position: relative;
}

.trollfaceTaskDiv
{
    font-family: comic;
    color:black;
    text-align: center;
    width: 100%;
    font-size: x-large;
}

.trollfaceTable
{
    width: 100%;
    text-align: center;
}

.trollfaceGreenButton
{
    width: 150px;
    height: 50px;
    background-color: #33cd33;
    border: 3px solid green;
}

.trollfaceRedButton
{
    width: 150px;
    height: 50px;
    background-color: #cc0033;
    border: 3px solid darkred;
}





.deponiaDiv
{
    width: 100%;
    height: auto;
    margin: auto;
    display: none;
    padding: 1%;
    margin-top: -10%;
}

.deponiaCanvasDiv
{
    width: 100%;
    height: auto;
    margin: -3px;
}

.deponiaButton
{
    width: 40px;
    height: 40px;
    background-image: url("../зображення/кнопка_норм_звич.png");
    background-repeat: no-repeat;
    background-size: contain;
    
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
}

.deponiaButton:hover
{
    background-image: url("../зображення/кнопка_норм_навед.png");
}

.deponiaButton:active
{
    background-image: url("../зображення/кнопка_норм_натис.png");
}

.LeftUp, .UpLeft
{
    background-image: url("../зображення/кнопка_злам_звич.png");
}

.LeftUp:hover, .UpLeft:hover
{
    background-image: url("../зображення/кнопка_злам_навед.png");
}

.LeftUp:active, .UpLeft:active
{
    background-image: url("../зображення/кнопка_злам_натис.png");
}

.deponiaButtonTable
{
    background-image: url("../зображення/кнопки_фон.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 234px;
    margin: auto;
    padding: 0;
}

.deponiaButtonTable tr td
{
    width: 40px;
    height: 40px;
    position: relative;
}







.owDiv
{
    background-size: cover;
    width: 80%;
    height: 80%;
    position: relative;
    padding: 0;
    padding-bottom: -5px;
    display: flex;
    margin: auto;
    margin-top: 24px;
}

#owCanvas
{
    padding: 0;
    width: 100%;
    height: 100%;
}

.owButton
{
    position: absolute;
    width: 3.33%;
    height: 8%;
}

#b11 { left:  8.33%; top: 64.00%; }
#b12 { left:  3.33%; top: 36.00%; }
#b13 { left:  8.33%; top:  8.00%; }
#b14 { left: 21.66%; top:  8.00%; }
#b15 { left: 26.66%; top: 36.00%; }
#b16 { left: 21.66%; top: 64.00%; }

#b21 { left: 41.66%; top: 64.00%; }
#b22 { left: 36.66%; top: 36.00%; }
#b23 { left: 41.66%; top:  8.00%; }
#b24 { left: 55.00%; top:  8.00%; }
#b25 { left: 60.00%; top: 36.00%; }
#b26 { left: 55.00%; top: 64.00%; }

#b31 { left: 75.00%; top: 64.00%; }
#b32 { left: 70.00%; top: 36.00%; }
#b33 { left: 75.00%; top:  8.00%; }
#b34 { left: 88.33%; top:  8.00%; }
#b35 { left: 93.33%; top: 36.00%; }
#b36 { left: 88.33%; top: 64.00%; }

*
{
  /* border: 1px solid red; */
}