@font-face {
    font-family: "chopsic";
    src: url("Chopsic.ttf");
}

body {
    margin: 0;
    padding: 0;
    background-image: url("bg.gif");
    overflow-y: hidden;
    overflow-x: hidden; 
}

.btn img{
        border: 3px solid whitesmoke;
}
@media screen and (width:280px){
   #canvas{
    height: 250px;
    width:250px;
   }
   
   .group {
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   .main-container {
       font-family: chopsic, serif;
       font-size: 4vh;
       justify-content: center;
       align-items: center;
       color: antiquewhite;
       width: 100vw;
       height: 75vh;
       border: black 1px solid;
       display: flex;
   }
    
    .btn-container {
            display: inline-block;
            justify-content: center;
        }

   .btnbox {
       display: flex;
       width: 100vw;
       justify-content: center;
   }

   .btn {
       background-color: transparent;
       padding: 15px;
       justify-content: center;
       align-items: center;

   }
}

@media screen and (min-width:281px) and (max-width:500px) {
    #canvas {
        height: 300px;
        width: 300px;
    }

    .group {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .main-container {
        font-family: chopsic, serif;
        font-size: 4vh;
        justify-content: center;
        align-items: center;
        color: antiquewhite;
        width: 100vw;
        height: 75vh;
        border: black 1px solid;
        display: flex;
    }

    .btn-container {
        display: inline-block;
        justify-content: center;
    }

    .btnbox {
        display: flex;
        width: 30vw;
        padding-left: 140px;
        justify-content: center;
    }

    .btn {
        background-color: transparent;
        padding: 15px;
        justify-content: center;
        align-items: center;

    }

}

@media screen and (min-width:501px) and (max-width:850px) {
    #canvas {
        height: 500px;
        width: 500px;
    }

    .group {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .main-container {
        font-family: chopsic, serif;
        font-size: 4vh;
        justify-content: center;
        align-items: center;
        color: antiquewhite;
        width: 100vw;
        height: 75vh;
        border: black 1px solid;
        display: flex;
    }

    .btn-container {
        display: inline-block;
        justify-content: center;
    }

    .btnbox {
        display: flex;
        width: 60vw;
        padding-left: 140px;
        justify-content: center;
    }

    .btn {
        background-color: transparent;
        padding: 15px;
        justify-content: center;
        align-items: center;

    }

}

@media screen and (min-width:851px) and (max-height:850px) {
    #canvas {
        height:600px;
        width: 600px;
    }

    .group {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0px;
    }

    .main-container {
        font-family: chopsic, serif;
        font-size: 4vh;
        justify-content: center;
        align-items: center;
        color: antiquewhite;
        width: 50vw;
        height: 90vh;
        padding: 80px;
        border: black 1px solid;
        display: flex;
    }

    .btn-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height:90vh;
    }

    .btnbox {
        display: flex;
        justify-content: center;
    }

    .btn {
        background-color: transparent;
        padding: 15px;
        justify-content: center;
        align-items: center;

    }

}

@media screen and (min-width:851px) and (min-height:851px) {
    #canvas {
        height: 600px;
        width: 600px;
    }

    .group {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .main-container {
        font-family: chopsic, serif;
        font-size: 4vh;
        justify-content: center;
        align-items: center;
        color: antiquewhite;
        width: 100vw;
        height: 75vh;
        border: black 1px solid;
        display: flex;
    }

    .btn-container {
        display: inline-block;
        justify-content: center;
    }

    .btnbox {
        display: flex;
        width: 60vw;
        padding-left: 140px;
        justify-content: center;
    }

    .btn {
        background-color: transparent;
        padding: 15px;
        justify-content: center;
        align-items: center;

    }

}