@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;700&display=swap');

.solar-system-container {
    position: relative;
    display: flex;
    width: 100%;
    height: 500px;
    margin-top: 5px;
}

/* Left panel */
.sidebar {
    width: 80px;
    top: -15px;
    
    background: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 10px 0;
    position: relative;

    border-radius: 10px;

    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6);
}

.sidebar {
    background: linear-gradient(
        to bottom,
        #77dd77 0%, 
        #ffdb58 33%,
        #ff914d 66%,
        #add8e6 100%
    );
}

.season-tab {
    color: white;
    font-size: 20px;
    cursor: default;
    user-select: none;
}

/* Earth button */
.earth {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #4ca3dd, #1b3d5f);
    position: absolute;
    left: 10px;
    cursor: grab;
    transition: top 0.3s ease;
    touch-action: none;
}

/* Content area */
.content {
    position: relative;
    flex: 1;
    display: flex;
    /* background: lightblue; */
    transition: background 1s ease;

    border-radius: 16px;
}

.season-table-header div {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 25px;
}

.text-area {
    flex: 2;
    padding: 20px;
    color: black;
    font-size: 24px;
    opacity: 1;
    transition: opacity 0.5s ease;
    width: 1200px;

    font-family: 'Be Vietnam Pro', sans-serif;

    overflow-y: auto;
}


.text-area::-webkit-scrollbar {
    width: 8px;
}

.text-area::-webkit-scrollbar-track {
    background: transparent;
}

.text-area::-webkit-scrollbar-thumb {
    background-color: rgba(100, 100, 100, 0.4);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.text-arean::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 100, 100, 0.7);
}

.image-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.image-area img {
    max-width: 100%;
    border-radius: 10px;
}

/* Seasons colors */
/* .spring {
    background: #77dd77;
}

.summer {
    background: #ffdb58;
}

.autumn {
    background: #ff914d;
}

.winter {
    background: #add8e6;
} */

/* Start: Columns content */
.season-table-header, 
.season-table-row {
  display: flex;
  padding: 4px 0;
}

.season-table-header {
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: 6px;
  margin-bottom: 8px;
  font-size: 18px;
}

.season-table-row {
  border-bottom: 1px solid #eee;
}

.season-table-cell {
  /* Base flex, overridden per column */
  padding: 0 6px;
}

.col-name {
  flex: 3;
}

.col-time {
  flex: 1.5;
}

.col-location {
  flex: 2;
}

.current-event {
  background-color: #fff3cd; /* light yellow highlight */
  animation: highlightPulse 1.5s infinite alternate;
  border-radius: 8px;
  margin: 10px 0px 10px 0px;
}

.ss-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* keep it behind content */

    transform: scaleY(-1);
    opacity: 0.6;

    background-color: white;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease; /* fade effect */

    background-color: rgba(0, 0, 0, 0.1); /* black overlay */
    background-blend-mode: darken;        /* blend with image */
}

.spring-bg { background-image: url('../../images/Spring.png'); }
.summer-bg { background-image: url('../../images/Background2.png'); }
.autumn-bg { background-image: url('../../images/Autumn.png'); }
.winter-bg { background-image: url('../../images/Winter.png'); }

.bg.visible {
    opacity: 1;
}

@keyframes highlightPulse {
  from { background-color: #fff3cd; }
  to { background-color: #ffe8a1; }
}
/* End: Column contents */

@media screen and (max-width: 767px) {
    .solar-system-container {
        height:1200px;
    }
}