/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* הפונט לכותרת*/
@import url('https://fonts.googleapis.com/css2?family=Poller One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press Start 2P&display=swap');




body {
    background-color: #ffffff;
    background-image: url('futa.jpg'); 
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    font-family: 'Comic Sans MS', cursive, sans-serif; /* הפונט לשאר האתר חוץ מהכותרת */
    margin: 0;
    padding: 20px;
}

#container {
    max-width: 900px;
}

/* כותרת flutter */
header h1 {
  font-family: 'Poller One' , serif;
    font-size: 80px;
    color: #df2258; 
    margin: 0;
    letter-spacing: 5px;
}

/* כותרת moon */
.moon-text {
  font-family: 'Poller One' , serif;
    font-size: 80px;
    color: #de2258;
    margin-top: -20px;
    margin-left: 90px;
}


.welcome-banner {
    border: 2px solid #f9e2a7;
    border-radius: 50px;
    padding: 5px 30px;
    display: inline-block;
    color: #f9e2a7;
    font-style: italic;
    margin-top: 20px;
    white-space: nowrap;     
    overflow: hidden;        
    position: relative;
}

.welcome-banner span {
    display: inline-block;
    padding-left: 100%;      
    animation: moveText 20s linear infinite; 
}


/* Layout Flexbox */
main {
    display: flex;
    margin-top: 30px;
    gap: 20px;
}

/* Sidebar (Tall Box) */
.sidebar {
    width: 400px;
    height: 900px;
    border: 3px solid #f5b198;
    border-radius: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.7); /* Slightly transparent to see BG */
    gap: 20px;
}

/* Content Boxes (Horizontal) */
.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

.box {
    height: 125px;
    border: 3px solid  #de2258; /* Pinkish-purple border */
    border-radius: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.7);
}

.song{
  height: auto;
    border: 3px solid #f499cb; /* Pinkish-purple border */
    border-radius: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.7);
    min-height: 180px;
    padding-bottom: 20px;
}

.box2 {
    height: 180px;
    border: 3px solid #f499cb; /* Pinkish-purple border */
    border-radius: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.7);

}
.todo {
    height: 180px;
    border-radius: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.7);
    font-family: 'Press Start 2P' , serif;
    font-size: 14px;
    color: #f9e2a7;   
}

@keyframes moveText {
    0%   { transform: translateX(-100%); }   /* Start at the beginning */
    100% { transform: translateX(100%); } /* Slide all the way to the left */
}

/* This makes the container hold the video correctly */
.video-container {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* This maintains the 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 10px; /* Optional: matches your box curves */
}

/* This makes the actual video fill that container exactly */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.newpage {
    height: 125px;
    border: 3px solid  #fff; /* Pinkish-purple border */
    border-radius: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.7);
}