body {
margin: 0;
padding: 0;
font-family: Inter;
}
/*.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}*/
/*.column {
display: flex;
flex-direction: column;
gap: 10px;
}*/
/*.element {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}*/
/*.centered-element2 {
grid-column: 1 / -1;
justify-self: center;
padding: 20px;
border-radius: 5px;
margin-top: 20px;
}*/
/*.centered-element {
grid-column: 1 / -1;
justify-self: center;
background-color: #e0e0e0;
padding: 20px;
border-radius: 5px;
margin-top: 20px;
}*/
/*.containerq {
display: grid;
place-items: center;
height: 100vh;
}*/
/*.contentq {
display: flex;
flex-direction: column;
align-items: flex-start;
}*/
/*.top-elementsq {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 20px;
}
.top-elementsq > div {
margin-bottom: 10px;
}*/
/*.centered-elementq {
align-self: center;
}*/

body {
margin: 0;
padding: 0;
}
.alignment-container {
/*max-width: 1200px;*/
margin: 0 auto;
padding: 0 5%;
}
.topper {
width: 100%;
/*max-width: 600px;  Adjust this value as needed */
padding: 20px 0;
margin-bottom: 20px;
/*background-color: #f8f8f8;*/
border-bottom: 1px solid #e0e0e0;
}
.topper h1 {
margin: 0;
font-size: 24px;
color: #333;
}
.debate-grid {
display: grid;
grid-auto-flow: row;
grid-template-rows: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;


width: 100%;
/*max-width: 1200px;  */
padding-left: 120px;
padding-right: 120px;
margin: 0 auto;
grid-auto-columns: minmax(250px, 1fr); 
}
/*.debate-item {
background-color: #f0f0f0;
padding: 20px;
border-radius: 8px;
text-align: center;
}*/
@media (max-width: 768px) {
.alignment-container {
padding: 0 20px;
}
}

.slider-container {
width: 300px;
margin: 20px auto;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 4px;
background: #e0e0e0;
outline: none;
opacity: 0.7;
transition: opacity .2s;
margin: 20px 0;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3498db;
cursor: pointer;
transition: background 0.3s;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #3498db;
cursor: pointer;
transition: background 0.3s;
}
.slider::-webkit-slider-thumb:hover,
.slider::-moz-range-thumb:hover {
background: #2980b9;
}
.slider-labels {
display: flex;
justify-content: space-between;
margin-top: 10px;
color: #555;
font-size: 14px;
}
.slider-value {
text-align: center;
font-size: 16px;
font-weight: bold;
color: #333;
margin-top: 10px;
}
.debate-grid .div-2 {
min-height: 480px;
width: 100%;
}