@media screen and (max-width: 360px) { 
    html,body {
        min-width:360px;
    }
}
/* https://stackoverflow.com/a/42588352/8800423 */
/* https://stackoverflow.com/a/16174110/8800423 */


/*
Inspiration:
https://codepen.io/fabiowallner/pen/YOyJbJ
https://codepen.io/Abrman/pen/WXYpja 
*/

#device-viewport-min-warning {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  z-index:99999999;
  background: rgb(0 0 0 / 70%);
  height: 100%;
  width: 100%;
  position:fixed;
  top:0;
  left:0;
  --height-icon: 70px;
  /*pointer-events:none;*/
	padding: 10px;
}

.device-viewport-min-warning-message:first-of-type {
  font-size:1.5em;
  line-height:0.95;

}

.device-viewport-min-warning-icon {
  display: inline-block;
  width: calc(var(--height-icon) / 2);
  height: var(--height-icon);
  border: 3px solid #fff;
  border-radius: 5px;
  position: relative;
  margin:calc(var(--height-icon) / 3) 0;
}

.device-viewport-min-warning-icon:after {
  content:'';
  width: 100%;
  border-bottom: 3px solid #fff;
  position: absolute;
  top: 4px;
  left: 0;
}

.device-viewport-min-warning-icon:before {
  content:'';
  width: 100%;
  border-bottom: 3px solid #fff;
  position: absolute;
  bottom: 6px;
  left: 0;
}

.device-viewport-min-warning-icon {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: device-viewport-min-warning-anim-rotate;
  animation-duration: 2s;
}

@keyframes device-viewport-min-warning-anim-rotate {
  0%, 10% { transform: rotate(0deg) }
  40%, 60% { transform: rotate(90deg) }
  95%, 100% { transform: rotate(0deg) }
}

.device-viewport-min-warning-message {
  color: white;
  font-size: 1em;
  line-height:1.4;
  font-family:'Arial',sans-serif;
}

.device-viewport-min-warning-message:last-of-type {
	font-size: 0.9em;
    line-height: 0.95;
    margin-top: 1.4em;
    opacity: 0.7;

}

@media screen and (max-width: 360px) and (orientation: portrait) { 
	#device-viewport-min-warning {
		display:flex !important;
	}
	body > *:not(div#code_block-min-viewport) {
		opacity: 0.4 !important;
	}
	body,html {
		background:black !important;
		overflow-y:hidden !important; /* https://alvarotrigo.com/blog/prevent-scroll-on-scrollable-element-js/ */
	}
	#code_block-min-viewport {
		display: block !important;
	}
}
	
@media (hover: hover) and (pointer: fine) {
	.device-viewport-min-warning-message:first-of-type {
		display:none;
	}
}