/* Style Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f1efec; 
    color: #f1efec; 
    line-height: 1.5;
    padding: 20px;
}

.logo-container {
    text-align: left;
    padding: 10px;
}

.logo {
    width: 150px; /* or the width you prefer */
    height: auto;
}

.course-wrapper {
    background-color: #0a1e59;
    border-radius: 8px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), 
    20px 20px 40px rgba(0, 0, 0, 0.2), 
    30px 30px 60px rgba(0, 0, 0, 0.2),
    40px 40px 80px rgba(0, 0, 0, 0.2),
    50px 50px 100px rgba(0, 0, 0, 0.2),
    60px 60px 120px rgba(0, 0, 0, 0.2);
    padding: 20px;
    max-width: 800px;
    margin: 40px auto;
    text-align: center;
}


/* Header */
.course-header h1 {
    margin-bottom: 30px;
    color: #f1efec;
}

/* Content */
.course-content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 20px;
}
/* buttons */
.button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    gap: 20px;
}

.button-container button {
    background: #304fff;
    border: 2px solid #304fff;
    border-radius: 4px;
    padding: 10px 20px;
    color: #f1efec;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
    
}

.button-container button:hover {
    background: #ffcc00;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 4px;
}