body::-webkit-scrollbar {
    display: none;
}

html, body {
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    position: fixed;
    height  : 100%;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(225deg, #0200ff, orange) #cb660f;
}
body {
    margin:0;
    /*background-attachment: fixed;*/
    height  : 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    user-select: none;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

canvas, button, textarea, iframe{
    /*pointer-events: all;*/
}

canvas{
    /*border:1px solid black;*/
    image-rendering: pixelated;
}
.content{
    z-index: 10;
    /*border: 2px solid blue;*/
    box-sizing: border-box;
}
#main{
    position: relative;
    z-index:0;
}
#board{
    width: 100vmin;
    background: black;
    /*position: absolute;*/
}
#c_move div{
    padding: 2vmin;
}
.wider #paintr{
    width: 85vmin;
    position:
    absolute;left: 0;
}
#paintr{
    width: 100vmin;
    border: 1vmin solid white;
    box-sizing: border-box;
    border-radius: 3vmin;
}

#tabs button{
    background: transparent;
    margin: 0.25vmin;
    border: 0;
    font-size: 4vmin;
    text-transform: capitalize;
    color: black;
    padding: 5vmin 2vmin;
}

#tabs button.selected{
    color:white;
}

#tabs button:active{
    color: orange !important;
}

/*.wider .submit {
    position: absolute;
    display: inline-block;
    top: 0;
    margin: 0;
    height: 13.5vmin;
    left: 65vmin;
}*/

button.submit.sent, #c_actions.sent button{
    color: #332a60 !important;
    background: linear-gradient(225deg, #0200ff, #8687be) !important;
    box-shadow: 0 4px !important;
    border-color: #4e4e4e !important;
}
.wider #ibut{
    position: absolute;
    right: 0;
}
#txtsubmit, #imgsubmit {
    font-size: 4vmin;
    padding: 1vmin;
    margin: 0;
    height: 10vmin;/*13.5vmin;*/
}

#c_image, #c_text{
    text-align: right;
}
.wider #c_image, .wider #c_text{
    text-align: initial;
}
.wider #txtsubmit{
    left: 80vmin;
}

#c_actions button, .submit{
    width: 20vmin;
    height: 20vmin;
    display: inline-block;
    box-sizing: border-box;
    border: 1vmin solid black;
    border-radius: 5vmin;
    margin: 2vmin;
    font-size: 3vmin;
    font-weight: bold;
    vertical-align: bottom;
    box-shadow: 0 1.5vmin #666;
    background: white;
    /* text-align: right; */
}

#c_actions button:active, .submit:active {
    background-color: orange;
    box-shadow: 0 5px #666;
    transform: translateY(0.5vmin);
}
button.submit:active{
    box-shadow: 0 0px;
}

textarea{
    width: 100vmin;
    height: 50vmin;
    padding: 2vmin;
    font-size: 6vmin;
    resize:none;
    background:black;
    color:white;
    border: 0;
    border: 1vmin solid white;
    border-radius: 3vmin;
    text-align: center;
    max-height:50vmin;
}

.clear{
    border:1vmin solid white;
    background:rgba(255,255,255,0.5);
    border-radius: 5vmin;
    margin: 2vmin;
    font-size: 3vmin;
    font-weight: bold;
    vertical-align: bottom;
    box-shadow: 0 1.5vmin #666;
    height: 10vmin;
    width: 10vmin;
}
#imgfill{
    background:black;
    border-color:white;
}
#imginvert{
    background:linear-gradient(90deg, white 0 50%,black 50%);
    border-color:linear-gradient(90deg, black 0 50%,white 50%);
    margin-right:10vmin;
}
/*.wider #imgclear{
    position: absolute;
    bottom: 14vmin;
    right: 0;
}
.wider #imgfill{position: absolute;bottom: 0;right: 0;}*/

button:focus-visible{
    outline:0;
}
#wrap{
    position:relative;
}
iframe{
    border:0;
}
.closeX{
    display:none;
}
#c_log{
    width: 100%;
    /*height: 100%;*/
    background: white;
    color: black;
    /* font-size: 4vw; */
    padding: 4vw;
}

/*twitch modifications*/

.twitch.higher #tabs{
    position: absolute;
    top: 56.25vw;
}
.twitch.higher #wrap {
    top: 67vw;
    height: calc(100% - 67vw);
    overflow-y:auto;
}

.twitch.higher #txtsubmit, .twitch.higher #imgsubmit {
    font-size: 3vmin;
    margin: 2vmin;
    height: 10vmin;
}
.wider .clear{
    margin: 0 2vmin;
}
/*.twitch.higher .wideonly{
    display:none;
}*/

.twitch.wider #tabs{
    position: absolute;
    z-index:100;
}
.twitch.wider #tabs button {
    padding: 0 2vh;
    line-height: 6vh;
    background: white;
    border-radius: vmin;
    margin: 0;
}

.twitch.wider #board{
    background: transparent;
}

/*.twitch.higher #board{
    width:100vw;
    height:56.25vw;
}*/

.twitch.wider #wrap{
    position: fixed;
    top:0;
    left:0;
    /*pointer-events: none;*/
    width: 100%;
    height: 100%;
    /*border: 2px solid red;*/
    box-sizing: border-box;
}
/*.twitch.wider #c_actions{
    width: 178vh;
    height: 100vh;
}*/
/*.twitch.wider .content:not(#c_chat){
    width: 178vh;
    height: 100vh;
}*/
.twitch.wider #c_actions{
    padding-top: 6vh;
}
.twitch.wider #c_actions button{
    height:10vmin;
}
.twitch.wider #paintr {
    width: 80vh;
    height: 80vh;
    top:10vh;
    left:calc(50vw - 40vh);
    background: rgba(255,255,255,0.750);
 }
 .twitch.wider textarea{
    position: absolute;
    top: calc(50vh - 25vmin);
    left: calc(50vw - 50vmin);
    background: rgba(0,0,0,0.75);
 }
 .twitch.wider #chat{
     position:absolute;
     right:0;
     top:0;
     border:0;
 }
.video {
    position: absolute;
    /*width: 100vw;
    height: 56.25vw;*/
    top:0;
    left:0;
}
/*.wider .video{
    width: 178vh;
    height: 100vh;
}
.higher .video{
    width:100vw;
    height:56.25vw;
}*/
.twitch.wider ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}
.twitch.wider #txtsubmit {
    position: absolute;
    right:0;
    left:initial;
}
.twitch.higher #tabs button {
    padding: 3vw 2vw;
    line-height: 4vw;
}
.twitch.higher .submit{
    position:relative;
}
.higher .closeX, .higher .full{
    display:none;
}
.closeX, .full {
    display: inline-block;
    font-family: sans-serif;
    font-weight: bold;
    /* margin-left: 1vw; */
    font-size: 3vmin;
    padding: 0 2vmin;
    /* line-height: 6vh; */
    background: white;
    width: 3vmin;
    text-align: center;
    vertical-align: bottom;
    height: 6vh;
    width: 6vh;
}
.closeX.x{
    border-radius: 3vh 0 0 3vh;
}
.closeX{
    border-radius: 3vh;
}
.full{
    border-radius: 0 3vh 3vh 0;
}

.closeX .inner {
    background: url(img/menu.png) no-repeat;
    background-size: contain;
    width: 80%;
    height: 80%;
    margin: 10%;
}
.closeX.x .inner{
    background-image: url(img/close.png);
}
.full .inner {
    background: url(img/expand.png) no-repeat;
    background-size: contain;
    width: 80%;
    height: 80%;
    margin: 10%;
}
.full.x .inner{
    background-image: url(img/contract.png);
}

.wider.twitch #tabs button.selected{
    color:red;
}
.higher.twitch #paintr {
    height: calc(75vh - 56.25vw);
    width: calc(75vh - 56.25vw);
}
.higher.twitch #c_image, .higher.twitch #c_text {
    text-align: center;
}

/*fix for not twitch*/

.wider:not(.twitch) #ibut {
    position:relative;
    right:initial;
    float: left;
}
.wider:not(.twitch) #paintr {
    position:relative;
    float: left;
}
.wider:not(.twitch) .clear {
    margin:2vmin;
    display:block;
}
.wider:not(.twitch) #ibut .submit {
    margin:2vmin !important;
}