img {
    height: 250px;
    width: 200px;
}

p {
    padding: 10px
}

img.keyboard {
    height: 215px;
    width: 517px;
}

img.fullscreen {
    height: 150px;
    width: 526px;
}
.table  {
    height: 228px;
    width: 516px;
}

.example  {
    height: 140px;
    width: 520px;
}
.product_example  {
    height: 300px;
    width: 520px;
}
.reward_example  {
    height: 300px;
    width: 520px;
}

.persons_example  {
    height: 112px;
    width: 538px;
}
.all_product_example  {
    height: 150px;
    width: 725px;
}
.person_and_product  {
    height: 360px;
    width: 120px;
}
:root {

    --product_left: 0px;
    --product_right: 0px;
    --top_person: 0px;

    --top_reward: 0px;
    --left_reward: 0px;
    --click1: 0px;
    --click2: 0px;
    --click3: 0px;
    --click4: 0px;
    --click5: 0px;
}

.fixation {
    /* plus fixation will be in the middle of the screen*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 15.8px;
}
.error {
    /* plus fixation will be in the middle of the screen*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 45.8px;
}
.reward {

    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
    width: 100px;
}

.group {
    height: 135px;
    width: 487px;
}
.jspsych-image-button {
    border: none;
    background-color: transparent;
    padding: 0;
  }
img.click1{
    
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    height: auto;
    position: fixed;
    height: 75px;
    width: 75px;
    left: var(--click1);
}
img.click2{
    
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    height: auto;
    position: fixed;
    height: 75px;
    width: 75px;
    left: var(--click2);
}
img.click3{
    
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    height: auto;
    position: fixed;
    height: 75px;
    width: 75px;
    left: var(--click3);
}
img.click4{
    
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    height: auto;
    position: fixed;
    height: 75px;
    width: 75px;
    left: var(--click4);
}
img.click5{
    
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    height: auto;
    position: fixed;
    height: 75px;
    width: 75px;
    left: var(--click5);
}
img.product_left {
    position: fixed;
    height: 75px;
    width: 75px;
    left: var(--left_product);
    top: var(--top_product);
}


img.product_right {
    position: fixed;
    height: 75px;
    width: 75px;
    right: var(--left_product);
    top: var(--top_product);
}

img.one_person {
    position: fixed;
    height: 175px;
    width: 100px;
    top: var(--top_one_person);
    left: var(--left_one_person);
}

img.one_product {
    position: fixed;
    height: 100px;
    width: 100px;
    top: var(--top_one_person);
    left: var(--left_one_person);
}

img.left_person {
    position: fixed;
    height: 175px;
    width: 100px;
    left: var(--left_person);
    top: var(--top_person);
}

img.left_person_reverse {
    position: fixed;
    height: 175px;
    width: 100px;
    left: var(--left_person);
    top: var(--top_product);
}

img.right_person {
    position: fixed;
    height: 175px;
    width: 100px;
    right: var(--left_person);
    top: var(--top_person);
}

img.right_person_reverse {
    position: fixed;
    height: 175px;
    width: 100px;
    right: var(--left_person);
    top: var(--top_product);
}

img.product {
    position: fixed;
    height: 75px;
    width: 75px;
    left: var(--middle_product);
    top: var(--top_product);
}