/* Add your css code here */
/*
Variable Definitions:
  --r-bg: Controls the background color.
  --r-tx: Determines the color of the text.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Changes the link text color.
  --r-lk-h: Alters the hover color of link text.
  --r-br: Specifies the border color.
  --r-bg-fr: Defines the background color of input forms.
  --r-tx-lk: Adjusts the menu link text color.
  --r-tx-lk-h: Modifies the hover color of menu link text.
  --r-bg-lk: Sets the menu link background color.
  --r-bg-lk-h: Changes the hover background color of menu links.
  --r-tx-bt: Determines the button text color.
  --r-tx-bt-h: Alters the button text color on hover.
  --r-bg-bt: Specifies the button background color.
  --r-bg-bt-h: Sets the button background color on hover.
*/

/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:
#page-wrapper {
  --r-bg: #fefffc;
  --r-tx: #4c5866;
  --r-h1: #2a3439;
  --r-lk: #8a3324;
  --r-lk-h: #79443b;
  --r-br: #f4f5f0;
  --r-bg-fr: #f8f4ff;
  --r-tx-lk: #2c3e4c;
  --r-tx-lk-h: #1520a6;
  --r-bg-lk:#F2F7FD;
  --r-bg-lk-h: #f8f8e8;
  --r-tx-bt: #354a21;
  --r-tx-bt-h: #597d35;
  --r-bg-bt: #edf1fe;
  --r-bg-bt-h: #efece1;
  }
*/

/* ria css */
/* solo animatie enz negeren 
@keyframes animateimg {
  0% {
    transform: scale(1);
}
  50% {
    transform: scale(1.1);
}
  100% {
    transform: scale(1);
}
}

a.img--is-clickable {
  overflow: hidden;
  height: 100%;
  min-width: 100%;
}

a.img--is-clickable > img.solo-image,
a.img--is-clickable > picture > img.solo-image {
  float: inline-start;
}

.image-auto a.img--is-clickable > img.solo-image,
.image-auto a.img--is-clickable > picture > img.solo-image {
  width: auto !important;
}

a.img--is-clickable:hover > img.solo-image,
a.img--is-clickable:hover > picture > img.solo-image {

}
eind image solo animatie enz.*/

h1 { /* smaller tekst */
  font-size: 18px;
  font-style: italic;
}
h2 {  /* disable title */
pointer-events: none;
border: 1px solid black;
margin-top: 50px;
margin-bottom: none;
margin-right: 20px;
margin-left: 20px;
background-color: lightblue;
font-size: 18px;
}
.puzzeltitle {
  font-size: larger;
  padding-top: 3px;
  padding-right: 13px;
  padding-bottom: 3px;
  padding-left: 13px;
  background-color: rgb(41, 9, 248);
  color: rgb(250, 246, 246);
}

.Expuzzeltitle {
  font-size: larger;

  --mark-color: rgb(39, 25, 243);
    --mark-skew: 0.25em;
    --mark-height: 1.5em;
    --mark-overlap: 0.3em;

    margin-inline: calc(var(--mark-overlap) * -1);
    padding-inline: var(--mark-overlap);

    background-color: transparent;
    background-image:
        linear-gradient(
            to bottom right,
            transparent 50%,
            var(--mark-color) 50%
        ),
        linear-gradient(
            var(--mark-color),
            var(--mark-color)
        ),
        linear-gradient(
            to top left,
            transparent 50%,
            var(--mark-color) 50%
        )
    ;
    background-size:
        var(--mark-skew) var(--mark-height),
        calc(100% - var(--mark-skew) * 2 + 1px) var(--mark-height),
        var(--mark-skew) var(--mark-height)
    ;
    background-position:
        left center,
        center,
        right center
    ;
    background-repeat: no-repeat;
    color: aliceblue;
    padding-left: 13px;
    padding-right: 13px;
}
.jumbo:before {
  content: url("jumbo.png");
  margin-right: 3px;
  margin-left: 1px;
}

.fel {
  margin: 2px;
  background-color: rgb(146, 241, 250);
  color: black;
}
.bginhoud {
  margin: 2px;
  background-color: rgba(240, 255, 226, 0.96);
}
.teller {
  border: 1px solid blue;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  color: lightblue;
  background-color: black;
}