* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }

header{
    background-image: url("images/download\ \(4\).jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: rgb(27, 25, 25);
    text-align: center;
    padding: 60px 0;

    position: relative;
}

header::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(4, 80, 8, 0.295);
}

header h1{
    position:relative;
    z-index:1;
}

.menu-bar { background:#0e3b0294;
            overflow:hidden; }

.menu-bar a { float:left;
              display:block;
              color:white; padding:14px 20px;
              text-decoration:none; }

.menu-bar a:hover { background:#575757; }

.container { display:flex; min-height:80vh; }

.side-menu { width:220px;
             background:#f4f4f4;
             padding:20px; }

.side-menu h3 { margin-bottom:10px; }

.compiler-btn { width:100%;
                padding:10px;
                margin-bottom:5px;
                border:none;
                background:#4CAF50;
                color:rgb(177, 63, 63);
                font-size:16px;
                cursor:pointer;
                border-radius:4px;
                text-align:left; }

.compiler-btn:hover { background:#52504e; }

.activity-list { display:none;
                 list-style:none;
                 padding-left:15px;
                 margin-bottom:15px; }
.activity-list.show { display:block; }
.activity-list li { margin-bottom:5px; }
.activity-list li a { text-decoration:none; color:#333; }
.activity-list li a:hover { color:#0c5c0fe0; }

.content { flex:1; padding:20px; background:#fff; }
.fade-in { animation: fade 0.5s ease-in-out; }
@keyframes fade { from {opacity:0;} to {opacity:1;} }

footer { background:#333;
         color:white;
         text-align:center;
         padding:15px 0; }

#grade-calculator input { padding: 5px;
                          width: 100px;
                          margin-left: 5px; }

#grade-calculator button { padding: 8px 12px;
                           margin-right: 5px;
                           background: #4CAF50;
                           color: white;
                           border: none;
                           cursor: pointer;
                           border-radius: 4px; }

#grade-calculator button:hover { background: #013804bb; }
#result4 p { margin: 5px 0; font-weight: bold; }

.dark-mode{
    background:#1e1e1e;
    color:white;
}

.dark-mode header{
    background:#222;
}

.dark-mode .menu-bar{
    background:#111;
}

.dark-mode .side-menu{
    background:#2b2b2b;
}

.dark-mode .content{
    background:#333;
}