html, body {
  /* overscroll-behavior: none; */
      -webkit-user-select: none; /* Safari */
            user-select: none;
}

.jspsych-display-element {
  color: black;
  background-color: white;
  /* font-size: x-large; */
}

.jspsych-content {
  color: black;
  background-color: white;
  position: fixed;
  width: 80%;
  max-width: 500px;
  left: 50%; 
  transform: translateX(-50%);
}

.jspsych-btn {
    font-size: large;
    padding: 0.4em 0.9em;
    border: 10px solid transparent;
    border-radius: 16px;
    color: white;
    background-color: #2b00c8d0;
    font-family: Malington;
    -webkit-user-select: none; /* Safari */
            user-select: none; 
}
.jspsych-btn:hover {
  background-color: #2b00c8; 
  border-color: #2b00c8;
  color: white;
}


.jspsych-slider::-webkit-slider-thumb {
    border: 10px solid #2b00c8;
    height: 60px;
    width: 60px;
    border-radius: 30px;
    background: white;
    margin-top: -15px;
}   

.jspsych-slider::-webkit-slider-runnable-track {
    appearance: none;
    -webkit-appearance: none;
    width: 80%;
    height: 40px;
    cursor: pointer;
    background: #2b00c820;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border-radius: 5px;
    border: 5px solid #2b00c8;
}     


.noselect {
    -webkit-user-select: none; /* Safari */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


.face-grid-wrapper {
  position: fixed;
  left: 50%; 
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: max-content max-content max-content;
}



#jspsych-progressbar-container {
    color: #000000e9;
    border-bottom: 5px solid white;
    background-color: #000000;
}

#jspsych-progressbar-container span {
    /* font-size: 20px; */
    padding-right: 25px;
}

#jspsych-progressbar-outer {
    background-color: #2b00c880;
}

#jspsych-progressbar-inner {
    background-color: #2d00c8;
}




/* Fonts */
@font-face {
  font-family: Malington; /* set name */
  src: url(font_faces/Malinton-Semibold.ttf); /* url of the font */
}

@font-face {
  font-family: Inter; /* set name */
  src: url(font_faces/Inter_24pt-Regular.ttf); /* url of the font */
}

@font-face {
  font-family: Inter; /* set name */
  src: url(font_faces/Inter_24pt-Bold.ttf); /* url of the font */
  font-weight: bold;
}
@font-face {
  font-family: Inter; /* set name */
  src: url(font_faces/Inter_24pt-Italic.ttf); /* url of the font */
  font-style: italic;
}

p {
  font-family: Inter; /* use font */
  /* font-size: x-large; */
    -webkit-user-select: none; /* Safari */
            user-select: none; 
}

h1 {
  font-family: Malington;
    -webkit-user-select: none; /* Safari */
            user-select: none;
}
h2 {
  font-family: Malington;
    -webkit-user-select: none; /* Safari */
            user-select: none; 
}
h3 {
  font-family: Malington;
    -webkit-user-select: none; /* Safari */
            user-select: none;
}