body{
    background-color: #b3c4bc;
    color:black;
    text-align:center;
    padding:40px;
}
button{
    background-color: #215a3f;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    font-size: 20px;
    width:200px;
    height:50px;
    font-weight:bold;
    margin: 4px 2px;
    border-radius:20px;
    box-shadow:gainsboro 0px 0.5px 0.5px;
}
input{
    border-width: 0px;
    border-radius:10px;
}
#courseList{
    background-color:#5d8572;
    border-color:#dce1de;
    border-width:2px;
    border-style:solid;
    padding:10px;
    margin-bottom:15px;
    border-radius:1px;
    box-shadow: gainsboro 0px 2px 2px;
}
#coursename{
    font-size:20px;
    font-weight:bold;
}
span{
    font-size:18px;
    display:flex; 
    align-items:center;
    margin-top:10px; 
    margin-bottom:10px;
    gap:8px;
}
@media (max-width:400px){
    body{
    background-color: #b3c4bc;
    color:black;
    display:flex;
    justify-content: center;
    text-align:center;
}
button{
    background-color: #287c55;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    font-weight:bold;
    margin: 4px 2px;
    border-radius:20px;
    box-shadow:gainsboro 0px 0.5px 0.5px;
}
input{
    border-width: 0px;
    border-radius:10px;
}
#courseList{
    background-color:#5d8572;
    border-color:#dce1de;
    border-width:2px;
    border-style:solid;
    padding:10px;
    margin-bottom:15px;
    border-radius:1px;
    box-shadow: gainsboro 0px 2px 2px;
}
#coursename{
    font-size:20px;
    font-weight:bold;
}
span{
    font-size:18px;
    display:flex; 
    align-items:center;
    margin-top:10px; 
    margin-bottom:10px;
    gap:8px;
}
}