body {
    background: linear-gradient(to right, rgb(126, 218, 126) , rgb(108, 108, 214), rgb(221, 112, 112), rgb(228, 228, 142), rgb(195, 99, 195), rgb(113, 198, 198), rgb(197, 165, 105));
    overflow-x: hidden;

    display: flex;
    justify-content: center;

}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}




@media only screen and (max-width: 600px){
    
    .page {

        width: 70%;
        border: 14px solid rgb(0, 0, 0, 0.5);
        border: 14px solid rgba(226, 105, 23, 0.5);
        /* outline: 14px solid rgba(255, 0, 0, 0.5); */
    
        background-color: rgb(0, 0, 0, 0.6);
    
    
        display: flex;
        flex-direction: column;
        align-items: center;
    
        box-shadow: 
        -4px 4px #ef3550,
        -8px 8px #f48fb1,
        -12px 12px #7e57c2,
        -16px 16px #2196f3,
        -20px 20px #26c6da,
        -24px 24px #43a047,
        -28px 28px #eeff41,
        -32px 32px #f9a825,
        -36px 36px #ff5722,
    
        4px 4px #ef3550,
        8px 8px #f48fb1,
        12px 12px #7e57c2,
        16px 16px #2196f3,
        20px 20px #26c6da,
        24px 24px #43a047,
        28px 28px #eeff41,
        32px 32px #f9a825,
        36px 36px #ff5722
        
        ;


    }
    
    .header {
        width: 98%;
        border-bottom: 14px solid rgba(226, 105, 23, 0.5);
        overflow-x: hidden;
    
    }.header img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
    
    .menu {
        width: 100%;
        border-bottom: 10px solid rgba(226, 105, 23, 0.5);
    
        display: flex;
        align-items: center;
        padding: 0 10px;

        flex-wrap: wrap;
        gap: 5px;
        
    }.menu p {
        color: yellow;
        padding: 0 20px 0 5px;
        font-size: 12px;
    }
    .menu .menuBar {
        border-right: 10px solid rgb(164, 85, 33);
        padding: 10px;
        background-color: pink;
        background-color: pink;
        font-weight: bold;

        font-size: 12px;
    }
    .WARNING {
        background-color: red;
        padding: 3px;
        color: white;
        font-size: 10px;
    }
    
    
    .dancingMeme {
        position: fixed;
        width: 200px;
        bottom: -20px;
        right: -10px;
    }
    
    .dancingMeme2 {
        position: fixed;
        width: 200px;
        bottom: -20px;
        left: -10px;
    
        transform: scaleX(-1);
    }
    .nyanMeme {
        position: fixed;
        width: 130px;
        top: 100px;
        left: 0;
    
    }.nyanMeme2 {
        position: fixed;
        width: 130px;
        top: 200px;
        right: 0;
        transform: scaleX(-1);
    
    }.snail {
        position: fixed;
        width: 250px;
        right: -150px;
        bottom: -70px;
    
        animation: snailGO 7s linear infinite;
    }
    
    @keyframes snailGO {
        0% {
            transform: translate(0,0);
        }
        100% {
            transform: translate(-600px,0);
        }
    }
    
    
    
    /* fnsect */
    
    .fnsect {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
    } .wennnn {
        font-size: 40px;
    
        font-family: sans-serif;
        font-weight: bold;
        margin: 60px 0;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #ef3550,
                     -8px 8px #f48fb1,
                     -12px 12px #7e57c2,
                     -16px 16px #2196f3,
                     -20px 20px #26c6da,
                     -24px 24px #43a047,
                     -28px 28px #eeff41,
                     -32px 32px #f9a825,
                     -36px 36px #ff5722;
        
      
    }
    
    .wennnn2 {
        font-size: 25px;
    
        font-family: sans-serif;
        font-weight: bold;
        font-size: 3rem;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #000;
        
      
    }
    
    
    
    .info {
    
        width: 100%;
        display: flex;
        height: 300px;
    
    }.info .infoWrapper {
    
        width: 50%;
        height: 100%;
        /* background-color: yellow; */
    
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 0 0 100px;
    
    }.infoWrapper .infoBar {
    
        width: 100%;
        height: 70px;
        background-color: #43a047;
        background-color: red;
        color: yellow;
    
        font-size: 30px;
    
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    
    }.info img {
    height: 250px;
    }
    
    
    
    
    .links {
        width: 100%;
        background-color: pink;
        outline: white 4px dashed;
      
        padding: 30px 40px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    
        position: relative;
    
    }.head {
        color: red;
        font-size: 30px;
    }
    .links .linkImages {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }.linkImages img {
        width: 100px;
    }
    
    .barcode {
        width: 150px;
        right: -29%;
    
        position: absolute;
    }
    
    
    
    
    
    
    
    /* dance */
    
    .danceComp {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        
    }.danceComp .comp {
        width: 400px;
        /* background-color: yellow; */

        display: flex;
        flex-direction: column;
        align-items: center;
    
    }.danceComp .comp img {
        height: 200px;
    }.danceComp .comp p {
        font-size: 20px;
        color: yellow;
    
    }.danceComp .comp button {
        width: 130px;
        height: 30px;
        background-color: #43a047;
    
        color: white;
        font-weight: bold;
    }
    
    
    
    
    
    
    
    
    /* chatroom */
    
    .chatroom {
        position: fixed;
        z-index: 1;
        bottom: 0;
        right: 0;
    
        width: 300px;
        height: 400px;
        background-color: rgb(164, 85, 33,0.95);
        border: 3px solid #26c6da;
    
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px;
    
    
        display: none;
    }.chatroom .h {
        font-size: 30px;
    }
    
    .chats {
        width: 100%;
        background-color: red;
        height: 70%;
    
        display: flex;
        flex-direction: column;
        gap: 5px;
        overflow: scroll;
    }.chat span {
        font-weight: bold;
    }
    
    
    .maintenance {
        background-color: pink;
        padding: 10px;
        color: black;
    }
    
    
    /* announcements */
    
    .ann {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 40px;
        margin: 0 0 50px 0;
    }
    .ann .an {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    
       
    }.an p {
        color: yellow;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }.an p span{
        color: white;
        font-size: 17px;
    }
    .an p .HOTTOPIC {
        background-color: red;
        padding: 5px;
    
    
    }
    .an img {
        width: 200px;
    }
    
    
}

@media only screen and (min-width: 600px) and (max-width: 1000px) {
    .page {

        width: 70%;
        border: 14px solid rgb(0, 0, 0, 0.5);
        border: 14px solid rgba(226, 105, 23, 0.5);
        /* outline: 14px solid rgba(255, 0, 0, 0.5); */
    
        background-color: rgb(0, 0, 0, 0.6);
    
    
        display: flex;
        flex-direction: column;
        align-items: center;
    
        box-shadow: 
        -4px 4px #ef3550,
        -8px 8px #f48fb1,
        -12px 12px #7e57c2,
        -16px 16px #2196f3,
        -20px 20px #26c6da,
        -24px 24px #43a047,
        -28px 28px #eeff41,
        -32px 32px #f9a825,
        -36px 36px #ff5722,
    
        4px 4px #ef3550,
        8px 8px #f48fb1,
        12px 12px #7e57c2,
        16px 16px #2196f3,
        20px 20px #26c6da,
        24px 24px #43a047,
        28px 28px #eeff41,
        32px 32px #f9a825,
        36px 36px #ff5722
        
        ;
    }
    
    .header {
        width: 98%;
        border-bottom: 14px solid rgba(226, 105, 23, 0.5);
    
    }.header img {
        width: 100%;
    }
    
    .menu {
        width: 100%;
        border-bottom: 10px solid rgba(226, 105, 23, 0.5);
    
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        align-items: center;
        padding: 0 10px;
        
    }.menu p {
        color: yellow;
        padding: 0 20px 0 5px;
    }
    .menu .menuBar {
        border-right: 10px solid rgb(164, 85, 33);
        padding: 10px;
        background-color: pink;
        background-color: pink;
        font-weight: bold;

        font-size: 12px;
    }
    .WARNING {
        background-color: red;
        padding: 3px;
        color: white;
    }
    
    
    .dancingMeme {
        position: fixed;
        width: 300px;
        bottom: -20px;
        right: -10px;
    }
    
    .dancingMeme2 {
        position: fixed;
        width: 300px;
        bottom: -20px;
        left: -10px;
    
        transform: scaleX(-1);
    }
    .nyanMeme {
        position: fixed;
        width: 200px;
        top: 100px;
        left: 0;
    
    }.nyanMeme2 {
        position: fixed;
        width: 200px;
        top: 200px;
        right: 0;
        transform: scaleX(-1);
    
    }.snail {
        position: fixed;
        width: 250px;
        right: -150px;
        bottom: -70px;
    
        animation: snailGO 7s linear infinite;
    }
    
    @keyframes snailGO {
        0% {
            transform: translate(0,0);
        }
        100% {
            transform: translate(-1800px,0);
        }
    }
    
    
    
    /* fnsect */
    
    .fnsect {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
    } .wennnn {
        font-size: 18px;
    
        font-family: sans-serif;
        font-weight: bold;
        font-size: 3rem;
        margin: 60px 0;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #ef3550,
                     -8px 8px #f48fb1,
                     -12px 12px #7e57c2,
                     -16px 16px #2196f3,
                     -20px 20px #26c6da,
                     -24px 24px #43a047,
                     -28px 28px #eeff41,
                     -32px 32px #f9a825,
                     -36px 36px #ff5722;
        
      
    }
    
    .wennnn2 {
        font-size: 18px;
    
        font-family: sans-serif;
        font-weight: bold;
        font-size: 3rem;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #000;
        
      
    }
    
    
    
    .info {
    
        width: 100%;
        display: flex;
        height: 300px;
    
    }.info .infoWrapper {
    
        width: 50%;
        height: 100%;
        /* background-color: yellow; */
    
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 0 0 100px;
    
    }.infoWrapper .infoBar {
    
        width: 100%;
        height: 70px;
        background-color: #43a047;
        background-color: red;
        color: yellow;
    
        font-size: 30px;
    
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    
    }.info img {
    height: 250px;
    }
    
    
    
    
    .links {
        width: 100%;
        background-color: pink;
        outline: white 4px dashed;
      
        padding: 30px 40px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    
        position: relative;
    
    }.head {
        color: red;
        font-size: 30px;
    }
    .links .linkImages {
        width: 100%;
        display: flex;
        gap: 20px;
    }.linkImages img {
        width: 100px;
    }
    
    .barcode {
        width: 150px;
        right: 50px;
    
        position: absolute;
    }
    
    
    
    
    
    
    
    /* dance */
    
    .danceComp {
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
        
    }.danceComp .comp {
        width: 400px;
        /* background-color: yellow; */
    
    }.danceComp .comp img {
        height: 200px;
    }.danceComp .comp p {
        font-size: 20px;
        color: yellow;
    
    }.danceComp .comp button {
        width: 130px;
        height: 30px;
        background-color: #43a047;
    
        color: white;
        font-weight: bold;
    }
    
    
    
    
    
    
    
    
    /* chatroom */
    
    .chatroom {
        position: fixed;
        z-index: 1;
        bottom: 0;
        right: 0;
    
        width: 300px;
        height: 400px;
        background-color: rgb(164, 85, 33,0.95);
        border: 3px solid #26c6da;
    
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px;
    
    
        display: none;
    }.chatroom .h {
        font-size: 30px;
    }
    
    .chats {
        width: 100%;
        background-color: red;
        height: 70%;
    
        display: flex;
        flex-direction: column;
        gap: 5px;
        overflow: scroll;
    }.chat span {
        font-weight: bold;
    }
    
    
    .maintenance {
        background-color: pink;
        padding: 10px;
        color: black;
    }
    
    
    /* announcements */
    
    .ann {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 40px;
        margin: 0 0 50px 0;
    }
    .ann .an {
        display: flex;
        gap: 20px;
    
       
    }.an p {
        color: yellow;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }.an p span{
        color: white;
        font-size: 17px;
    }
    .an p .HOTTOPIC {
        background-color: red;
        padding: 5px;
    
    
    }
    .an img {
        width: 200px;
    }
    
    
}


@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    .page {

        width: 70%;
        border: 14px solid rgb(0, 0, 0, 0.5);
        border: 14px solid rgba(226, 105, 23, 0.5);
        /* outline: 14px solid rgba(255, 0, 0, 0.5); */
    
        background-color: rgb(0, 0, 0, 0.6);
    
    
        display: flex;
        flex-direction: column;
        align-items: center;
    
        box-shadow: 
        -4px 4px #ef3550,
        -8px 8px #f48fb1,
        -12px 12px #7e57c2,
        -16px 16px #2196f3,
        -20px 20px #26c6da,
        -24px 24px #43a047,
        -28px 28px #eeff41,
        -32px 32px #f9a825,
        -36px 36px #ff5722,
    
        4px 4px #ef3550,
        8px 8px #f48fb1,
        12px 12px #7e57c2,
        16px 16px #2196f3,
        20px 20px #26c6da,
        24px 24px #43a047,
        28px 28px #eeff41,
        32px 32px #f9a825,
        36px 36px #ff5722
        
        ;
    }
    
    .header {
        width: 98%;
        border-bottom: 14px solid rgba(226, 105, 23, 0.5);
    
    }.header img {
        width: 100%;
    }
    
    .menu {
        width: 100%;
        border-bottom: 14px solid rgba(226, 105, 23, 0.5);
    
        display: flex;
        align-items: center;
        padding: 0 10px;
        
    }.menu p {
        color: yellow;
        padding: 0 20px 0 5px;
    }
    .menu .menuBar {
        border-right: 14px solid rgb(164, 85, 33);
        padding: 10px;
        background-color: pink;
        background-color: pink;
        font-weight: bold;
    }
    .WARNING {
        background-color: red;
        padding: 3px;
        color: white;
    }
    
    
    .dancingMeme {
        position: fixed;
        width: 300px;
        bottom: -20px;
        right: -10px;
    }
    
    .dancingMeme2 {
        position: fixed;
        width: 300px;
        bottom: -20px;
        left: -10px;
    
        transform: scaleX(-1);
    }
    .nyanMeme {
        position: fixed;
        width: 200px;
        top: 100px;
        left: 0;
    
    }.nyanMeme2 {
        position: fixed;
        width: 200px;
        top: 200px;
        right: 0;
        transform: scaleX(-1);
    
    }.snail {
        position: fixed;
        width: 250px;
        right: -150px;
        bottom: -70px;
    
        animation: snailGO 7s linear infinite;
    }
    
    @keyframes snailGO {
        0% {
            transform: translate(0,0);
        }
        100% {
            transform: translate(-1800px,0);
        }
    }
    
    
    
    /* fnsect */
    
    .fnsect {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
    } .wennnn {
        font-size: 25px;
    
        font-family: sans-serif;
        font-weight: bold;
        font-size: 3rem;
        margin: 60px 0;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #ef3550,
                     -8px 8px #f48fb1,
                     -12px 12px #7e57c2,
                     -16px 16px #2196f3,
                     -20px 20px #26c6da,
                     -24px 24px #43a047,
                     -28px 28px #eeff41,
                     -32px 32px #f9a825,
                     -36px 36px #ff5722;
        
      
    }
    
    .wennnn2 {
        font-size: 25px;
    
        font-family: sans-serif;
        font-weight: bold;
        font-size: 3rem;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #000;
        
      
    }
    
    
    
    .info {
    
        width: 100%;
        display: flex;
        height: 300px;
    
    }.info .infoWrapper {
    
        width: 50%;
        height: 100%;
        /* background-color: yellow; */
    
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 0 0 100px;
    
    }.infoWrapper .infoBar {
    
        width: 100%;
        height: 70px;
        background-color: #43a047;
        background-color: red;
        color: yellow;
    
        font-size: 30px;
    
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    
    }.info img {
    height: 250px;
    }
    
    
    
    
    .links {
        width: 100%;
        background-color: pink;
        outline: white 4px dashed;
      
        padding: 30px 40px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    
        position: relative;
    
    }.head {
        color: red;
        font-size: 30px;
    }
    .links .linkImages {
        width: 100%;
        display: flex;
        gap: 20px;
    }.linkImages img {
        width: 100px;
    }
    
    .barcode {
        width: 150px;
        right: 50px;
    
        position: absolute;
    }
    
    
    
    
    
    
    
    /* dance */
    
    .danceComp {
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
        gap: 40px;
    }.danceComp .comp {
        width: 400px;
        /* background-color: yellow; */
    
    }.danceComp .comp img {
        height: 300px;
    }.danceComp .comp p {
        font-size: 25px;
        color: yellow;
    
    }.danceComp .comp button {
        width: 200px;
        height: 30px;
        background-color: #43a047;
    
        color: white;
        font-weight: bold;
    }
    
    
    
    
    
    
    
    
    /* chatroom */
    
    .chatroom {
        position: fixed;
        z-index: 1;
        bottom: 0;
        right: 0;
    
        width: 300px;
        height: 400px;
        background-color: rgb(164, 85, 33,0.95);
        border: 3px solid #26c6da;
    
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px;
    
    
        display: none;
    }.chatroom .h {
        font-size: 30px;
    }
    
    .chats {
        width: 100%;
        background-color: red;
        height: 70%;
    
        display: flex;
        flex-direction: column;
        gap: 5px;
        overflow: scroll;
    }.chat span {
        font-weight: bold;
    }
    
    
    .maintenance {
        background-color: pink;
        padding: 10px;
        color: black;
    }
    
    
    /* announcements */
    
    .ann {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 40px;
        margin: 0 0 50px 0;
    }
    .ann .an {
        display: flex;
        gap: 20px;
    
       
    }.an p {
        color: yellow;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }.an p span{
        color: white;
        font-size: 17px;
    }
    .an p .HOTTOPIC {
        background-color: red;
        padding: 5px;
    
    
    }
    .an img {
        width: 400px;
    }
    
    
}


@media only screen and (min-width: 1400px) and (max-width: 1500px) {
    .page {

        width: 70%;
        border: 14px solid rgb(0, 0, 0, 0.5);
        border: 14px solid rgba(226, 105, 23, 0.5);
        /* outline: 14px solid rgba(255, 0, 0, 0.5); */
    
        background-color: rgb(0, 0, 0, 0.6);
    
    
        display: flex;
        flex-direction: column;
        align-items: center;
    
        box-shadow: 
        -4px 4px #ef3550,
        -8px 8px #f48fb1,
        -12px 12px #7e57c2,
        -16px 16px #2196f3,
        -20px 20px #26c6da,
        -24px 24px #43a047,
        -28px 28px #eeff41,
        -32px 32px #f9a825,
        -36px 36px #ff5722,
    
        4px 4px #ef3550,
        8px 8px #f48fb1,
        12px 12px #7e57c2,
        16px 16px #2196f3,
        20px 20px #26c6da,
        24px 24px #43a047,
        28px 28px #eeff41,
        32px 32px #f9a825,
        36px 36px #ff5722
        
        ;
    }
    
    .header {
        width: 98%;
        border-bottom: 14px solid rgba(226, 105, 23, 0.5);
    
    }.header img {
        width: 100%;
    }
    
    .menu {
        width: 100%;
        border-bottom: 14px solid rgba(226, 105, 23, 0.5);
    
        display: flex;
        align-items: center;
        padding: 0 10px;
        
    }.menu p {
        color: yellow;
        padding: 0 20px 0 5px;
    }
    .menu .menuBar {
        border-right: 14px solid rgb(164, 85, 33);
        padding: 10px;
        background-color: pink;
        background-color: pink;
        font-weight: bold;
    }
    .WARNING {
        background-color: red;
        padding: 3px;
        color: white;
    }
    
    
    .dancingMeme {
        position: fixed;
        width: 300px;
        bottom: -20px;
        right: -10px;
    }
    
    .dancingMeme2 {
        position: fixed;
        width: 300px;
        bottom: -20px;
        left: -10px;
    
        transform: scaleX(-1);
    }
    .nyanMeme {
        position: fixed;
        width: 200px;
        top: 100px;
        left: 0;
    
    }.nyanMeme2 {
        position: fixed;
        width: 200px;
        top: 200px;
        right: 0;
        transform: scaleX(-1);
    
    }.snail {
        position: fixed;
        width: 250px;
        right: -150px;
        bottom: -70px;
    
        animation: snailGO 7s linear infinite;
    }
    
    @keyframes snailGO {
        0% {
            transform: translate(0,0);
        }
        100% {
            transform: translate(-1800px,0);
        }
    }
    
    
    
    /* fnsect */
    
    .fnsect {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
    } .wennnn {
        font-size: 25px;
    
        font-family: sans-serif;
        font-weight: bold;
        font-size: 3rem;
        margin: 60px 0;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #ef3550,
                     -8px 8px #f48fb1,
                     -12px 12px #7e57c2,
                     -16px 16px #2196f3,
                     -20px 20px #26c6da,
                     -24px 24px #43a047,
                     -28px 28px #eeff41,
                     -32px 32px #f9a825,
                     -36px 36px #ff5722;
        
      
    }
    
    .wennnn2 {
        font-size: 25px;
    
        font-family: sans-serif;
        font-weight: bold;
        font-size: 3rem;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #000;
        
      
    }
    
    
    
    .info {
    
        width: 100%;
        display: flex;
        height: 300px;
    
    }.info .infoWrapper {
    
        width: 50%;
        height: 100%;
        /* background-color: yellow; */
    
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 0 0 100px;
    
    }.infoWrapper .infoBar {
    
        width: 100%;
        height: 70px;
        background-color: #43a047;
        background-color: red;
        color: yellow;
    
        font-size: 30px;
    
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    
    }.info img {
    height: 250px;
    }
    
    
    
    
    .links {
        width: 100%;
        background-color: pink;
        outline: white 4px dashed;
      
        padding: 30px 40px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    
        position: relative;
    
    }.head {
        color: red;
        font-size: 30px;
    }
    .links .linkImages {
        width: 100%;
        display: flex;
        gap: 20px;
    }.linkImages img {
        width: 100px;
    }
    
    .barcode {
        width: 150px;
        right: 50px;
    
        position: absolute;
    }
    
    
    
    
    
    
    
    /* dance */
    
    .danceComp {
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
        gap: 40px;
    }.danceComp .comp {
        width: 400px;
        /* background-color: yellow; */
    
    }.danceComp .comp img {
        height: 300px;
    }.danceComp .comp p {
        font-size: 25px;
        color: yellow;
    
    }.danceComp .comp button {
        width: 200px;
        height: 30px;
        background-color: #43a047;
    
        color: white;
        font-weight: bold;
    }
    
    
    
    
    
    
    
    
    /* chatroom */
    
    .chatroom {
        position: fixed;
        z-index: 1;
        bottom: 0;
        right: 0;
    
        width: 300px;
        height: 400px;
        background-color: rgb(164, 85, 33,0.95);
        border: 3px solid #26c6da;
    
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px;
    
    
        display: none;
    }.chatroom .h {
        font-size: 30px;
    }
    
    .chats {
        width: 100%;
        background-color: red;
        height: 70%;
    
        display: flex;
        flex-direction: column;
        gap: 5px;
        overflow: scroll;
    }.chat span {
        font-weight: bold;
    }
    
    
    .maintenance {
        background-color: pink;
        padding: 10px;
        color: black;
    }
    
    
    /* announcements */
    
    .ann {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 40px;
        margin: 0 0 50px 0;
    }
    .ann .an {
        display: flex;
        gap: 20px;
    
       
    }.an p {
        color: yellow;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }.an p span{
        color: white;
        font-size: 17px;
    }
    .an p .HOTTOPIC {
        background-color: red;
        padding: 5px;
    
    
    }
    .an img {
        width: 400px;
    }
    
    
}

@media only screen and (min-width: 1500px) and (max-width: 1700px) {
    .page {

        width: 70%;
        border: 14px solid rgb(0, 0, 0, 0.5);
        border: 14px solid rgba(226, 105, 23, 0.5);
        /* outline: 14px solid rgba(255, 0, 0, 0.5); */
    
        background-color: rgb(0, 0, 0, 0.6);
    
    
        display: flex;
        flex-direction: column;
        align-items: center;
    
        box-shadow: 
        -4px 4px #ef3550,
        -8px 8px #f48fb1,
        -12px 12px #7e57c2,
        -16px 16px #2196f3,
        -20px 20px #26c6da,
        -24px 24px #43a047,
        -28px 28px #eeff41,
        -32px 32px #f9a825,
        -36px 36px #ff5722,
    
        4px 4px #ef3550,
        8px 8px #f48fb1,
        12px 12px #7e57c2,
        16px 16px #2196f3,
        20px 20px #26c6da,
        24px 24px #43a047,
        28px 28px #eeff41,
        32px 32px #f9a825,
        36px 36px #ff5722
        
        ;
    }
    
    .header {
        width: 98%;
        border-bottom: 14px solid rgba(226, 105, 23, 0.5);
    
    }.header img {
        width: 100%;
    }
    
    .menu {
        width: 100%;
        border-bottom: 14px solid rgba(226, 105, 23, 0.5);
    
        display: flex;
        align-items: center;
        padding: 0 10px;
        
    }.menu p {
        color: yellow;
        padding: 0 20px 0 5px;
    }
    .menu .menuBar {
        border-right: 14px solid rgb(164, 85, 33);
        padding: 10px;
        background-color: pink;
        background-color: pink;
        font-weight: bold;
    }
    .WARNING {
        background-color: red;
        padding: 3px;
        color: white;
    }
    
    
    .dancingMeme {
        position: fixed;
        width: 300px;
        bottom: -20px;
        right: -10px;
    }
    
    .dancingMeme2 {
        position: fixed;
        width: 300px;
        bottom: -20px;
        left: -10px;
    
        transform: scaleX(-1);
    }
    .nyanMeme {
        position: fixed;
        width: 200px;
        top: 100px;
        left: 0;
    
    }.nyanMeme2 {
        position: fixed;
        width: 200px;
        top: 200px;
        right: 0;
        transform: scaleX(-1);
    
    }.snail {
        position: fixed;
        width: 250px;
        right: -150px;
        bottom: -70px;
    
        animation: snailGO 7s linear infinite;
    }
    
    @keyframes snailGO {
        0% {
            transform: translate(0,0);
        }
        100% {
            transform: translate(-1800px,0);
        }
    }
    
    
    
    /* fnsect */
    
    .fnsect {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
    } .wennnn {
        font-size: 25px;
    
        font-family: sans-serif;
        font-weight: bold;
        font-size: 3rem;
        margin: 60px 0;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #ef3550,
                     -8px 8px #f48fb1,
                     -12px 12px #7e57c2,
                     -16px 16px #2196f3,
                     -20px 20px #26c6da,
                     -24px 24px #43a047,
                     -28px 28px #eeff41,
                     -32px 32px #f9a825,
                     -36px 36px #ff5722;
        
      
    }
    
    .wennnn2 {
        font-size: 25px;
    
        font-family: sans-serif;
        font-weight: bold;
        font-size: 3rem;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #000;
        
      
    }
    
    
    
    .info {
    
        width: 100%;
        display: flex;
        height: 300px;
    
    }.info .infoWrapper {
    
        width: 50%;
        height: 100%;
        /* background-color: yellow; */
    
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 0 0 100px;
    
    }.infoWrapper .infoBar {
    
        width: 100%;
        height: 70px;
        background-color: #43a047;
        background-color: red;
        color: yellow;
    
        font-size: 30px;
    
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    
    }.info img {
    height: 250px;
    }
    
    
    
    
    .links {
        width: 100%;
        background-color: pink;
        outline: white 4px dashed;
      
        padding: 30px 40px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    
        position: relative;
    
    }.head {
        color: red;
        font-size: 30px;
    }
    .links .linkImages {
        width: 100%;
        display: flex;
        gap: 20px;
    }.linkImages img {
        width: 100px;
    }
    
    .barcode {
        width: 150px;
        right: 50px;
    
        position: absolute;
    }
    
    
    
    
    
    
    
    /* dance */
    
    .danceComp {
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
        gap: 40px;
    }.danceComp .comp {
        width: 400px;
        /* background-color: yellow; */
    
    }.danceComp .comp img {
        height: 300px;
    }.danceComp .comp p {
        font-size: 25px;
        color: yellow;
    
    }.danceComp .comp button {
        width: 200px;
        height: 30px;
        background-color: #43a047;
    
        color: white;
        font-weight: bold;
    }
    
    
    
    
    
    
    
    
    /* chatroom */
    
    .chatroom {
        position: fixed;
        z-index: 1;
        bottom: 0;
        right: 0;
    
        width: 300px;
        height: 400px;
        background-color: rgb(164, 85, 33,0.95);
        border: 3px solid #26c6da;
    
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px;
    
    
        display: none;
    }.chatroom .h {
        font-size: 30px;
    }
    
    .chats {
        width: 100%;
        background-color: red;
        height: 70%;
    
        display: flex;
        flex-direction: column;
        gap: 5px;
        overflow: scroll;
    }.chat span {
        font-weight: bold;
    }
    
    
    .maintenance {
        background-color: pink;
        padding: 10px;
        color: black;
    }
    
    
    /* announcements */
    
    .ann {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 40px;
        margin: 0 0 50px 0;
    }
    .ann .an {
        display: flex;
        gap: 20px;
    
       
    }.an p {
        color: yellow;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }.an p span{
        color: white;
        font-size: 17px;
    }
    .an p .HOTTOPIC {
        background-color: red;
        padding: 5px;
    
    
    }
    .an img {
        width: 400px;
    }
    
    
}


@media only screen and (min-width: 1700px) {
    .page {

        width: 70%;
        border: 14px solid rgb(0, 0, 0, 0.5);
        border: 14px solid rgba(226, 105, 23, 0.5);
        /* outline: 14px solid rgba(255, 0, 0, 0.5); */
    
        background-color: rgb(0, 0, 0, 0.6);
    
    
        display: flex;
        flex-direction: column;
        align-items: center;
    
        box-shadow: 
        -4px 4px #ef3550,
        -8px 8px #f48fb1,
        -12px 12px #7e57c2,
        -16px 16px #2196f3,
        -20px 20px #26c6da,
        -24px 24px #43a047,
        -28px 28px #eeff41,
        -32px 32px #f9a825,
        -36px 36px #ff5722,
    
        4px 4px #ef3550,
        8px 8px #f48fb1,
        12px 12px #7e57c2,
        16px 16px #2196f3,
        20px 20px #26c6da,
        24px 24px #43a047,
        28px 28px #eeff41,
        32px 32px #f9a825,
        36px 36px #ff5722
        
        ;
    }
    
    .header {
        width: 98%;
        border-bottom: 14px solid rgba(226, 105, 23, 0.5);
    
    }.header img {
        width: 100%;
    }
    
    .menu {
        width: 100%;
        border-bottom: 14px solid rgba(226, 105, 23, 0.5);
    
        display: flex;
        align-items: center;
        padding: 0 10px;
        
    }.menu p {
        color: yellow;
        padding: 0 20px 0 5px;
    }
    .menu .menuBar {
        border-right: 14px solid rgb(164, 85, 33);
        padding: 10px;
        background-color: pink;
        background-color: pink;
        font-weight: bold;
    }
    .WARNING {
        background-color: red;
        padding: 3px;
        color: white;
    }
    
    
    .dancingMeme {
        position: fixed;
        width: 300px;
        bottom: -20px;
        right: -10px;
    }
    
    .dancingMeme2 {
        position: fixed;
        width: 300px;
        bottom: -20px;
        left: -10px;
    
        transform: scaleX(-1);
    }
    .nyanMeme {
        position: fixed;
        width: 200px;
        top: 100px;
        left: 0;
    
    }.nyanMeme2 {
        position: fixed;
        width: 200px;
        top: 200px;
        right: 0;
        transform: scaleX(-1);
    
    }.snail {
        position: fixed;
        width: 250px;
        right: -150px;
        bottom: -70px;
    
        animation: snailGO 7s linear infinite;
    }
    
    @keyframes snailGO {
        0% {
            transform: translate(0,0);
        }
        100% {
            transform: translate(-1800px,0);
        }
    }
    
    
    
    /* fnsect */
    
    .fnsect {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
    } .wennnn {
        font-size: 25px;
    
        font-family: sans-serif;
        font-weight: bold;
        font-size: 3rem;
        margin: 60px 0;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #ef3550,
                     -8px 8px #f48fb1,
                     -12px 12px #7e57c2,
                     -16px 16px #2196f3,
                     -20px 20px #26c6da,
                     -24px 24px #43a047,
                     -28px 28px #eeff41,
                     -32px 32px #f9a825,
                     -36px 36px #ff5722;
        
      
    }
    
    .wennnn2 {
        font-size: 25px;
    
        font-family: sans-serif;
        font-weight: bold;
        font-size: 3rem;
        letter-spacing: 0.15rem;
        color: #fff;
        text-shadow: -4px 4px #000;
        
      
    }
    
    
    
    .info {
    
        width: 100%;
        display: flex;
        height: 300px;
    
    }.info .infoWrapper {
    
        width: 50%;
        height: 100%;
        /* background-color: yellow; */
    
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 0 0 100px;
    
    }.infoWrapper .infoBar {
    
        width: 100%;
        height: 70px;
        background-color: #43a047;
        background-color: red;
        color: yellow;
    
        font-size: 30px;
    
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    
    }.info img {
    height: 250px;
    }
    
    
    
    
    .links {
        width: 100%;
        background-color: pink;
        outline: white 4px dashed;
      
        padding: 30px 40px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    
        position: relative;
    
    }.head {
        color: red;
        font-size: 30px;
    }
    .links .linkImages {
        width: 100%;
        display: flex;
        gap: 20px;
    }.linkImages img {
        width: 100px;
    }
    
    .barcode {
        width: 150px;
        right: 50px;
    
        position: absolute;
    }
    
    
    
    
    
    
    
    /* dance */
    
    .danceComp {
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
        gap: 40px;
    }.danceComp .comp {
        width: 400px;
        /* background-color: yellow; */
    
    }.danceComp .comp img {
        height: 300px;
    }.danceComp .comp p {
        font-size: 25px;
        color: yellow;
    
    }.danceComp .comp button {
        width: 200px;
        height: 30px;
        background-color: #43a047;
    
        color: white;
        font-weight: bold;
    }
    
    
    
    
    
    
    
    
    /* chatroom */
    
    .chatroom {
        position: fixed;
        z-index: 1;
        bottom: 0;
        right: 0;
    
        width: 300px;
        height: 400px;
        background-color: rgb(164, 85, 33,0.95);
        border: 3px solid #26c6da;
    
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px;
    
    
        display: none;
    }.chatroom .h {
        font-size: 30px;
    }
    
    .chats {
        width: 100%;
        background-color: red;
        height: 70%;
    
        display: flex;
        flex-direction: column;
        gap: 5px;
        overflow: scroll;
    }.chat span {
        font-weight: bold;
    }
    
    
    .maintenance {
        background-color: pink;
        padding: 10px;
        color: black;
    }
    
    
    /* announcements */
    
    .ann {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 40px;
        margin: 0 0 50px 0;
    }
    .ann .an {
        display: flex;
        gap: 20px;
    
       
    }.an p {
        color: yellow;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }.an p span{
        color: white;
        font-size: 17px;
    }
    .an p .HOTTOPIC {
        background-color: red;
        padding: 5px;
    
    
    }
    .an img {
        width: 400px;
    }
    
    
}



.pfpOver {
    display: flex;
    align-items: center;
}
.NEWTAG {
    width: 100px;
    height: 50px;
    background-color: red;
    border-radius: 100px;

    font-size: 20px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}


.overlayApp {
    width: 100%;
    margin: 0 0 50px 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.homepage {
    width: 100%;


    display: flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;
  
    gap: 20px;

}.homepage button {
    width: 200px;
    height: 50px;
    font-size: 25px;
    background-color: gold;
}.homepage button.second {
    width: 300px;
    height: 50px;
    font-size: 25px;
    background-color: gold;
}
.topSect {
    width: 100%;


    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.homepage .topSect .before,.after {
    min-width: 45%;
    height: 100%;
    /* background-color: red; */

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    font-size: 30px;
    color: white;

    
}

.homepage .headingg {
    background-color: yellow; 
    color: black;
    padding: 10px;
}

.before img,.after img{
    height: 300px;
}

.imgADD  {
    aspect-ratio: 1/1;
    height: 300px;
    background-color: white;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

}.imgADD input  {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    
}.imgADD p {
    color: black;
}

#canvas {
    width: 300px;
    height: 300px;

    background-color: white;
}.input {
    width: 300px;
    height: 300px;

    background-color: white;
}.selectedOverlay {
    display: none;
}.selectedOverlay {
    width: 300px;
}

.imagepart {
    width: 300px;
    height: 300px;
    display: none;

}


.enter {
    display: none;
}


.homepage .topSect2 .before, .after, .overlay {
    min-width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    font-size: 30px;
    color: white;

    
}

.input {

    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}


.popupWrapper {
    width: 100%;
    height: 100vh;
    background-color: rgb(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup {
    position: fixed;
    width: 350px;
    height: 300px;

    background-color: gold;


    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    
}.popup button {
    width: 200px;
    height: 50px;
    border: 4px solid black;
    font-weight: bold;
    background-color: white;
}.popup button:hover {
    background-color: rgb(217, 217, 217);
}

.nyanMeme3 {
    position: absolute;
    width: 130px;
    bottom: 0px;
    right: 0;
    transform: scaleX(-1);

}









.library {
    width: 90%;
    background-color: pink;
    outline: 4px solid white;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 30px;
    flex-wrap: wrap;
}.library .book {
    min-width: 220px;
    height: 300px;
    background-color: black;
    outline: 4px dashed black;

    position: relative;

}.library .book:nth-child(1) {
    scale: 0.9;

}.library .book:nth-child(3) {
    scale: 0.9;

}




.book .heading {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    padding: 30px;
}

.comingSoon {
    position: absolute;
    bottom: 0;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}.comingSoon p {
    background-color: red;
    width: 200px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    color: yellow;
    padding: 10px 5px;

}.comingSoon button {
    width: 200px;
    height: 50px;
    background-color: #2196f3;
    border: 0;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}
.comingSoon button:hover {
 
    background-color: #145183;

}

.cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.25;
}


.bookWrapper {
    width: 100%;
    height: 100vh;
    position: fixed;


    background-color: rgb(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;


    display: none;


}.bookWrapper .ethGuide{
    width: 500px;
    height: 600px;
    background-color: wheat;
    outline: 10px dashed brown;

    position: relative;

    display: flex;
    flex-direction: column;

    padding: 0 20px;
    gap: 30px;
}


.step {
    display: flex;
    gap: 50px;
}



.clear {
    width: 100%;
    height: 200px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}.clear .btnHolder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}.btnHolder button {
    width: 100px;
    height: 30px;
}

.pageNumber {
    width: 100%;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;
}.pageNumber p {
    font-size: 20px;
    font-weight: bold;
    color: rgb(47, 33, 8);
    font-family: Arial, Helvetica, sans-serif;
}


.btnWrapper {
    position: absolute;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 15px;

}
.exitBtn {

    height: 50px;
    width: 350px;

    background-color: brown;
    border: 0;
    font-size:17px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}




.smhorgreatcontainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
}.smhorgreatcontainer img {
    width: 90%;
}.smhorgreatcontainer button {
    width: 400px;
    height: 50px;
    font-weight: bold;
    font-size: 22px;
}



@media only screen and (max-width: 600px) {
    .bookWrapper .ethGuide{
        width: 300px;
        height: 600px;
        background-color: wheat;
        outline: 10px dashed brown;
    
        position: relative;
    
        display: flex;
        flex-direction: column;
    
        padding: 0 20px;
        gap: 30px;
    }

    .exitBtn {

        height: 50px;
        width: 200px;
    
        background-color: brown;
        border: 0;
        font-size:17px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
    }
    
    
}




.overlaysHolder {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;


    display: none;

}.overlaysHolder .innerOverlay {
    width: 800px;
    padding: 20px;
    background-color: white;
    outline: 10px solid black;
    background-color: rgb(255, 255, 255);
    padding: 50px;
}


@media only screen and (max-width: 600px) {
    .overlaysHolder .innerOverlay {
        width: 100%;
    }
}

@media only screen and (min-width: 600px) and (max-width: 1000px) {
    .overlaysHolder .innerOverlay {
        width: 500px;
    }
}


@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    .overlaysHolder .innerOverlay {
        width: 700px;
    }
}



.innerOverlay .ovHeading {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: blue;
    font-size: 30px;
}
.overlaysSect {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.overlaysSect .ov {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.overlaysSect .ov:hover {
    scale: 1.3;
    border: 3px solid red;
}

.overlaysSect .ov img {
    height: 100px;
    

   
}



.wengameBannerWrapper {
    height: 150px;
    position: fixed;
    bottom: 20px;
    left: 20px;
   
}.wengameBannerWrapper .wengamebanner {
    width: 500px;
    height: 100%;
    border-radius: 10px;
    background-color: blue;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}.wengamebanner img:nth-child(1) {
    height: 250px;
    left: 0;
    bottom: -70px;
    position: absolute;
}.wengamebanner img:nth-child(2) {
    height: 250px;
    right: 0;
    bottom: -70px;
    position: absolute;
}
.wengamebanner p {
    font-weight: bold;
    color: white;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}.wengamebanner button {
    width: 120px;
    height: 40px;
    background-color: gold;
    outline: 3px solid black;
    border: 3px solid rgb(255, 0, 0);

    position: relative;
    z-index: 10;

}.wengamebanner button:hover {


    background-color: rgb(215, 205, 149);
  

    animation: spin 1s linear infinite;

}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@media only screen and (max-width: 600px) {
    .wengameBannerWrapper {
        height: 150px;
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 100%;

        display: none;
       
    }.wengameBannerWrapper .wengamebanner {
        width: 90%;
        height: 100%;
        border-radius: 10px;
        background-color: blue;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
}




.DRAWAPP {
    width: 100%;
    height: 200px;
    background-color: pink;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    position: relative;
}.DRAWAPP p {
    font-size: 30px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: blue;
    
    position: relative;
    z-index: 1;
}.DRAWAPP button {
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background-color: yellow;
    border: 3px solid red;
    color: black;
    outline: 3px solid black;
    padding: 20px;

    position: relative;
    z-index: 1;
}
.DRAWAPP button:hover {
    background-color: red;

}

.imgAb {
    left: 0;
    bottom: 0;
    position: absolute;
    width: 150px;
}
.imgAb2 {
    color: green;
    right: 10px;
    font-size: 17px;
    bottom: 50px;
    position: absolute;
    font-weight: bold;
}.imgAb2 span {
    color: purple;
    user-select: none;
}
.imgAb2 span:hover {
    color: red;
}