/* ---------- Global ---------- */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root { /* ----- Common Variables ----- */
    
    /* --- General Stylings --- */
    --border: 2px solid white;
    --box-shadow: 
        2px 2px 0px 0px var(--reddark),
        3px 3px 0px 0px var(--yellow);
    --gap: 10px;
    
    /* --- Colors --- */
    --yellow: #FFD240;
    --yellowdark: #E2B21F;
    --yellowbright: #F9F14F;
    --red: #C80027;
    --reddark: #8E0000;
    
    /* --- Font Effects --- */
    --textred:
        1px 1px var(--red), 2px 2px var(--reddark), 3px 3px var(--reddark);
    --textyellow:
        1px 1px var(--yellowdark), 2px 2px var(--reddark), 3px 3px var(--reddark);
    
    /* --- Animations --- */
    --swirl: Swirl 2s linear infinite;
    --marquee: Marquee 14s linear infinite;
    --transition: all 0.4s ease;
    
    /* --- Cursors --- */
    --cursor: url(../images/pointer/EstrelaMouse.png) 3 5, auto;
    --pointer: url(../images/pointer/EstrelaClique.png) 3 5, pointer;
}

@font-face { /* ----- Main Header Font -----*/
    font-family: YellowSign;
    src: url(../fonts/edo.ttf);
}

@font-face { /* ----- Handdraw Font ----- */
    font-family: Poseidon;
    src: url(../fonts/poseidon.woff);
}

html, body { /* ----- Page General ----- */
    height: 100vh;
    width: 100vw;
    
    font-family: Garamond, serif; /* ----- General Font -----*/
    color: #fff;
    text-shadow: var(--textred);
    text-align: center;
    line-height: 1.2;

    overflow-x: hidden;
    overflow-y: scroll;
    
    cursor: var(--cursor);
}


body p { /* ----- Text Shadow ----- */
    font-weight: bold;
    text-shadow: var(--textyellow);
}

p a {
    color: var(--yellowbright)
}

/* ---------- Screen Wrapper ---------- */
.screen_wrapper {
  height: 100%;
  width: 100%;
    
  margin: 0;
  margin-bottom: 500px;
}

/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* -------------------- Mobile (<1200px width) -------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

/* ---------- Background ---------- */
body { 
    background-image: url(../images/bg/sky.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--yellow);
}

/* ---------- Text and Links ---------- */
h1 {
    font-family: "YellowSign";
    color: var(--yellow);   
    text-shadow: 2px 2px var(--red), 4px 4px var(--reddark);
}

h2 {
    color: #fff;
    font-weight: bold;
    text-shadow: var(--textyellow);
}

h3 {
    font-weight: bold;
    text-shadow: var(--textyellow);
}

a {
    color: var(--yellow);
    font-weight: bold;
    text-decoration: underline; 
    
    transition: var(--transition);
}

strong {
    color: var(--yellow);
    font-weight: bolder;
}

/* ---------- Mobile Landing ---------- */
.landing_mobile {
    display: block;
    justify-content: center;
    align-items: center;
    
    width: 100%;  
    height: 100%;
    
    padding: 3.5rem 2rem;

    border: var(--border);
}

.landing_mobile img{
    max-width: 200px;
    gap: 1rem;
}

/* ---------- Hovering Spans ---------- */
.hovering_span {
    display: flex;
    position: absolute;
    width: 100%;

    padding: 0.5rem;
    border: var(--border);
    background: black;
}

#hovering_hi {
    justify-content: center;
    align-items: end;
    
    bottom: 92%;
    left: -35%;
    
    height: 85px;
    
    z-index: 1;
    
    transform: rotate(-25deg);
}

#hovering_page {
    flex-direction: column;

    top: 10%;
    right: -5%;
    
    width: 110%;   
    
    padding: 0.5rem 2rem;
}

#hovering_there { 
    right: -62%;
    
    gap: 6px;
    
    font-size: 16px;
}

#hovering_car {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    top: 55%;
    right: -5%;
    
    width: 110%;
    
    gap: 0.2rem;
}

#hovering_here {
    justify-content: center;
    align-items: top;
    
    top: 80%;
    right: -25%;
    
    height: 300px;
    width: 130%;
    
    gap: 6px;
    
    transform: rotate(-25deg);
}

/* /|\------------------------------------------------------------------------ */
/* ------/|\------------------------------------------------------------------ */
/* ------------/|\------------------------------------------------------------ */
/* ------------------/|\------------------------------------------------------ */
/* ------------------------/|\------------------------------------------------ */
/* ------------------------------/|\------------------------------------------ */
/* ------------------------------------/|\------------------------------------ */
/* ------------------------------------------/|\------------------------------ */
/* ------------------------------------------------/|\------------------------ */
/* ------------------------------------------------------/|\------------------ */
/* ------------------------------------------------------------/|\------------ */
/* ------------------------------------------------------------------/|\------ */
/* ------------------------------------------------------------------------/|\ */

/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* --------------------- Desktop Small (1200px> width) --------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) {
   
/* ---------- Background ---------- */
body { 
    background-size: cover;
}

/* ---------- Text and Links ---------- */
a {
    color: #fff;
    text-decoration: none;
    transition: var(--transition);
}
    
a:hover {
    color: var(--yellow);
    text-decoration: underline dotted;
    font-weight: bold;
    cursor: var(--pointer);
}   

/* ---------- Mobile Landing ---------- */
.landing_mobile {
    display: none;
}
    
/* ------------------------------ */   
/* ---------- Main Page --------- */    
/* ------------------------------ */ 
.big_container {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    
    max-width: 904px;
    
    margin: 1% auto;
    
    padding: var(--gap);
    box-shadow: 0px 0px 50px -10px var(--yellowdark);
    
    border: 4px solid white;
    border-radius: 15px;
    background-image: url(../images/bg/containeryellow.png);
}
/* ---------- Main Header ----------*/
#main_header {    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    height: 150px;
    width: 100%;
    
    gap: 10px;
    padding: 20px;
    border-top: var(--border);
    border-left: var(--border);
    border-right: var(--border);
    border-radius: 10px 10px 0 0;
    box-shadow: var(--box-shadow);
    
    background: black;
    background-image: url(../images/bg/containerred.png);
    
    font-size: 2.4rem;
}  
       
.marquee { /* ----- Text Scrolling ----- */
    display: flex;
    flex-direction: row;
    width: 100%; 
    
    padding: 1px;
    margin-top: -20px;
    border: 2px solid white;
    border-top: none;
    border-bottom: none;
    background-image: url(../images/bg/containerred.png);
    box-shadow: var(--box-shadow);
    
    font-size: 1.2rem;
    
    white-space: pre;
    overflow: hidden;
    }
    
.marquee p {
    color: #fff;
    text-shadow: 1px 1px var(--red), 2px 2px var(--reddark);
    
    animation: var(--marquee);
}
    
@keyframes Marquee {
    from {
        transform: translateX(0%);
    }    
    to {
        transform: translateX(-100%);
    }
}
       
/* ---------- Main Nav ----------*/    
#main_nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
       
    height: 40px;
    width: 100%;
    
    border: var(--border);
    background: black;
    box-shadow: var(--box-shadow);
    
    font-size: 1.3rem;
    font-weight: bold;
    text-shadow: 1px 1px var(--reddark), 2px 2px var(--red); 
} 
    
#nav_list ul {
    display: flex;
    flex-direction: row;
    
    max-height: 100px;
        
    gap: 2.4rem;
}
    
a[aria-current="page"] {
    text-shadow: 1px 1px var(--reddark), 2px 2px var(--yellow), 3px 3px var(--yellowdark);
    margin-left: 8px;
}
    
li[aria-current="page"] {
    list-style: none;
}    

li[aria-current="page"]::before {
    display: inline-block;
    content: "\AA5C";
    text-shadow: 1px 1px var(--reddark), 2px 2px var(--yellow), 3px 3px var(--yellowdark);
    
    transition: var(--transition);
}
    
li[aria-current="page"]:hover::before, li[aria-current="page"]:hover a[aria-current="page"] {
    color: var(--yellow);
    text-shadow: 1px 1px var(--red), 2px 2px var(--reddark), 3px 3px var(--reddark);

    animation: var(--swirl);
}    

#nav_list li {
    transition: var(--transition);       
    }  
    
#nav_list li:hover {
    text-shadow: 1px 1px var(--red), 2px 2px var(--reddark), 3px 3px var(--reddark);
    transform: scale(1.1);
}
    
#nav_list li:hover::marker {
    color: var(--yellow)
}       

#nav_list li:active {
    animation: popin 0.5s ease-in-out;    
}
 
@keyframes Swirl { /* --- Swirl Animation --- */
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}    
    
    
/* ---------- Wrappers and Headers ----------*/
.row_wrapper { /* ----- Control Rows ----- */
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
        
    width: 100%;
    max-height: 500px;
    
    gap: var(--gap);
    
    font-size: 0.9rem;
}
   
.content_wrapper { /* ----- Wrapsl Header+Container ----- */
    display: flex;
    flex-direction: column;
    justify-content: center;  
}
    
.vertical_content_wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0;        
}    
    
.header {
    display: flex;
    align-items: center;

    min-width: fit-content;
    height: 40px;
    
    padding: 10px;
    margin-top: var(--gap);
    border-top: var(--border);
    border-left: var(--border);
    border-right: var(--border);
    box-shadow: var(--box-shadow);
    
    font-size: 0.9rem;
    background: linear-gradient(135deg, black, var(--yellowdark) 33%, var(--yellowbright) , var(--yellowdark) 66%, black);    
}
    
.container {  
    height: 100%;
    
    padding: 10px;
    border: var(--border);
    background: black;
    background-image: url(../images/bg/containerred.png);
    box-shadow: var(--box-shadow);    
}

/* ------------------------------ */   
/* ---------- First Row --------- */    
/* ------------------------------ */   
    
/* ---------- Yellow Sign ---------- */    
#il_header {
   width: 250px;
   gap: 20px;     
}

#il_header::after{ /* ----- ꩜ U+AA5C ----- */
    content: "\AA5C";
    font-size: 1.4rem;

    transform: rotate(205deg);
    
    animation: var(--swirl);
    animation-play-state: paused;
}
    
#il_container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;  
    
    padding: 20px;
}
    
:has(> #il_container:hover) > #il_header::after, #il_header:hover::after{ /* --- Animates Header --- */
    animation-play-state: running;
}
    
#post_it {
    display: flex;
    position: relative;
    justify-content: center;
    
    height: 190px;
    width: 190px;
    
    background: 
        linear-gradient(-2deg,
        var(--yellowbright) 0px, var(--reddark) 0px, var(--yellowbright) 2px,
        var(--yellowbright) 15px, var(--reddark) 15px, var(--yellowbright) 16px,
        var(--yellowbright) 30px, var(--reddark) 30px, var(--yellowbright) 31px,
        var(--yellowbright) 45px, var(--reddark) 45px, var(--yellowbright) 46px,
        var(--yellowbright) 60px, var(--reddark) 60px, var(--yellowbright) 61px,
        var(--yellowbright) 75px, var(--reddark) 75px, var(--yellowbright) 76px,
        var(--yellowbright) 90px, var(--reddark) 90px, var(--yellowbright) 91px,
        var(--yellowbright) 105px, var(--reddark) 105px, var(--yellowbright) 106px,
        var(--yellowbright) 120px, var(--reddark) 120px, var(--yellowbright) 121px,        
        var(--yellowbright) 135px, var(--reddark) 135px, var(--yellowbright) 136px,         
        var(--yellowbright) 150px, var(--reddark) 150px, var(--yellowbright) 151px,         
        var(--yellowbright) 165px, var(--reddark) 165px, var(--yellowbright) 166px,         
        var(--yellowbright) 180px, var(--reddark) 180px, var(--yellowbright) 181px, 
        var(--yellowbright) 195px, var(--reddark) 195px, var(--yellowbright) 197px);
    transform: rotate(-5deg);    
}    
    
#YellowSign1 {
    position: absolute;
    height: 200px;   
    
    transition: var(--transition);
    transform: rotate(-4deg) translateY(-8px);
} 
    
#YellowSign1:hover {
    transform: scale(1.04) translateY(-8px);
}    
    
/* ---------- Website Description ---------- */
#descprition_header {
    justify-content: center;     
}  

#descprition_header::before {
    content: "▞ ▛ ▚◼▝ ";
    
    margin-right: 5px;
  
    font-size: 1rem;    
}  
    
#descprition_header::after {
    content: " ▖ ▚ ▘ ⯀ ■";

    margin-left: 5px;
    
    font-size: 1rem;    
}    
    
#description_container {
    display: flex;
    flex-direction: column;
    text-align: start;
    
    gap: 10px;
    font-style: italic;
}  
    
#description_horizontal { /* ----- Wraps Description+Poem ----- */
    display: flex;
}
      
#description {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    text-align: left;
   
    white-space: pre-line;
}
    
#description_poem {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    text-align: right;
    
    gap: 25px;
    
    color: var(--yellow);   
    
    white-space: nowrap;
}   
    
#description_poem h3, h4 { /* ----- Poem size ----- */
    font-size: 0.69rem;
}

/* ---------- Update List ---------- */
#update_header {
    width: 250px;
    justify-content: flex-end;
    gap: 118px;
}    
    
#update_header::before{ /* ----- ꩜ U+AA5C ----- */
    content: "\AA5C";
    font-size: 1.4rem;
    
    transform: rotate(45deg);
    
    animation: var(--swirl);
    animation-play-state: paused;
}
    
#update_container p {
    position: relative;
    
    padding: 2px;
    padding-bottom: 5px;
    margin-top: -5px;
    margin-bottom: 15px;
    
    font-size: 0.87rem;
    text-shadow: 
        1px 1px var(--reddark),
        2px 2px var(--yellowdark), 3px 3px var(--yellowdark);
}

#update_container p:before { /* ----- Updates Separator ----- */
    content: "";
    display: flex;
    position: absolute;
    
    top:100%;
    
    width: calc(100% - 1px);
    height: 5px;
    
    border-bottom: 4px dashed white;
    
    z-index: 1;
    }   
    
#update_container p:after { /* ----- Border Shadow ----- */
    content: "";
    display: flex;
    position: absolute;
    
    top: 100%;
    
    width: 100%;
    height: 5px;
    
    margin-left: 2px;
    margin-top: 3px;
    border-bottom: 4px dashed var(--yellow);
    
    transform: translate(1px, -1px);
}  
    
:has(> #update_container:hover) > #update_header::before, #update_header:hover::before{ /* --- Animates Header --- */
    animation-play-state: running;
}    

/* ------------------------------- */   
/* ---------- Second Row --------- */    
/* ------------------------------- */    
#row_wrapper2 {
    margin-bottom: var(--gap);
    }    
/* ---------- Daily Video ---------- */
#daily_video_header {
    justify-content: center;
   
    white-space: nowrap;
}    

#daily_video_header::before{ /* ----- ꩜ U+AA5C ----- */
    content: "\AA5C";
    font-size: 1.4rem;
    
    margin-right: 144px;
    
    transform: rotate(95deg);
    
    animation: var(--swirl);
    animation-play-state: paused;
} 
    
#daily_video_header::after{ /* ----- ꩜ U+AA5C ----- */
    content: "\AA5C";
    font-size: 1.4rem;
    
    margin-left: 144px;
    width: 100%;
    
    transform: rotate(145deg);
    
    animation: var(--swirl);
    animation-play-state: paused;
}

#daily_video_header_style { /* ----- Header Styling ----- */
    position: absolute;        
}    
    
#daily_video_header_style::after { /* ----- Header Styling ----- */
    content: "///////";
    width: 100%;

    margin-left: 65px;
    
    font-size: 1.5rem;
}
    
#daily_video_header_style::before { /* ----- Header Styling ----- */
    content:" ///////";

    margin-right: 65px;
    
    font-size: 1.5rem;
}
    
:has(> #daily_video_container:hover) > #daily_video_header::before,
:has(> #daily_video_container:hover) > #daily_video_header::after,
#daily_video_header:hover::after, #daily_video_header:hover::before { /* --- Animates Header --- */
    animation-play-state: running;
}    

#daily_video_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    font-family: poseidon;
    font-size: 1.3rem;
}    

#daily_video_container::before {
    content: "▖ ▚ ▘ ⯀ ■ ▝ ▀  ▙ ▞  ▚ ▜ ◼▝▗ ▚  ▖▝ ▀  ▞ ▛ ◼ ◼▝  ▙ ▚";
    
    margin-top: -10px;
    margin-bottom: 5px;
    font-size: 1rem;
}     
       
#daily_video_title {
    margin-top: 5px;
    margin-bottom: -10px;
    
}
    
#daily_video {
    width: 100%;
    height: 285px;
    
    margin-top: 5px;
    border: 2px dashed white;
    box-shadow: 0px 0px 6px 4px var(--reddark);  
}  
  

/* ---------- Now Watching ---------- */
#now_header {
    justify-content: left;
    white-space: nowrap;
}    
    
#now_header::after { /* ----- ꩜ U+AA5C ----- */
    content: "\AA5C";
    font-size: 1.4rem;
    
    margin-left: 170px;
    width: 100%;
    
    transform: rotate(-35deg);
    
    animation: var(--swirl);
    animation-play-state: paused;
}
    
#now_header:hover::after,
:has(> #now_container:hover) > #now_header::after {
    animation-play-state: running;        
}

#now_container {
    width: 100%;
    
    box-shadow: 
        2px -2px 0px 0px var(--reddark),
        3px -3px 0px 0px var(--yellow);
    
    transform: rotateX(180deg); /* -- Trick to put Scrollbar on top -- */
}    
    
#now_container img{
    width: 110px;
}
          
#now_grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-columns: max-content;
 
    gap: 14px;
    
    overflow-x: scroll; 
    scrollbar-color: var(--yellow) var(--yellowdark);
}  

.doing {
    transform: rotateX(180deg); /* -- Trick to put Scrollbar on top -- */
}    
    
.now_watching_header {
    display: flex;
    justify-content: center;
    
    padding: 1px;
    margin-bottom: -1px;
    
    border: 2px dashed white;
    border-bottom: none;
    border-radius: 5px 5px 0px 0px;
    
    font-size: 0.9rem;
    text-decoration: underline dotted 2px;
}
    
.now_watching_header::before,
.now_watching_header::after {
    display: inline-block;
    content: "~|~~|~";
    
    margin-left: 5px;
    margin-right: 5px;
    
    font-size: 1rem;
    text-shadow: var(--textyellow);
}    
    
.watching_container {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    
    min-height: 222px;
    
    padding: 10px;
    border: 2px dashed white;
    border-top: none;
    border-radius: 0px 0px 5px 5px;
    
    font-size: 0.7rem;
}
    
.watching_container img {    
    margin-bottom: 2px;
    border: 3px dotted var(--yellowdark );
    box-shadow:
        2px 2px 5px 0px var(--red),
        -2px -2px 5px 0px var(--red);
    
    transition: all 0.2s ease;
}   
    
.watching_container img:hover {  
    transform: scale(1.05);
}
        
#watching_group {
    display: flex;
    align-items: start;
    flex-direction: row;
    
    gap: 10px;
}
    
#watching_1::before, 
#watching_2::before {
    content: "Rewatching";
    position: absolute;

    font-family: poseidon;
    font-size: 1.1rem;
    
    transform: translate(-4px, -8px) rotate(-12deg);
    transition: all 0.2s ease;
    
    z-index: 1;
}
       
#playing_1::before {
    content: "Replaying";
    position: absolute;

    font-family: poseidon;
    font-size: 1.1rem;
    
    transform: translate(-35px, -8px) rotate(-12deg);
    transition: all 0.2s ease;
    z-index: 1;       
}    
    
#watching_1:has(> img:hover)::before,
#watching_2:has(> img:hover)::before,
#reading_1:has(> img:hover)::before,
#playing_1:has(> img:hover)::before { /* --- Tag Hover Scale --- */
    font-size: 1.25rem;
} 
    
/* ---------- MP3 Player ---------- */    
#MP3_header {
    justify-content: right;
    width: 382px;
    
    white-space: nowrap;
}
 
#MP3_header::before {/* ----- ꩜ U+AA5C ----- */
    content: "\AA5C";
    font-size: 1.4rem;
    
    margin-right: 207px;
    width: 100%;
    
    transform: rotate(95deg);
    
    animation: var(--swirl);
    animation-play-state: paused;
}
    
#MP3_header:hover::before,
:has(> #MP3_container:hover) > #MP3_header::before {
    animation-play-state: running;      
}
    
#MP3_wrapper {
    position: relative;
    justify-content: left;
    align-items: center;
    
    min-height: 30px;
    
    padding: 0.3rem;
    border: 2px solid white;
    border-radius: 10px;
    box-shadow:
        2px 2px 5px 0px var(--red),
        -2px -2px 5px 0px var(--red);
    
    color: var(--yellow); 
}    

.controls { 
    display: flex;
    gap: 5px;
}
    
.controls img {
    width: 16px;
    
    transition: all 0.2s ease;
    cursor: var(--pointer);
} 
    
.controls img:hover {
    animation: popin 0.4s forwards;
    
    cursor: var(--pointer);
}   

.controls img:active {
    animation: popin 0.2s ease-in-out;    
}  
    
@keyframes popin {
    0% { transform: scale(1); }
    100% { transform: scale(1.3); }
}     

#track_time::after {
    position: absolute;
    content: "|";
    
    top: 5px;
    margin-left: 5px;
    
    font-weight: bold;
    }
    
#track_title {
    display: flex;
    width: 100%;
    
    white-space: pre;
    overflow: hidden;
}
    
#track_title p {
    text-shadow: 1px 1px var(--red), 2px 2px var(--reddark);
    
    animation: var(--marquee);
}
    
#track_title:hover p {
    animation-play-state: paused;
}    
    

/* ------------------------------ */   
/* ----------- Footer ----------- */    
/* ------------------------------ */ 
.footer {
    display: flex;
    flex-direction: column;
    
    height: 100%;
    width: 100%;
    padding: var(--gap);
    
    background-image: url(../images/bg/containerred.png);
    
    border: var(--border);
    border-radius: 0 0 15px 15px;
    box-shadow: var(--box-shadow);
}    

#main_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
    padding-top: 2px;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 10px;
    
    border: var(--border);
    box-shadow: var(--box-shadow);
    background-color: black;
}   
    
/* ---------- Mood bar ---------- */    
#mood_bar_wrapper_general { /* -- Controls Scrollbar -- */
    display: flex;  
    width: 100%;
    
    padding-bottom:  5px;
    
    overflow-x: scroll;
    scrollbar-color: var(--yellow) var(--yellowdark);
    scrollbar-width: thin;
    
    transform: rotateX(180deg); /* -- Trick to put Scrollbar on top -- */
}    
    
.mood_title { 
    display: flex;
    flex-direction: column;
       
    gap: 5px;
    margin-right: 4px;
    padding: 1px;

    color: var(--yellow);
    font-family: YellowSign;
    font-size: 0.6rem;
    letter-spacing: 7px;
    
    transform: rotateX(180deg); /* -- Trick to put Scrollbar on top -- */
}
    
.mood_button_wrapper {
    display: flex;
    flex-direction: row;
    
    gap: 2px;
}
    
/* ---------- Roses and Images ---------- */
.rose { /* --- Rose Styling --- */
    position: absolute;
    width: 35px;
    
    
    transition: var(--transition);
    animation: var(--swirl);
    animation-play-state: paused;
}        
       
#rose1 { /* --- Rose Styling --- */
    top: -20px;
    left: 98%;
    transform: rotate(230deg);
}

#rose2 { /* --- Rose Styling --- */
    top: 55px;
    right: 98%; 

    transform: rotate(-30deg);
    
    z-index: 1;
}    

.footer:hover .rose,
.rose:hover { /* --- Rose Styling --- */
    animation-play-state: running;
}
    
#imood {
    height: 35.7px;
}    

#mood_bar_wrapper_general img {
    border: 3px dotted var(--yellowdark );
    border-radius: 3px;
    
    transition: var(--transition);        
}      

.footer img:hover {
    transform: scale(1.1);
}  

.footer img:active {
    animation: popin 0.2s ease-in-out;    
}      
    
.\38 8x31:hover {
    box-shadow: 0px 0px 10px 1px var(--reddark);
}    
    
/* ---------- Credits ---------- */        

.credits {
    display: flex;
    justify-content: center;
    align-items: center;
    
    height: 100%;
    width: 100%;
    
    margin-top: 10px;
    padding-top: 8px;
    border-top: var(--border);
    
    
    font-size: 0.8rem;
    letter-spacing: 1px;
}
  
.credits p {
    opacity: 0.8;
}    
    
/* ---------- Formula Guessr Popup ---------- */    
#f1_popup {
    flex-direction: column;
    position: absolute;
    
    top: 65%;
    right: 0%;
    
    height: 370px;
    width: 240px;
    
    padding: 1rem 0.5rem 0rem 0.5rem;
    border: var(--border);
    background-image: url(../images/bg/containerred.png);
    
    font-size: 0.8rem;
    text-align: center;
    
    transform: rotate(-11deg) scale(0.9);
    transition: var(--transition);    
}
   
#f1_popup:hover {
   transform: translateY(-20%) rotate(0deg);
   box-shadow: 0 0 5px 5px #FFD240;  
}    
    
#MP44 {
    margin-top: 2rem;
    max-width: 150px; 
    
    transition: var(--transition);
}    

#MP44:hover {
    transform: rotate(11deg) translate(-30px, -30px);
}
       
#cloud_overlay {
    display: fixed;
    position: absolute;

    left: 0px;
    bottom: -20%;
    
    height: 315px;
    width: 100%;
    
    background-image: url(../images/bg/skyOverlay2.png);
    background-repeat: repeat-x;
   
    pointer-events: none;
    
    z-index: 5;
}
}
/* ------------------------------------------------------------------------- */
@media only screen and (min-height: 730px) { 
#f1_popup {
    height: 440px;
} 
}    
    
/* /|\------------------------------------------------------------------------ */
/* ------/|\------------------------------------------------------------------ */
/* ------------/|\------------------------------------------------------------ */
/* ------------------/|\------------------------------------------------------ */
/* ------------------------/|\------------------------------------------------ */
/* ------------------------------/|\------------------------------------------ */
/* ------------------------------------/|\------------------------------------ */
/* ------------------------------------------/|\------------------------------ */
/* ------------------------------------------------/|\------------------------ */
/* ------------------------------------------------------/|\------------------ */
/* ------------------------------------------------------------/|\------------ */
/* ------------------------------------------------------------------/|\------ */
/* ------------------------------------------------------------------------/|\ */

/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* -------------------- Desktop Medium (1366px> width) --------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 1366px) {
    
/* ------------------------------ */   
/* ---------- Main Page --------- */    
/* ------------------------------ */ 
.big_container {
    min-width: 1000px;

}
/* ---------- Main Header ----------*/
#main_header {    
    font-size: 2.6rem;
}  
          
/* ---------- Wrappers and Headers ----------*/
.row_wrapper { /* ----- Control Rows ----- */
    font-size: 1rem;
}

/* ------------------------------ */   
/* ---------- First Row --------- */    
/* ------------------------------ */   

/* ---------- Website Description ---------- */
#description_poem {
    gap: 15px;
}    
    
#description_poem h3, h4 { /* ----- Poem size ----- */
    font-size: 0.9rem;
}
   
#cloud_overlay {
    bottom: -22%;
}
    
/* ------------------------------- */   
/* ---------- Second Row --------- */    
/* ------------------------------- */    

/* ---------- Daily Video ---------- */
    
#daily_video_header::before{ /* ----- ꩜ U+AA5C ----- */
    margin-right: 174px;
} 
    
#daily_video_header::after{ /* ----- ꩜ U+AA5C ----- */
    margin-left: 172px;
}
    
#daily_video_header_style::after { /* ----- Header Styling ----- */
    margin-left: 66px;
    
    font-size: 1.5rem;
}
    
#daily_video_header_style::before { /* ----- Header Styling ----- */
    margin-right: 66px;
    
    font-size: 1.5rem;
}
    
#daily_video_container {
    font-size: 1.4rem;
}  
    
/* ----------- Now Watching ---------- */
#now_header::after {
    margin-left: 208px;  
}
      
/* ---------- MP3 Player ---------- */    
#MP3_header::before {/* ----- ꩜ U+AA5C ----- */
    margin-right: 245px; 
}

/* ---------- F1 Overlay ---------- */
#f1_popup {
    width: 290px;
    height: 358px;
}

#MP44 {
    max-width: 200px; 
}         
}

/* /|\------------------------------------------------------------------------ */
/* ------/|\------------------------------------------------------------------ */
/* ------------/|\------------------------------------------------------------ */
/* ------------------/|\------------------------------------------------------ */
/* ------------------------/|\------------------------------------------------ */
/* ------------------------------/|\------------------------------------------ */
/* ------------------------------------/|\------------------------------------ */
/* ------------------------------------------/|\------------------------------ */
/* ------------------------------------------------/|\------------------------ */
/* ------------------------------------------------------/|\------------------ */
/* ------------------------------------------------------------/|\------------ */
/* ------------------------------------------------------------------/|\------ */
/* ------------------------------------------------------------------------/|\ */

/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* -------------------- Desktop Big (1920> width) -------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 1920px) { /* ----- Pop Scale ----- */
#f1_popup {
    height: 353px;
    right: 10%;
}    
    
#cloud_overlay {
    bottom: 0%;
}    
}