@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&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');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "DM Sans", "Poppins", sans-serif;
}

:root{
    --grad0: linear-gradient(236deg,rgba(31, 174, 222, 1) 0%, rgba(43, 137, 224, 1) 50%, rgba(46, 201, 147, 1) 100%);;
    --grad1: linear-gradient(48deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
    --grad2: #298df2;
    --grad3: linear-gradient(236deg,rgba(42, 123, 155, 1) 0%, rgba(43, 224, 173, 1) 50%, rgba(46, 201, 67, 1) 100%);
    --grad4: linear-gradient(236deg,rgba(42, 140, 155, 1) 0%, rgba(43, 224, 173, 1) 50%, rgba(46, 124, 201, 1) 100%);
    --grad5: linear-gradient(48deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
    --grad6: linear-gradient(48deg,rgba(42, 123, 155, 1) 0%, rgba(43, 224, 173, 1) 50%, rgba(46, 201, 67, 1) 100%);
    --grad7: linear-gradient(48deg,rgba(42, 140, 155, 1) 0%, rgba(43, 224, 173, 1) 50%, rgba(46, 124, 201, 1) 100%);
    --grad8: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
    --grad9: linear-gradient(236deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}

body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #298df2;
}


.nor-btn, .nor-btn-b{
    width: 90px;
    height: 35px;
    margin: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border: none;
    outline: none;
    border-radius: 3px;
    background: #010818;
    cursor: pointer;
    transition: .2s;
}

.nor-btn-b{
    background: #298df2;
}

.nor-btn:hover, .nor-btn-b:hover{
    opacity: .9;
}

.nor-btn:active, .nor-btn-b:active{
    scale: .95;
}