body {
    margin: 24px;
    /* background-image: url(../img/bg.png); */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-color: #00b140;
    font-family: arial, sans-serif;
    font-size: 14px;
  }

  h1 {
    font-size: 35px;
    font-weight: normal;
    margin-top: 5px;
  }

    .widget_big {
    position: fixed;
    color: white;
    background-color: #ffffff22;
    font-size: 30px;
    font-weight: normal;
    width: 400px;
    height: 400px; 
}

.widget_small {
    position: fixed;
    color: white;
    background-color: #ffffff22;
    font-size: 30px;
    font-weight: normal;
    width: 400px;
    height: 150px; 
}
    
.position1 { 
    left: 24px;
    top: 24px;
}

.position2 {
    text-align: center;
    top: 24px;
    left: 50%;
    transform: translate(-50%, 0);
}

.position3 { 
    text-align: right;
    right: 24px;
    top: 24px;
}

.position4 { 
    text-align: right;
    top: 50%;
    right: 24px;
    transform: translate(0, -50%);
}

.position5 { 
    text-align: right;
    right: 24px;
    bottom: 24px;
    color: white;
}

.position6 { 
    text-align: center;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 0);
}

.position7 { 
    left: 24px;
    bottom: 24px;
}

.position8 { 
    top: 50%;
    left: 24px;
    transform: translate(0, -50%);
}

.position9 { 
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



.course_widget { 
    width: 700px;
}