/*-CREATED BY WAVESITE-*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
#uploadzone{background: rgb(22,46,19);
    background: radial-gradient(circle, rgba(22, 46, 19, 1) 0%, rgba(18, 18, 18, 1) 100%);
    min-height: 70vh;
    display: flex;
    align-items: center;flex-wrap: wrap;    box-shadow: inset 0px -53px 28px #121212;}

#uploadzone img{width:275px;}
#dropzone{margin: auto;padding: 35px;border: 4px dashed rgb(42 195 17 / 30%);border-radius: 12px;color: white;transition:512ms;display: block;}
#dropzone:hover{border:4px dashed rgba(32, 94, 23, 0.3)}

#file{display:none;opacity: 0;visibility: 0;position:fixed;left:-100vw;top:-100vh}

.whitebg{background:#efefef;}

.transformed{transform: rotate(-4deg);
    margin-top: 43px;
    margin-bottom: 43px;}

#gotop{border-radius: 12px;right:10px;background-color: #36722e;}
#gotop:hover{background-color: #162e13;}

.spanbutton{color:#36722e;cursor:pointer;}
.spanbutton:hover{color:#162e13;}

footer{background-image: url(../img/bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 360px;
    background-color: #121212;}

#progress {
    background: #121212;
    color: white;
    padding: 1px 12px;
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    bottom: 12vh;
    z-index: 1000;
    padding: 26px 35px;
    border-radius: 8px;
    width: 320px;
    text-align: center;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5);
}
#progress:empty{display: none;}

.user-options{margin-bottom:-75px}
.user-options span{display:inline-block;color: #fff;background: #121212;padding: 12px 21px;border-radius:12px;margin:0 3px;cursor:pointer;transition:512ms}
.user-options span:hover{background:#162e13}


#userforms{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 53px;
    width: 90%;
    max-width: 400px;
    display: none;
    box-shadow: 0 2px 8px 5px rgba(0, 0, 0, 0.5);
    color:#333;
}

#userforms input{margin-bottom:21px;}
#userforms i{
    margin-top: -40px;
    margin-right: -35px;
    font-size: 1.4em;
    display:block;
    cursor:pointer;
}
#userforms i:hover{color:#162e13}
#userforms button{background-color: #36722e;}
#userforms button:hover{background-color: #162e13;}

.chatarea{background:#121212;color:#efefef;}
@media only screen and (max-width:768px){
    .user-options{margin-bottom:-100px;}
}