body{
    background-color: #f0f7ff !important;
}

.main-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.blockly{
    height: 400px; width: 80vw;
}

.canvas{
    width: 80vw;
    height: 400px;
    padding: 20px;
}

.canvas-main{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.boxes{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.padding{
    padding: 20px;
}

.yt-card{
    display: flex;
    flex-direction: column;
}

.side-padding{
    padding-left: 20px;
    padding-right: 20px;
}

.mb{
    margin-bottom: 20px;
}

.mb-big{
    margin-bottom: 50px;
}


.russo{
    font-family:russoOne;
}

.font{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.font-20{
    font-size: 20px;
}

.color-text{
    color: #76D4E7 !important;
}

.background-color{
    background-color: #222222;
}

.background-light{
    background-color: #abd3ee;
}

.button{
    background-color: rgb(232, 96, 46) !important;
    color: white !important;
}

.white{
    color: white;
}

.orang{
    color: rgb(232, 96, 46);
}


@font-face {
    font-family: russoOne;
    src: url('./RussoOne-Regular.ttf');
}