/*
   JavaScript 7th Edition
   Project 1
   Common Styles
   Author: Peter Younan
   Date: March 3, 2026
*/

* {
   box-sizing: border-box;
}

body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   line-height: 1.6;
   margin: 0;
   padding: 0;
   background-color: #0b0d17;
   color: #d0d6f9;
}

header {
   background-color: #151923;
   padding: 20px;
   text-align: center;
   border-bottom: 1px solid #383b4b;
}

header h1 {
   margin: 0;
   color: #ffffff;
   letter-spacing: 2px;
}

nav {
   background-color: #151923;
   padding: 10px;
   text-align: center;
   position: sticky;
   top: 0;
   z-index: 100;
}

nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

nav ul li {
   display: inline;
   margin: 0 15px;
}

nav ul li a {
   color: #ffffff;
   text-decoration: none;
   font-weight: bold;
   text-transform: uppercase;
   font-size: 0.9em;
}

nav ul li a:hover {
   color: #d0d6f9;
   border-bottom: 2px solid #ffffff;
}

article {
   max-width: 900px;
   margin: 40px auto;
   padding: 20px;
   background-color: rgba(21, 25, 35, 0.8);
   border-radius: 10px;
}

h2 {
   color: #ffffff;
   border-bottom: 1px solid #383b4b;
   padding-bottom: 10px;
}

p {
   margin-bottom: 20px;
}

.image-container {
   text-align: center;
   margin: 30px 0;
}

.image-container img {
   max-width: 100%;
   height: auto;
   border-radius: 5px;
   box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

footer {
   text-align: center;
   padding: 20px;
   margin-top: 40px;
   background-color: #151923;
   border-top: 1px solid #383b4b;
}

footer p {
   margin: 5px 0;
   font-size: 0.8em;
}

footer a {
   color: #d0d6f9;
   text-decoration: none;
}

footer a:hover {
   text-decoration: underline;
}

/* Calculator Styles */
.calc-container {
   background: #1c222d;
   padding: 20px;
   border-radius: 8px;
   margin-top: 20px;
}

.calc-row {
   margin-bottom: 15px;
}

.calc-row label {
   display: block;
   margin-bottom: 5px;
}

.calc-row input {
   width: 100%;
   padding: 8px;
   border-radius: 4px;
   border: 1px solid #383b4b;
   background: #0b0d17;
   color: #fff;
}

.calc-row button {
   padding: 10px 20px;
   background: #4c5fd5;
   color: #fff;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

.calc-row button:hover {
   background: #3a4bb1;
}

#calcResult {
   font-weight: bold;
   color: #fff;
   margin-top: 10px;
}

/* News Styles */
.news-item {
   border-left: 4px solid #4c5fd5;
   padding-left: 15px;
   margin-bottom: 25px;
}