/* v.1.0.0 */


body {
zoom: 290%;
}




/******************/


img { display: block; margin: 0 auto; width: 50px; height: 50px; }
img: hover {
transform: scale(81);
}

/************/

html {
overflow: scroll;
scrollbar-width: 3px;
}

::-webkit-scrollbar {
width: 3px;
}


.block, .block2, .block3, .block4 {
width: 100%;
display: block;
margin: 0 auto;
height: 50px;
background: #95C29A;
border: 1px solid #3E6042;
}

.block { max-width: 100px; }
.block2 { max-width: 300px; }
.block3 { max-width: 500px; }
.block4 { max-width: 1000px; }

#result {

border: 3px solid #5E574B;
padding: 5px;

display: inline-block;
width: 100%;
height: auto;

text-wrap: balance;
text-wrap: wrap;
font-size: 24px;
font-weight: 900;
background: #EFE5D4;
color: #4E4E4E;
text-align: left;

/*https://www.w3.org/TR/css-writing-modes-4/#text-orientation#*/
writing-mode: vertical-rl;
text-orientation: upright;
unicode-bidi: bidi-override;
direction: ltr;
font-size: 500%;
}

/*
body{
    background: url(https://unsplash.com/photos/5dWJlG9xWBI/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8Nnx8c3VuJTIwc3ByaW5nJTIwdHJlZXxlbnwwfHx8fDE2ODQ0MDAzMTR8MA&force=true&w=640);
background-size: cover;

}*/


.button33{
background: blue;
border: 1px solid silver;
display: inline-block;
padding: 30px;
}

















body { text-align: center; }




.block332Wrapper{
position: relative;
display: inline-block;

padding: 5px; /*border*/
border-radius: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
overflow: hidden;
}

.block332Border{
position: absolute;
background: linear-gradient(to right, black, white, black); 
animation: block332Animation 15s linear infinite;
width: 250px;
height: 250px;
z-index: -2;
top: -50px;
left: -50px;

}

.block332Button, .block332Button:hover{
display: block;

padding: 15px;
background: black;
color: #fff;
border-radius: 15px;
z-index: -1;

text-decoration: none;
}


@keyframes block332Animation {

0%{ transform: rotate(-360deg); }
100%{ transform: rotate(360deg); }

}

/* only webkit */
:playing {
  border-bottom: 5px solid green;
}


/*
https://web.dev/color-spaces-and-functions/
*/
nav {
  background-color: color-mix(in srgb, gray 30%, white);
}

/* joke */
style, script {
display: block;
position: fixed;
width: 100%;
font-size: 12px;
/*animation: ani 300s linear infinite;*/
z-index: -1;
overflow: hidden;
opacity: 0.5;
color: var(--red);
}

/*
@keyframes ani {
from { transform: rotate(0deg); font-size: 7px; }
to { transform: rotate(-360deg); font-size: 18px; }
}
*/

/******************/
/* centering */


.centeringItem {
display: flex;
flex-direction: column;
justify-content: center;
align-items: safe center;
align-self: safe center;
box-sizing: border-box;
margin: 0 auto;
min-height: 100vh;
}


/* fixme wrong position */
.cursorHl, a:hover {
cursor: url("cursor-hl.png"), pointer;

}