.elementor-355 .elementor-element.elementor-element-54e7dbb2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-355 .elementor-element.elementor-element-205facee{text-align:center;}.elementor-355 .elementor-element.elementor-element-205facee .wpkoi-advanced-heading .wpkoi-main-heading > div{color:#FFEC00;font-family:"Lato", Sans-serif;font-size:6vw;font-weight:900;text-transform:uppercase;line-height:1em;}.elementor-355 .elementor-element.elementor-element-205facee > .elementor-widget-container{margin:0% 0% 10% 0%;}.elementor-355 .elementor-element.elementor-element-fc70a60{--display:flex;--background-transition:0.3s;--margin-block-start:-50px;--margin-block-end:50px;--margin-inline-start:0px;--margin-inline-end:0px;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;}.elementor-355 .elementor-element.elementor-element-fc70a60:hover::before{filter:brightness( 114% ) contrast( 100% ) saturate( 139% ) blur( 0px ) hue-rotate( 0deg );}.elementor-355 .elementor-element.elementor-element-4571728 > .elementor-widget-container:hover{--e-transform-translateX:0px;--e-transform-translateY:-20px;}@media(max-width:767px){.elementor-355 .elementor-element.elementor-element-205facee .wpkoi-advanced-heading .wpkoi-main-heading > div{font-size:30px;}.elementor-355 .elementor-element.elementor-element-205facee > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-355 .elementor-element.elementor-element-fc70a60{--margin-block-start:-0px;--margin-block-end:-0px;--margin-inline-start:-6px;--margin-inline-end:0px;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;}.elementor-355 .elementor-element.elementor-element-4571728 > .elementor-widget-container{padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-4571728 */:root {
  --default-padding: 10px;
}

@mixin a11y-visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}

body,
html {
  height: 100%;
  font-family: "Inter", sans-serif;
  line-height: 1.4;
}


.window {

  display: flex;
  flex-direction: column;
  min-height: 300px;
  border: 5px solid #3F708D;
  box-shadow: 15px 15px 0 #3F708D;
  max-width: 400px;
  max-height: 500px;
  background-color: #4C87A9;
  filter: saturate(0.1);
  border-radius: 3px;
  width: 100%;
  
  
  
  &:focus-within {
    filter: saturate(1);
  }
  
}

.window__title-bar {
  background-color: #88B2CA;
  color: white;
  padding: 13px var(--default-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  user-select: none;
  z-index: 1;
  box-shadow: 0px 1px 7px -2px #88B2CA;
  
}

.window__body {
  flex-grow: 1;
  background-image: url('http://joriscalvet.fr/wp-content/uploads/2023/07/100-secondes.png');
  background-position: center;
  background-size: 90%;
  padding: var(--default-padding);
  overflow-y: auto;
  scrollbar-color: #4d21c3 #dfd4fd;
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #dfd4fd;
  }

  &::-webkit-scrollbar-thumb {
    background: #4d21c3;
  }
}

.window__btn {
  cursor: pointer;
  background-color: #3F708D;
  width: 20px;
  height: 20px;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 5px;
  opacity: .8;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ABC8D9;
    
  &:hover {
    opacity: 1;
  }
  
  span {
    @include a11y-visually-hidden;
  }
}

.window__btn + .window__btn {
  margin-left: 6px;
}

.window__title {
  line-height: 1;
  font-weight: 500;
  font-size: 1rem;
}

pre {
  font-family: monospace;
  background-color: #8c5afb;
  color: white;
  padding: 10px;
  white-space: pre;
  word-wrap: break-word;
  overflow: auto;
}

.window__status-bar {
  padding: 3px var(--default-padding);
  font-size: .75rem;
  color: #ABC8D9;
}

::-moz-selection { 
  color: white;
  background: hotpink; 
}
::selection { 
  color: white;
  background: hotpink; 
}

.overlay {
  display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(30px);
  
}/* End custom CSS */