欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

粘頂條不& quot粘住& quot到頂端

這是我的代碼...這是我第一次嘗試為網(wǎng)站創(chuàng)建代碼,所以如果代碼有點(diǎn)亂,我很抱歉,但我只擔(dān)心& quotsection # TOP _ BAR _ SECTION & quot因?yàn)樗鼞?yīng)該貼在頁面的頂部,但它沒有

const SIDE_MENU_SECTION = window.document.getElementById("SIDE_MENU_SECTION");
  const SIDE_MENU_DIV1 = window.document.getElementById("Side_Menu_Div1");
  
  const MAIN_CONTENT_SECTION = window.document.getElementById("MAIN_CONTENT_SECTION");
  const TOP_BAR_SECTION = window.document.getElementById("TOP_BAR_SECTION");
  const TOP_BAR_DIV1 = window.document.getElementById("Top_Bar_Div1");
  const CONTENT_SECTION = window.document.getElementById("CONTENT_SECTION");
  const CONTENT_DIV1 = window.document.getElementById("Content_Div1");

  var Client_width;
  var Client_height;
  
  var Side_menu_section_width;
  var Max_width_for_side_menu;
  
  var Loaded = false;

  UpdateVariables1();
  ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  
  /* Quando a pagina terminar o Load, muda o estado da variável Loaded, para garantir que a página está carregada*/
  window.onload = PageLoaded;

  function PageLoaded(){
    Loaded = true;
  }

  function MainTransitions(New_Time = "0.75s"){
    SIDE_MENU_SECTION.style.transitionDuration = New_Time;
    SIDE_MENU_DIV1.style.transitionDuration = New_Time;
    
    MAIN_CONTENT_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_DIV1.style.transitionDuration = New_Time;
    CONTENT_SECTION.style.transitionDuration = New_Time;
    CONTENT_DIV1.style.transitionDuration = New_Time;
  }
  
  function UpdateVariables1(){
    Client_width = document.documentElement.clientWidth;
    Client_height = document.documentElement.clientHeight;
    
    Side_menu_section_width = SIDE_MENU_SECTION.offsetWidth;
    Max_width_for_side_menu = Math.max(540,Client_width/3.0);
  }
  
  function SideMenuResize(New_Width = 0){
    SIDE_MENU_SECTION.style.width = New_Width + "px";
    SIDE_MENU_DIV1.style.width = New_Width + "px";

    MAIN_CONTENT_SECTION.style.marginLeft = New_Width + "px";
  }
  
  function ContentResize(Page_Width = 0,Front_Page_Height = 0){
    TOP_BAR_DIV1.style.width = Page_Width + "px";
    
    CONTENT_DIV1.style.width = Page_Width + "px";
  }
  
  function ResizeAllContent(Side_Menu_New_Size = 0,Main_New_Width = 0,Main_New_Height = 0){
    SideMenuResize(Side_Menu_New_Size);
    
    ContentResize(Main_New_Width,Main_New_Height);
  }

  window.addEventListener("resize",debounce(function(e){  
    UpdateVariables1();
    if (Side_menu_section_width === undefined || Side_menu_section_width === null) {
      
    }else {
      if (Loaded) {       
        if (Side_menu_section_width === 0) {
          MainTransitions("0s");
      
          UpdateVariables1();
          
          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
    
          UpdateVariables1();

          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }else {
          MainTransitions("0s");
      
          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));

          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }
      }else {
   
      }
    }
  }));

  function debounce(func){
    var timer;
    return function(event){
      if(timer) clearTimeout(timer);
      timer = setTimeout(func,100,event);
    };
  }

  function OpenSideMenu() {
    MainTransitions("0.75s");
    
    UpdateVariables1();
    
    ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

  function CloseSideMenu() {
    MainTransitions("0.75s");
    
    UpdateVariables1();
    
    ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

/* Efeitos de neon para a Top_Bar_Logo1*/
  const Top_Bar_Logo1_Target = window.document.getElementById("Top_Bar_Div1_Logo1");

  const Top_Bar_Logo1_FlickerLetter = letter => `<span style="animation: text-flicker-in-glow ${Math.random()*4}s linear both ">${letter}</span>`
  const Top_Bar_Logo1_ColorLetter = letter => `<span style="color: hsla(${Math.random()*600}, 100%, 80%, 1);">${letter}</span>`;
  const Top_Bar_Logo1_FlickerAndColorText = text => 
    text
      .split('')
      .map(Top_Bar_Logo1_FlickerLetter)
      .map(Top_Bar_Logo1_ColorLetter)
      .join('');
  const Top_Bar_Logo1_NeonGlory = Top_Bar_Logo1_Target => Top_Bar_Logo1_Target.innerHTML = Top_Bar_Logo1_FlickerAndColorText(Top_Bar_Logo1_Target.textContent);
  Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Target);

  const Top_Bar_Logo1_Letters = Top_Bar_Logo1_Target.querySelectorAll('span');
  for (let i = 0; i < Top_Bar_Logo1_Letters.length; i++) {
    Top_Bar_Logo1_Letters[i].addEventListener('click', () => Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Letters[i]));
  }


/* Efeitos de neon para a Front_Page_Logo1*/
  const Front_Page_Logo1_Target = window.document.getElementById("Content_Div1_Div1_Logo1");

  const Front_Page_Logo1_FlickerLetter = letter => `<span style="animation: text-flicker-in-glow ${Math.random()*4}s linear both ">${letter}</span>`
  const Front_Page_Logo1_ColorLetter = letter => `<span style="color: hsla(${Math.random()*600}, 100%, 80%, 1);">${letter}</span>`;
  const Front_Page_Logo1_FlickerAndColorText = text => 
    text
      .split('')
      .map(Front_Page_Logo1_FlickerLetter)
      .map(Front_Page_Logo1_ColorLetter)
      .join('');
  const Front_Page_Logo1_NeonGlory = Front_Page_Logo1_Target => Front_Page_Logo1_Target.innerHTML = Front_Page_Logo1_FlickerAndColorText(Front_Page_Logo1_Target.textContent);
  Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Target);

  const Front_Page_Logo1_Letters = Front_Page_Logo1_Target.querySelectorAll('span');
  for (let i = 0; i < Front_Page_Logo1_Letters.length; i++) {
    Front_Page_Logo1_Letters[i].addEventListener('click', () => Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Letters[i]));
  }

@import url('https://fonts.googleapis.com/css?family=Monoton');

      html, body {
        margin: 0px;
        border: 0px;
        padding: 0px;

        width: fit-content;
        height: fit-content;

    overflow-x: hidden;
        overflow-y: auto;

        background-color: #191919;
        background-image: url('img_tree.gif');
        background-image: url('imagens/pagina_inicial/congresso_nacional_escurecido_70.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;

        color: white;
        font-family: Arial, Helvetica, sans-serif;
      }

      section#WHOLE_PAGE{
        margin: 0px;
        border: 0px;
        padding: 0px;
        
        top: 0px;
        left: 0px;
        
        width: fit-content;
        height: fit-content;
        
        overflow: auto;
      }

      section#SIDE_MENU_SECTION {
        margin: 0px;
        border: 0px;
        padding: 0px;
        padding-top: 10vw; 
        
        height: 100%;
        width: 0px;
        
        position: fixed; 
        z-index: 1; 
        top: 0px; 
        left: 0px;
        
        display: block;
        
        background-color: lightgray; 
        overflow-x: hidden; 
        
        transition: 0.75s; 
        
        .side_menu_div1{
          height: 100%;
          width: 0px;
          
          transition: 0.75s;
        }
        
        .side_menu_close_btn{
          margin: 0px;
          border: 0px;
          padding: 0px;
          
          font-size: max(50px,10vw);
          text-decoration: none;
          color: white;
          
          position: absolute;
          top: 0px;
          right: 1vw;
        }
        
        .side_menu_text {
          margin: 0px;
          border: 0px;
          padding: 0px;
          
          
          display: block;
          
          font-size: max(25px,2.5vw);
          text-decoration: none;
          color: white;
          
          transition: 0.5s;
        }
        
        .side_menu_text:hover {
          border: 0.5vw dashed white;
          
          cursor: pointer;
          
          font-size: 3vw;
          font-weight: bold;
          text-decoration: none;
          color: black;
        }
      }
      
      section#MAIN_CONTENT_SECTION {
        margin: 0px;
        margin-left: 0px;
        border: 0px;
        padding: 0px;
        
        width: fit-content;
        height: fit-content;
        
        overflow-x: hidden;
        overflow-y: auto;
        
        transition: margin-left .75s;
        transition-delay: 0s;
        list-style-type: none;   
      }
      
      section#TOP_BAR_SECTION {

        background-color: black;
        color: black;

        height: fit-content;
    width: fit-content;

    transition: width 0.75s;

        overflow: hidden;

        position: sticky;
        top: 0%;
        left: 0%;
    z-index: 10;

    .top_bar_div1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          height: max(50px,10vh);

          position: relative;
          top: 0px;
          left: 0px;
        }

        .top_bar_div1_logo1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          font-family: 'Monoton', cursive;
          font-size: max(15px,3vh);
          font-weight: 400;
          
          text-align: center;

          width: fit-content;

          position: absolute;
          justify-content: left;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        .top_bar_div1_logo1:hover{
          cursor: pointer;  
        }

        .top_bar_div1_menu1{
          margin: 0px;
          border-left: 0px;
          border-right: 0px;
          border-top: max(75px,10vh);
          border-bottom: max(75px,10vh);
          border-color: #FBFFA0;
          border-style:solid;
          padding: 0px;

          background-color: #FBFFA0;
          color: black;
          font-family: Arial, Helvetica, sans-serif;
          font-size: max(22.5px,3vh);
          font-weight: 400;
          
          text-align: center;

          width: fit-content;

          position: absolute;
          justify-content: center;
          top: 50%;
          left: 0%;
          z-index: 10;
          transform: translate(0%, -50%);
        }

        .top_bar_div1_menu1:hover{
          background-color: #F4FF00;
          border-color: #F4FF00;
          
          cursor: pointer; 
          
          color: black;
          font-weight: bold;
        }
      }

      section#CONTENT_SECTION {

        background-color: transparent;

        height: fit-content;
        width: fit-content;

        transition: width 0.75s;
        
        .content_div1{
          width: fit-content;
          
          position: relative;
          justify-content: center;
          top: 0px;
          left: 0px;
        }
        
        .content_div1_div1{
          margin: 0px;
          border: 0px;
          padding: 0px;
          padding-top: 5vh;
          padding-bottom: 2.5vw;
          
          display: inline-block;
          
          width: fit-content;
          
          position: relative;
          justify-content: center;
          top: 0px;
          left: 0px;
          
          justify-content: center;
          left: 50%;
          transform: translate(-50%, 0);
        }
        
        .content_div1_div1_text1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          color: white;
          font-family: Arial, Helvetica, sans-serif;
          font-size: max(50px, 7vw); 
          -webkit-text-stroke-width: max(1px, 0.14vw);
          -webkit-text-stroke-color: black;

          text-align: center;

          justify-content: center;
        }
        
        .content_div1_div1_logo1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          font-family: 'Monoton', cursive;
          font-size: max(50px, 7.5vw);
          font-weight: 400;

          text-align: center;

          justify-content: center;
        }
        
        .content_div1_div2_p{
          margin: 0px;
          border: 0px;
          padding: 10%;
          padding-top: 2.5vw;
          padding-bottom: 2.5vw;
          
          text-indent: 3vw;
          text-align: justify;
          font-size: max(21.42px,3vw);
          -webkit-text-stroke-width: max(0.42px, 0.06vw);
          -webkit-text-stroke-color: black;
        }
      }

      /* Efeito de Neon na logo do POLITICAGEM */
      @-webkit-keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}

<section id="WHOLE_PAGE">
    <section id="SIDE_MENU_SECTION">
      <div id="Side_Menu_Div1" class="side_menu_div1">
        <a id="Side_Menu_Close_Btn" class="side_menu_close_btn" href="javascript:void(0)" onclick="CloseSideMenu()">&times;</a>
        <a id="Side_Menu_Option1" class="side_menu_text" href="#" onclick="location.href = 'sobre.html';">Option1</a>
        <a id="Side_Menu_Option2" class="side_menu_text" href="#">Option2</a>
        <a id="Side_Menu_Option3" class="side_menu_text" href="#">Option3</a>
        <a id="Side_Menu_Option4" class="side_menu_text" href="#">Option4</a>
        <a id="Side_Menu_Option5" class="side_menu_text" href="#">Option5</a>
      </div>
    </section>

    <section id="MAIN_CONTENT_SECTION">
      <section id="TOP_BAR_SECTION">
        <div id="Top_Bar_Div1" class="top_bar_div1">
          <h1 id="Top_Bar_Div1_Menu1" class="top_bar_div1_menu1" onclick="OpenSideMenu();" href="#">&#9776 Menu</h1>
          <h1 id="Top_Bar_Div1_Logo1" class="top_bar_div1_logo1" onclick=";">TEXT</h1>
        </div>
      </section>

      <section id="CONTENT_SECTION">
        <div id="Content_Div1" class="content_div1">
          <div id="Content_Div1_Div1" class="content_div1_div1">
            <h1 id="Content_Div1_Div1_Text1" class="content_div1_div1_text1">Text</h1>
            <h1 id="Content_Div1_Div1_Logo1" class="content_div1_div1_logo1">Text</h1>
          </div>
          <div id="Content_Div1_Div2" class="content_div1_div2">
            <p id="Content_Div1_Div2_P1" class="content_div1_div2_p">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
            <p id="Content_Div1_Div2_P2" class="content_div1_div2_p">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
          </div>
        </div>
      </section>
    </section>
  </section>

您的節(jié)#SIDE_MENU_SECTION和節(jié)#CONTENT_SECTION選擇器缺少右大括號(hào)}

在你的。懸停和。content_div1_div2_p選擇器。

看起來你試圖嵌套CSS選擇器,這在普通CSS中是無效的。我通過驗(yàn)證工具運(yùn)行了您的CSS以找到錯(cuò)誤。你可以在未來使用這個(gè)工具來驗(yàn)證你自己的CSS:https://jigsaw.w3.org/css-validator/#validate_by_input

既然代碼是有效的,那么發(fā)現(xiàn)問題就容易多了。粘性頭的問題是它的一堆父元素有溢出:隱藏或位置:固定在它們上面。您不能這樣做,因?yàn)閟ticky元素需要能夠正確地獲得滾動(dòng)位置,而這些類型的屬性會(huì)阻止這一點(diǎn)。看到下面的演示,我在我注釋掉的所有內(nèi)容上面加了一個(gè)/*這是注釋掉的*/ comment。這也有我上面提到的你的固定牙套。

const SIDE_MENU_SECTION = window.document.getElementById("SIDE_MENU_SECTION");
  const SIDE_MENU_DIV1 = window.document.getElementById("Side_Menu_Div1");
  
  const MAIN_CONTENT_SECTION = window.document.getElementById("MAIN_CONTENT_SECTION");
  const TOP_BAR_SECTION = window.document.getElementById("TOP_BAR_SECTION");
  const TOP_BAR_DIV1 = window.document.getElementById("Top_Bar_Div1");
  const CONTENT_SECTION = window.document.getElementById("CONTENT_SECTION");
  const CONTENT_DIV1 = window.document.getElementById("Content_Div1");

  var Client_width;
  var Client_height;
  
  var Side_menu_section_width;
  var Max_width_for_side_menu;
  
  var Loaded = false;

  UpdateVariables1();
  ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  
  /* Quando a pagina terminar o Load, muda o estado da variável Loaded, para garantir que a página está carregada*/
  window.onload = PageLoaded;

  function PageLoaded(){
    Loaded = true;
  }

  function MainTransitions(New_Time = "0.75s"){
    SIDE_MENU_SECTION.style.transitionDuration = New_Time;
    SIDE_MENU_DIV1.style.transitionDuration = New_Time;
    
    MAIN_CONTENT_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_DIV1.style.transitionDuration = New_Time;
    CONTENT_SECTION.style.transitionDuration = New_Time;
    CONTENT_DIV1.style.transitionDuration = New_Time;
  }
  
  function UpdateVariables1(){
    Client_width = document.documentElement.clientWidth;
    Client_height = document.documentElement.clientHeight;
    
    Side_menu_section_width = SIDE_MENU_SECTION.offsetWidth;
    Max_width_for_side_menu = Math.max(540,Client_width/3.0);
  }
  
  function SideMenuResize(New_Width = 0){
    SIDE_MENU_SECTION.style.width = New_Width + "px";
    SIDE_MENU_DIV1.style.width = New_Width + "px";

    MAIN_CONTENT_SECTION.style.marginLeft = New_Width + "px";
  }
  
  function ContentResize(Page_Width = 0,Front_Page_Height = 0){
    TOP_BAR_DIV1.style.width = Page_Width + "px";
    
    CONTENT_DIV1.style.width = Page_Width + "px";
  }
  
  function ResizeAllContent(Side_Menu_New_Size = 0,Main_New_Width = 0,Main_New_Height = 0){
    SideMenuResize(Side_Menu_New_Size);
    
    ContentResize(Main_New_Width,Main_New_Height);
  }

  window.addEventListener("resize",debounce(function(e){  
    UpdateVariables1();
    if (Side_menu_section_width === undefined || Side_menu_section_width === null) {
      
    }else {
      if (Loaded) {       
        if (Side_menu_section_width === 0) {
          MainTransitions("0s");
      
          UpdateVariables1();
          
          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
    
          UpdateVariables1();

          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }else {
          MainTransitions("0s");
      
          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));

          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }
      }else {
   
      }
    }
  }));

  function debounce(func){
    var timer;
    return function(event){
      if(timer) clearTimeout(timer);
      timer = setTimeout(func,100,event);
    };
  }

  function OpenSideMenu() {
    MainTransitions("0.75s");
    
    UpdateVariables1();
    
    ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

  function CloseSideMenu() {
    MainTransitions("0.75s");
    
    UpdateVariables1();
    
    ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

/* Efeitos de neon para a Top_Bar_Logo1*/
  const Top_Bar_Logo1_Target = window.document.getElementById("Top_Bar_Div1_Logo1");

  const Top_Bar_Logo1_FlickerLetter = letter => `<span style="animation: text-flicker-in-glow ${Math.random()*4}s linear both ">${letter}</span>`
  const Top_Bar_Logo1_ColorLetter = letter => `<span style="color: hsla(${Math.random()*600}, 100%, 80%, 1);">${letter}</span>`;
  const Top_Bar_Logo1_FlickerAndColorText = text => 
    text
      .split('')
      .map(Top_Bar_Logo1_FlickerLetter)
      .map(Top_Bar_Logo1_ColorLetter)
      .join('');
  const Top_Bar_Logo1_NeonGlory = Top_Bar_Logo1_Target => Top_Bar_Logo1_Target.innerHTML = Top_Bar_Logo1_FlickerAndColorText(Top_Bar_Logo1_Target.textContent);
  Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Target);

  const Top_Bar_Logo1_Letters = Top_Bar_Logo1_Target.querySelectorAll('span');
  for (let i = 0; i < Top_Bar_Logo1_Letters.length; i++) {
    Top_Bar_Logo1_Letters[i].addEventListener('click', () => Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Letters[i]));
  }


/* Efeitos de neon para a Front_Page_Logo1*/
  const Front_Page_Logo1_Target = window.document.getElementById("Content_Div1_Div1_Logo1");

  const Front_Page_Logo1_FlickerLetter = letter => `<span style="animation: text-flicker-in-glow ${Math.random()*4}s linear both ">${letter}</span>`
  const Front_Page_Logo1_ColorLetter = letter => `<span style="color: hsla(${Math.random()*600}, 100%, 80%, 1);">${letter}</span>`;
  const Front_Page_Logo1_FlickerAndColorText = text => 
    text
      .split('')
      .map(Front_Page_Logo1_FlickerLetter)
      .map(Front_Page_Logo1_ColorLetter)
      .join('');
  const Front_Page_Logo1_NeonGlory = Front_Page_Logo1_Target => Front_Page_Logo1_Target.innerHTML = Front_Page_Logo1_FlickerAndColorText(Front_Page_Logo1_Target.textContent);
  Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Target);

  const Front_Page_Logo1_Letters = Front_Page_Logo1_Target.querySelectorAll('span');
  for (let i = 0; i < Front_Page_Logo1_Letters.length; i++) {
    Front_Page_Logo1_Letters[i].addEventListener('click', () => Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Letters[i]));
  }

@import url('https://fonts.googleapis.com/css?family=Monoton');

      html, body {
        margin: 0px;
        border: 0px;
        padding: 0px;

        width: fit-content;
        height: fit-content;

        /*THIS WAS COMMENTED OUT*/
          /*overflow-x: hidden;
        overflow-y: auto;*/

        background-color: #191919;
        background-image: url('img_tree.gif');
        background-image: url('imagens/pagina_inicial/congresso_nacional_escurecido_70.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;

        color: white;
        font-family: Arial, Helvetica, sans-serif;
      }

      section#WHOLE_PAGE{
        margin: 0px;
        border: 0px;
        padding: 0px;
        
        top: 0px;
        left: 0px;
        
        width: fit-content;
        height: fit-content;
        
        /*THIS WAS COMMENTED OUT*/
        /*overflow: auto;*/
      }

      section#SIDE_MENU_SECTION {
        margin: 0px;
        border: 0px;
        padding: 0px;
        padding-top: 10vw; 
        
        height: 100%;
        width: 0px;
        
        position: fixed; 
        z-index: 1; 
        top: 0px; 
        left: 0px;
        
        display: block;
        
        background-color: lightgray; 
        overflow-x: hidden; 
        
        transition: 0.75s; }
        
        .side_menu_div1{
          height: 100%;
          width: 0px;
          
          transition: 0.75s;
        }
        
        .side_menu_close_btn{
          margin: 0px;
          border: 0px;
          padding: 0px;
          
          font-size: max(50px,10vw);
          text-decoration: none;
          color: white;
          
          position: absolute;
          top: 0px;
          right: 1vw;
        }
        
        .side_menu_text {
          margin: 0px;
          border: 0px;
          padding: 0px;
          
          
          display: block;
          
          font-size: max(25px,2.5vw);
          text-decoration: none;
          color: white;
          
          transition: 0.5s;
        }
        
        .side_menu_text:hover {
          border: 0.5vw dashed white;
          
          cursor: pointer;
          
          font-size: 3vw;
          font-weight: bold;
          text-decoration: none;
          color: black;
        }
      
      
      section#MAIN_CONTENT_SECTION {
        margin: 0px;
        margin-left: 0px;
        border: 0px;
        padding: 0px;
        
        width: fit-content;
        height: fit-content;
        
        /*THIS WAS COMMENTED OUT*/
        /*overflow-x: hidden;
        overflow-y: auto;*/
        
        transition: margin-left .75s;
        transition-delay: 0s;
        list-style-type: none;   
      }
      
      section#TOP_BAR_SECTION {

        background-color: black;
        color: black;

        height: fit-content;
    width: fit-content;

    transition: width 0.75s;

        overflow: hidden;

        position: sticky;
        top: 0%;
        left: 0%;
    z-index: 10;
}

    .top_bar_div1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          height: max(50px,10vh);

          position: relative;
          top: 0px;
          left: 0px;
        }

        .top_bar_div1_logo1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          font-family: 'Monoton', cursive;
          font-size: max(15px,3vh);
          font-weight: 400;
          
          text-align: center;

          width: fit-content;

          position: absolute;
          justify-content: left;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        .top_bar_div1_logo1:hover{
          cursor: pointer;  
        }

        .top_bar_div1_menu1{
          margin: 0px;
          border-left: 0px;
          border-right: 0px;
          border-top: max(75px,10vh);
          border-bottom: max(75px,10vh);
          border-color: #FBFFA0;
          border-style:solid;
          padding: 0px;

          background-color: #FBFFA0;
          color: black;
          font-family: Arial, Helvetica, sans-serif;
          font-size: max(22.5px,3vh);
          font-weight: 400;
          
          text-align: center;

          width: fit-content;

          position: absolute;
          justify-content: center;
          top: 50%;
          left: 0%;
          z-index: 10;
          transform: translate(0%, -50%);
        }

        .top_bar_div1_menu1:hover{
          background-color: #F4FF00;
          border-color: #F4FF00;
          
          cursor: pointer; 
          
          color: black;
          font-weight: bold;
      }

      section#CONTENT_SECTION {

        background-color: transparent;

        height: fit-content;
        width: fit-content;

        transition: width 0.75s;
}
        
        .content_div1{
          width: fit-content;
          
          position: relative;
          justify-content: center;
          top: 0px;
          left: 0px;
        }
        
        .content_div1_div1{
          margin: 0px;
          border: 0px;
          padding: 0px;
          padding-top: 5vh;
          padding-bottom: 2.5vw;
          
          display: inline-block;
          
          width: fit-content;
          
          position: relative;
          justify-content: center;
          top: 0px;
          left: 0px;
          
          justify-content: center;
          left: 50%;
          transform: translate(-50%, 0);
        }
        
        .content_div1_div1_text1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          color: white;
          font-family: Arial, Helvetica, sans-serif;
          font-size: max(50px, 7vw); 
          -webkit-text-stroke-width: max(1px, 0.14vw);
          -webkit-text-stroke-color: black;

          text-align: center;

          justify-content: center;
        }
        
        .content_div1_div1_logo1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          font-family: 'Monoton', cursive;
          font-size: max(50px, 7.5vw);
          font-weight: 400;

          text-align: center;

          justify-content: center;
        }
        
        .content_div1_div2_p{
          margin: 0px;
          border: 0px;
          padding: 10%;
          padding-top: 2.5vw;
          padding-bottom: 2.5vw;
          
          text-indent: 3vw;
          text-align: justify;
          font-size: max(21.42px,3vw);
          -webkit-text-stroke-width: max(0.42px, 0.06vw);
          -webkit-text-stroke-color: black;
      }

      /* Efeito de Neon na logo do POLITICAGEM */
      @-webkit-keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}

<section id="WHOLE_PAGE">
    <section id="SIDE_MENU_SECTION">
      <div id="Side_Menu_Div1" class="side_menu_div1">
        <a id="Side_Menu_Close_Btn" class="side_menu_close_btn" href="javascript:void(0)" onclick="CloseSideMenu()">&times;</a>
        <a id="Side_Menu_Option1" class="side_menu_text" href="#" onclick="location.href = 'sobre.html';">Option1</a>
        <a id="Side_Menu_Option2" class="side_menu_text" href="#">Option2</a>
        <a id="Side_Menu_Option3" class="side_menu_text" href="#">Option3</a>
        <a id="Side_Menu_Option4" class="side_menu_text" href="#">Option4</a>
        <a id="Side_Menu_Option5" class="side_menu_text" href="#">Option5</a>
      </div>
    </section>

    <section id="MAIN_CONTENT_SECTION">
      <section id="TOP_BAR_SECTION">
        <div id="Top_Bar_Div1" class="top_bar_div1">
          <h1 id="Top_Bar_Div1_Menu1" class="top_bar_div1_menu1" onclick="OpenSideMenu();" href="#">&#9776 Menu</h1>
          <h1 id="Top_Bar_Div1_Logo1" class="top_bar_div1_logo1" onclick=";">TEXT</h1>
        </div>
      </section>

      <section id="CONTENT_SECTION">
        <div id="Content_Div1" class="content_div1">
          <div id="Content_Div1_Div1" class="content_div1_div1">
            <h1 id="Content_Div1_Div1_Text1" class="content_div1_div1_text1">Text</h1>
            <h1 id="Content_Div1_Div1_Logo1" class="content_div1_div1_logo1">Text</h1>
          </div>
          <div id="Content_Div1_Div2" class="content_div1_div2">
            <p id="Content_Div1_Div2_P1" class="content_div1_div2_p">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
            <p id="Content_Div1_Div2_P2" class="content_div1_div2_p">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
          </div>
        </div>
      </section>
    </section>
  </section>