*{box-sizing:border-box;margin:0;padding:0;font-family:Montserrat,sans-serif}body::-webkit-scrollbar{display:none}#head{padding:20px;font-family:Montserrat,sans-serif;color:#fff;font-size:24px;font-weight:700;text-align:center}#container::-webkit-scrollbar{display:none}

#container{
    background-color:#F7F8FA;
    border: 2px solid white;
    box-shadow: 0 4px 8px 0 rgba(0, 35, 102, 0.2);
    padding:50px 30px;
    width:800px;
    height:auto;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    border-radius:12px;
    margin:0 auto
}

form{display:flex;flex-direction:column;margin:0}form input{padding:20px;color:black;margin:10px;border-radius:12px;background-color:#e2dede;outline:0;border:1px solid #000;width:750px}label{font-size:16px;font-family:Montserrat,sans-serif;font-weight:600;color:black;margin-left:8px}#gen-btn{background:linear-gradient(90deg,#9916ff,#424fc2 104.62%);padding:13px 30px;font-weight:700;transition:all 1s ease;color:#fff;border-color:transparent;display:inline-block;width:200px;justify-items:center;margin:14px auto}#gen-btn:hover{background-color:#cc2f03;opacity:.6;color:#fff;cursor:pointer}#copy-btn{width:80px;margin:0 auto;border-color:transparent;cursor:pointer;background-color:#0140fe;padding:10px;position:relative;bottom:43px;color:#fff;font-weight:600;font-size:bold;border-radius:10px;display:none}#copy-btn:hover{background-color:#05fbd6}textarea{background-color:#28273d;border-radius:12px;border-color:transparent;color:#fff;resize:none;padding:20px;margin-top:10px;display:none; width: 95%; margin-left: 20px}#copy h5{color:#fff;margin:40px;text-align:center}@media screen and (max-width:961px){#container{width:100vw;margin:0 auto;border-radius:0;justify-content:center}textarea{height:390px}form input{width:300px}}

body{
    background-color: #F7F8FA;;
}

/************ Square *************/

.square {
    transition: 1s;
    margin-left: 150px;
    margin-top: 20px;
    border: 5px solid #000;
    letter-spacing: normal;
    line-height: normal;
    /* Color & Background */
    color: rgb(0, 0, 0);
    /* Box */
    height: 50px;
    width: 50px;
    /* Positioning */
    position: relative;
    /* Effects */
    transform: matrix(6.12323e-17, -1, 1, 6.12323e-17, 0, 0);
    transition: transform 0.4s ease-in-out 0s;
    box-sizing: content-box;
    margin-bottom: 10px;
    border-radius: 10px;
}

.square:hover {
    transition: 0.5s;
    transform: rotate(-180deg);
}

@media screen and (max-width: 736px) {
    .square {
        margin-left: -150px;
        margin-bottom: 20px;
    }
}