* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    /*background-color: rgb(31, 172, 64);*/
}
body {
    position: relative;
}

.grid-container {
    display: grid;
    grid-template-columns: calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc( 100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc( 100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc( 100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc( 100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29) calc(100vw / 29);
    /* grid-gap             : 10px; */
    /* background-color     : #52f321; */
    /* height               : calc(100vh/52*18); */
    /* padding              : 10px; */
}

#submit-button1 {
    background-image: linear-gradient(180deg, #38a4ff, #0076c1);
}

.banner img {
    width: 100vw;
    /* height : 100vh; */
    display: block;
}

.empty {
    /* background-color: rgb(65, 95, 67); */
    /* height: calc(100vh/52*1); */
    height: calc(100vw / 29 * 1);
}

.input-box {
    /* background-color: rgba(255, 255, 255, 0.8); */
    background-color: rgb(255, 255, 255);
    /* height          : calc(100vh/52*2); */
    height: calc(100vw / 29 * 2);
    outline: none;
    border: 0px;
    font-size: calc(100vw / 29 * 1);
    /* text-align      : center; */
    /* padding         : 20px 0; */
    /* font-size       : 30px; */
}

.submit-button {
    background-image: linear-gradient(180deg, #b0eb00, #88c100);
    height: calc(100vw / 29 * 2);
    outline: none;
    border: 0px;
    font-size: calc(100vw / 29 * 1);
    line-height: calc(100vw / 29 * 2);
    color: white;
    text-align: center;
    letter-spacing: calc(100vw / 29 * 0.5);
    text-decoration: none;
}

.omg {
    background-color: unset;
    height: calc(100vw / 29 * 16);
    position: relative;
}

.work {
    background-color: unset;
    height: calc(100vw / 29 * 10);
    /* background-color: rgb(0, 255, 21); */
}

.work .owl {
    background-color: unset;
    width: calc(100vw / 29 * 12);
    height: calc(100vw / 29 * 12);
    display: block;
}

.owl img {
    background-color: unset;
}

.ranking {
    height: calc(100vw / 29 * 1);
    background-color: rgb(255, 255, 255);
    font-size: calc(100vw / 29 * 0.6);
    border-radius: 0 calc(100vw / 29 * 0.5) calc(100vw / 29 * 0.5) 0;
    position: absolute;
    line-height: calc(100vw / 29 * 1);
    left: 0;
    top: calc(100vw / 29 * 1);
    width: calc(100vw / 29 * 5);
}

.poll-num {
    height: calc(100vw / 29 * 1);
    background-color: rgb(255, 255, 255);
    font-size: calc(100vw / 29 * 0.6);
    border-radius: 0 calc(100vw / 29 * 0.5) calc(100vw / 29 * 0.5) 0;
    position: absolute;
    left: 0;
    top: calc(100vw / 29 * 3);
    width: calc(100vw / 29 * 4);
}

.description {
    height: calc(100vw / 29 * 2);
    background-color: rgba(0, 0, 0, 0.411);
    font-size: calc(100vw / 29 * 1);
    color: white;
    line-height: calc(100vw / 29 * 2);
    overflow: hidden;
    position: absolute;
    left: 0;
    top: calc(100vw / 29 * 10);
    width: calc(100vw / 29 * 12);
}

.author {
    height: calc(100vw / 29 * 2);
    background-color: rgb(255, 255, 255);
    font-size: calc(100vw / 29 * 1);
    color: rgb(0, 0, 0);
    line-height: calc(100vw / 29 * 2);
    overflow: hidden;
    position: absolute;
    left: 0;
    top: calc(100vw / 29 * 12);
    width: calc(100vw / 29 * 12);
}

.poll-button {
    display: block;
    height: calc(100vw / 29 * 2);
    background-image: linear-gradient(180deg, #b0eb00, #88c100);
    font-size: calc(100vw / 29 * 1);
    color: rgb(255, 255, 255);
    line-height: calc(100vw / 29 * 2);
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    border-radius: 0 0 calc(100vw / 29 * 1) calc(100vw / 29 * 1);
    position: absolute;
    left: 0;
    top: calc(100vw / 29 * 14);
    width: calc(100vw / 29 * 12);
}

.QRcode1 img {
    width: calc(100vw / 29 * 14);
    height: calc(100vw / 29 * 14);
    display: block;
    border: 1px solid #000;
}

.reward-shadow {
    background-color: rgba(0, 0, 0, 0.384);
    height: calc(100vw / 29 * 8);
    border-radius: calc(100vw / 29);
    display: flex;
    justify-content: space-evenly;
}

.rewards {
    width: calc(100vw / 29 * 4);
    height: calc(100vw / 29 * 7);
    color: white;
    font-size: calc(100vw / 29 * 0.8);
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
}

.rewards .rewards-and-ranking {
    margin-top: calc(100vw / 29 * 0.8);
    margin-bottom: calc(100vw / 29 * 0.2);
    /* font-size: calc(100vw / 29 * 0.1); */
    /* overflow: hidden; */
}

.rewards div {
    background-color: rgba(0, 0, 0, 0);
}

.rewards img {
    width: calc(100vw / 29 * 4);
    height: calc(100vw / 29 * 4);
    display: block;
    border: 1px solid #000;
}

.rewardsDescription {
    margin-top: calc(100vw / 29 * 0.2);
}

.work-display img {
    border: 1px solid black;
    width: calc(100vw / 29 * 27);
    height: calc(100vw / 29 * 15);
    display: block;
}

.edit-work-button {
    background-image: linear-gradient(180deg, #38a4ff, #0076c1);
    height: calc(100vw / 29* 2);
    outline: none;
    border: 0px;
    font-size: calc(100vw / 29 * 0.8);
    line-height: calc(100vw / 29 * 2);
    color: white;
    text-align: center;
    /* letter-spacing  : calc(100vw/30*0.5); */
    text-decoration: none;
}

.upload-work-button {
    background-image: linear-gradient(180deg, #b0eb00, #88c100);
    height: calc(100vw / 29* 2);
    width: calc(100vw / 29* 11);
;
    outline: none;
    border: 0px;
    font-size: calc(100vw / 29 * 0.8);
    line-height: calc(100vw / 29 * 2);
    color: white;
    text-align: center;
    letter-spacing: calc(100vw/29*0.2);
    /* text-decoration: none; */
}

.ranking-dispaly {
    height: calc(100vw / 29 * 8);
    background-color: #13965f;
    border: calc(100vw / 29 * 0.3) solid white;
    border-radius: calc(100vw / 29 * 1);
}

.ranking-dispaly-circle {
    height: calc(100vw / 29 * 6);
    background-color: #fff;
    border-radius: 50%;
}

.account-text {
    text-align: left;
    height: calc(100vw / 29 * 4);
    font-size: calc(100vw / 29);
    color: white;
    line-height: calc(100vw / 29 * 2);
    background-color: unset;
}

.ranking-text {
    text-align: center;
    height: calc(100vw / 29 * 4);
    font-size: calc(100vw / 29);
    color: black;
    line-height: calc(100vw / 29 * 2);
    background-color: unset;
}

.ranking-text small {
    background-color: unset;
}

.ranking-text span {
    background-color: unset;
    font-size: calc(100vw / 29 * 1.5);
    text-align: center;
}

.poll-text {
    text-align: left;
    height: calc(100vw / 29 * 4);
    font-size: calc(100vw / 29);
    color: white;
    line-height: calc(100vw / 29 * 2);
    background-color: unset;
}

.polling-recording {
    background-color: rgba(255, 255, 255, 0.568);
    border: 2px solid white;
    border-bottom: none;
    width: calc(100vw / 29 * 25);
    height: 55vh;
    overflow: scroll;
}

.polling-recording * {
    background-color: rgba(255, 255, 255, 0);
}

.polling-recording .text {
    height: calc(100vw / 29 * 3);
    line-height: calc(100vw / 29 * 3);
    padding-left: calc(100vw / 29 * 1);
    overflow: hidden;
    font-size: calc(100vw / 29 * 1.5);
}

.recordings {
    width: calc(100vw / 29 * 23);
    height: calc(100vw / 29 * 4);
    padding: calc(100vw / 29 * 0.2);
    margin: calc(100vw / 29 * 0.5) auto;
    /* border : 1px solid black; */
    display: table;
}

.avatar {
    display: table-cell;
    vertical-align: middle;
    /* margin : calc(100vh/52*0.5) calc(100vw/29*0.5); */
    display: inline-block;
}

.avatar img {
    width: calc(100vw / 29 * 3.5);
    height: calc(100vw / 29 * 3.5);
    display: block;
    border: 1px solid #000;
}

.account {
    display: table-cell;
    vertical-align: middle;
    /* line-height   : calc(100vh/52*2); */
    width: calc(100vw / 29 * 7);
    height: calc(100vw / 29 * 2);
    margin-left: calc(100vw / 29 * 1);
    display: inline-block;
    /* border        : 1px solid #000; */
    overflow: hidden;
    font-size: calc(100vw / 29 * 0.8);
}

.result {
    display: table-cell;
    vertical-align: middle;
    width: calc(100vw / 29 * 4);
    height: calc(100vw / 29 * 2);
    display: inline-block;
    /* border        : 1px solid #000; */
    overflow: hidden;
    font-size: calc(100vw / 29 * 0.8);
    text-align: center;
    margin-left: calc(100vw / 29 * 5);
}

.semi-transparent-mask {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.493);
    display: none;
}

.wechat-sharing-box {
    position: sticky;
    top: calc(100vh / 50 * 18);
    left: calc(100vw / 29 * 4);
    width: calc(100vw / 29 * 21);
    height: calc(100vw / 29 * 8);
    background-color: white;
    border-radius: calc(100vw / 29 * 1);
    display: flex;
    justify-content: space-evenly;
}

.private,
.public {
    background-color: unset;
}

.private img,
.public img {
    display: block;
    margin: calc(100vw / 29) auto;
    height: calc(100vw / 29 * 2);
    width: calc(100vw / 29 * 2);
    /* border: 1px solid black; */
}

.upload-box {
    background-color: unset;
}

.upload-box input {
    display: block;
}

.file-input {
    margin-top: calc(100vw / 29 * 0.5);
    width: calc(100vw / 29 *12);
    height: calc(100vw / 29 * 2);
    background-color: unset;
}

.upload-box .submit-button {
    margin-left: calc(100vw / 29 * 4);
    width: calc(100vw / 29 *5);
    height: calc(100vw / 29 * 2);
    letter-spacing: 0;
}

.wechat-sharing-button {
    display: block;
    background-image: linear-gradient(180deg, #b0eb00, #88c100);
    height: calc(100vw / 29 * 2);
    width: calc(100vw / 29 * 7);
    outline: none;
    border: 0px;
    font-size: calc(100vw / 29 * 1);
    line-height: calc(100vw / 29 * 2);
    color: white;
    text-align: center;
    /* letter-spacing: calc(100vw / 29 * 0.5); */
    text-decoration: none;
}

#nav {
    display: flex;
    width: 100vw;
    height: calc(100vw / 29 * 4);
    box-shadow: 0px -40px 100px rgb(78 78 78 / 72%);
    background-color: #13965f;
    position: sticky;
    bottom: -1px;
    justify-content: space-evenly;
}

#nav a {
    /* line-height: calc(100vw / 29 * 4); */
    color: white;
    background-color: rgba(0, 128, 128, 0);
    text-decoration: none;
    display: block;
    padding-top: calc(100vw / 29 * 1.2);
}

#nav a div {
    font-size: calc(100vw / 29 * 1.2);
    padding: calc(100vw / 29 * 0.1) calc(100vw / 29 * 0.5);
    /* border: calc(100vw / 29 * 0.5) solid rgba(178, 34, 34, 0); */
    height: calc(100vw / 29 * 1.5);
    background-color: rgba(0, 128, 128, 0);
    border-radius: calc(100vw / 29 * 0.5);
    line-height: calc(100vw / 29 * 1.5);
}


/* #ex {
    background-color: red;
} */