body {
  font-family: Helvetica;
  background-color: white;
  color: black;
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  padding-left: 20px;
  padding-right: 20px;
}

h1 {
  font-size: 3rem;
  font-weight: 800;
  color: darkblue;            
  border-bottom: 4px solid black; 
  padding-bottom: 10px;
  margin-top: 0px;
  margin-bottom: 20px;
}

h2 {
  font-size: 1.8rem;
  color: darkblue;
  margin-top: 40px;
  margin-bottom: 10px;
}

h3 {
  font-size: 1.4rem;
  color: black;
  margin-top: 20px;
  margin-bottom: 5px;
}

.langertext {
  font-size: 1.15rem;
  line-height: 1.7;          
  color: black;            
  margin-bottom: 40px;       
  text-align: justify;       
}

p {
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 5px;
  margin-bottom: 5px;
}

.spec-box {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.spec-box:nth-of-type(2) {
  margin-right: 0;
}

img {
  width: calc(50% - 10px);
  height: 260px;
  border-radius: 12px;       
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); 
  object-fit: cover;
  margin-top: 30px;
  margin-bottom: 30px;
}

img:nth-of-type(1) {
  margin-right: 15px;
}

body.dark-mode {
  background-color: #121212;
  color: white;
}
  
body.dark-mode h1,
body.dark-mode h2 {
  color: darkblue;
}

body.dark-mode h3 {
  color: white;
}

body.dark-mode .spec-box p {
  color: white;
}

body.dark-mode .langertext {
  color: white;
}

body.dark-mode #theme-toggle {
  background-color: white;
  color: black;
}

@keyframes continuous-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes flash-colors {
  0% { background-color: purple; }   
  25% { background-color: indigo; }  
  50% { background-color: magenta; }  
  75% { background-color: crimson; }
  100% { background-color: darkred; }
}

body.party-mode {
  animation: flash-colors 1.5s infinite linear; 
}

img.spinning {
  animation: continuous-spin 2s infinite linear;
  display: block;
  margin: 20px auto;
  float: none; 
}

.top-menu {
  background-color: skyblue;
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 25px;
  display: flex;           
  gap: 10px;
}

#darkmode, #party {
  font-family: Helvetica;
  padding: 10px 15px;
  background-color: darkblue;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 0;
}

body.dark-mode .top-menu {
  background-color: #1a1a1a;
  font-family: Helvetica;
  color: white;
}

#calculator {
  background-color: darkblue;
  border-radius: 20px;             
  font-family: Helvetica;
  margin: 15px auto;             
  padding: 15px;
  width: 97%;   
  box-shadow: 0 8px 24px rgba(13, 71, 161, 0.15); 
}

#calculator h2 {
  color: white;
}

#calculator label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

#aircraft-model, #payload {
  padding: 8px; 
  border-radius: 8px; 
  border: 2px solid steelblue; 
  background-color: white; 
  color: white; 
  margin-right: 10px;
}

#compute {
  background-color: darkblue;   
  color: white;
  border: 2px solid steelblue;
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 10px; 
  cursor: pointer;
}

#calculator label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: white;
}

#aircraft-model {
  padding: 8px; 
  border-radius: 8px; 
  border: 2px solid steelblue; 
  background-color: white; 
  color: black;
  margin-right: 10px;
}

#aircraft-model option {
  color: black;
  background-color: white;
}

#compute:hover {
  background-color: skyblue;
}

#payload {
  padding: 8px;
  border-radius: 8px; 
  background-color: white; 
  color: black;
}