body {
    touch-action: pan-y;
    color: rgba(255,255,255,0.7);
    margin: 0;

    background: linear-gradient(135deg, rgba(202,0,255,1) 0%, rgba(14,221,17,1) 49%, rgba(253,255,0,1) 100%);
    font-size: larger;
    font-family: Ubuntu Light, Segoe UI Light, Arial !important;
    scroll-behavior: smooth;
    text-align: center;
}
.en {
    display: none;
}
.bar {
    text-align: left;
    width: 100%;
    font-size: .85em;
    box-shadow: 0 0 50px 0 rgba(0,0,0,0.1);
    border-bottom: solid 1px rgba(255,255,255,0.1);
    position: fixed;
    background: transparent;
}
.bar a {
    text-decoration: none;
    display: inline-block;
    float: right;
    color: rgba(255,255,255,0.7);
    border-right: solid 1px rgba(255,255,255,0.1);
    padding: 0.5%;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
}
.bar p {
    display: inline-block;
    padding: 0.3em;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    margin: 0;
    background: rgba(255,255,255,0.1);
}
.title {
    width: 100%;
    padding-top: 0.5em;
    font-size: 1.7em;
    padding-bottom: 0.5em;
    background: rgba(255,255,255,0.1);
    box-shadow: 0 0 50px 0 rgba(0,0,0,0.1);
    color: rgba(255,255,255,0.7);
}
.top {
    padding-bottom: 0.7em;
    padding-top: 1.7em;
    background: url(../title3.png) repeat rgba(255,255,255,0);
    background-position-top: -5px;
    box-shadow: inset 0 0 150px 0 rgba(0,0,0,0.3), 0 0 50px 0 rgba(0,0,0,0.1);
    background-position-y: 0px;
}
.text {
    padding: 20px;
    color: #555;
}
#hello {
padding: 20px;
color: #f0f0f0;
background: #2255aa
}
#top2 {
background: url(../title2.png) repeat;
}
#top3 {
background: url(../title4.png) repeat;
padding-bottom: 3em;
}
#t1 {
background: url(../title3.png) repeat rgba(255,255,255,0.9);
}
#t0 {
background: url(../title4.png) repeat rgba(30,120,170,0.9);
color: rgba(255,255,255,0.75);
padding-bottom: 30px;
}
#glink {
text-decoration: none;
background: rgba(0,0,70,0.4);
color: rgba(255,255,255,0.7);
padding: 10px;
margin-top: 20px;
display: block;
border-radius: 7px;
}
#link {
text-decoration: none;
border: 0;
font-size: 1.87em;
width: 200%;
padding: 10px;

background: rgba(255,255,255,0.85);
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
#copy {
text-decoration: none;
border: 0;
margin-left: -5px;
font-size: 1.7em;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
color: white;
text-shadow: 1px 0 0px #337,
0 2px 0px #337,
-2px 0 0px #337,
0 -2px 0px #337;
background: #00afff;
}
#go {
text-decoration: none;
border: 0;
width: 60%;
margin-left: -5px;
font-size: 1.7em;
text-align: center;
padding: 10px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
color: white;

background: #f74;
}
#field {
text-decoration: none;
background: rgba(0,0,70,0.4);
color: rgba(255,255,255,0.7);
margin-top: 20px;
text-align: left;
display: none;
font-size: 0.3em;
border-radius: 7px;
}

img {
    transition: 0.2s;
    height: 99%;
}
#images {
padding: 0;
height: 300px;
background: white;
}
.top a {
    text-decoration: none;
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.7);
    padding: 10px;
    border-radius: 7px;
}
.footer {
    width: 100%;
    height: 15px;
    background: rgba(0, 0, 0, 0.3);
    margin-top: -15px;
}
#chat {
filter: blur(0);
width: 100%;
height: calc(100% - 28px);
border: 0;
border-bottom-left-radius: 13px;
position: relative;
border-bottom-right-radius: 0px;
}
#chatArea {
width: 300px;
z-index: 6;
height: 376px;
border-radius: 13px;
min-width: 220px;
min-height: 30px;
border-bottom: solid rgba(0, 0, 0, 0.123) 2px;
position: fixed;
top: calc(100% - 396px);
left: calc(100% - 320px);
overflow:auto;
resize: both;
}
#chatArea::-webkit-scrollbar {
width: 20px;
background-color: transparent;
}
#chatArea::-webkit-scrollbar-corner {
background-color: transparent;
}
#chatArea::-webkit-resizer {
background-color: rgba(0, 0, 0, 0.123);
border-top-right-radius: 13px;
border-bottom-right-radius: 13px;
border: solid rgba(150, 150, 150, 0.8) 2px;
}
#chatBorder {
border-radius: 13px;
border-bottom-right-radius: 0px;
border: solid rgba(0, 0, 0, 0.123) 2px;
border-bottom: 0px;
}
#chatTitle {
touch-action: none;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
background-color: #343247;
color: white;
padding: 6px;
cursor: move;
user-select: none;
font-size: 14px;
text-align: left;
padding-left: 20px;
}
#hideChat {
top: 3px;
right: 3px;
position: absolute;
cursor: pointer;
font-size: 14px;
padding: 3px;
border-radius: 100%;
background-color: rgb(78, 78, 78);
}
#chatCount {
top: 3px;
position: absolute;
font-size: 14px;
padding: 3px;
right: 24px;
background-color: #343247;
}
.hiddenChat {
    transition: 0.3s;
    bottom: -380px !important;
    top: 100% !important;
}
#openChat {
position: fixed;
background-color: #000000bf;
bottom: -50px;
transition: 0.1s;
right: 150px;
cursor: pointer;
padding: 5px;
border-radius: 3px;
width: 60px;
height: 30px;
}
.showOpenChat {
    bottom: -3px !important;
}
#action {
width: 60px;
height: 60px;
right: 20px;
bottom: 20px;
-webkit-tap-highlight-color: transparent;
position: fixed;
transition: 0.3s;
background: url(../favicon.ico) no-repeat rgba(255,255,255,0);
background-size: contain;

}
#action:focus {
transition: 1s;
width: 1000px !important;
height: 1000px !important;
}
.showAction {
    bottom: 1000px !important;
    transition: 1s !important;
    width: 1000px !important;
    height: 1000px !important;
}
.hideAction {

    bottom: -100px !important;

}