(function () {
  'use strict';

  const stylesheet = document.querySelector("#stylesheet");
  const toggleStylesheetLightButton = document.querySelector("#light");
  const toggleStylesheetDarkButton = document.querySelector("#dark");
  const navMenu = document.querySelector("#nav-menu");
  navMenu.offsetTop;
  const mainPage = document.querySelector("#main-div");
  const topBar = document.querySelector("#top-bar");
  const lightDarkWarning = document.querySelector("#light-dark-warning");
  const abnormalLogo = document.querySelector("#logo");
  const abnormalLogoStylesheet = document.querySelector("#logo-stylesheet");
  const footerAbnormal = document.querySelector("#footer-fourth");
  const introScreen = document.querySelector("[data-intro-screen]");
  const stylesheetSelector = document.createElement("div");
  const previousStylesheet = document.createElement("div");
  const menuButton = document.querySelector("#menu-button-open-close");
  const navMobile = document.querySelector("#mobile-nav-menu");
  const menuBar = document.querySelector("#mobile-menu-bar");
  const pageName = document.querySelector("#page-name");
  /*change prefix from "./" for test page inside the issue's 
  folder to "./issue-number/" for root index file */
  const prefix = "./161/";

  const articles = {
    "Featured Art": [
      {
        title: "",
        "sub-title": "",
        author: "La Orana Maria by Paul Guaguin",
        description: [
          "Paul Guaguin: (7 June 1848 – 8 May 1903) was a French painter, sculptor, ceramist and writer, whose work has been primarily associated with the post-impressionist and symbolist movements. While only moderately successful during his lifetime, Gauguin has since been recognized for his experimental use of color.",
          "By the 1890s, Gauguin's art took a significant turn during his time in Tahiti, then a French colony. During that time, he controversially married three adolescent Tahitian girls with whom he later fathered children.",
          "His paintings from that period, characterized by vivid colors and Symbolist themes, would prove highly successful among the European viewers for their exploration of the relationships between people, nature, and the spiritual world. Gauguin's art became popular after his death. His work was influential on the French avant-garde and many modern artists, such as Pabli Picasso and Henri Matisse, and he is well known for his relationship with Vincent and Theo van Gogh.",
        ],
        imgUrl: `${prefix}gauguin-maria.jpg`,
        link: '',
        poem: false,
        mainImg: true,
      },
    ],
    Anthroposophy: [
      {
        title: "The Artificial Anthroposophical Society",
        "sub-title": "",
        author: "Frank Thomas Smith",
        description: [
          "I thought there was only one Anthroposophical Society with its head office situated in Dornach, Switzerland. Of course I did, and why not? However, once there were two –the real one and an artificial one–, a long time ago and only for a very short time. The artificial one survived, the real one didn’t.",
          "Let’s begin at where and how I first learned about all this.",
          "In 1962, I was transferred by my employer –the International Air Transport Association (IATA)– from New York to Buenos Aires. I was accompanied by my wife and three-year-old daughter. My wife was originally German. We first met when I was in the U.S. Army in Germany. So, both I and our daughter also spoke German.",
          "IATA had no organization in Argentina, so I was on my own business-wise, without speaking Spanish. As luck or destiny would have it, we found a house to rent in a suburb of Buenos Aires called Florida. Many Germans lived there, mostly immigrants who had arrived after the Second World War. There was also a German Waldorf school, although we didn’t know it when we first moved in: the Rudolf Steiner Schule.",
        ],
        imgUrl: `${prefix}artificial-1.png`,
        link: `${prefix}artificial-society.html`,
        poem: false,
        mainImg: false,
      },
      {
        title: "Anthroposophical Guidelines",
        "sub-title": "Lectures 69 to 84",
        author: "Rudolf Steiner",
        description: [
          "The Guidelines which have been sent from the Goetheanum to the members of the Anthroposophical Society during the past weeks link the psychic gaze to the beings of the spiritual realms, to which man is related above just as much as he is to the natural realms below.",
          "True self-knowledge can be the guide to these spiritual realms. And when such self-knowledge is striven for in the right way, one will find understanding for what anthroposophy imparts as knowledge derived from insight into the life of the spiritual world. One must only practice self-knowledge in the right way, and not by merely concentrating on the “inner self”.",
          "By means of such real self-knowledge, at first one encounters what is alive in remembrance. In thought-pictures he recalls to consciousness the shadows of what he directly experienced in the past. Upon seeing a shadow, one is directed by an inner urge of thinking to the object which cast the shadow. Whoever has a remembrance of something cannot arrive so directly in his mind at the experience which persists in the remembrance. But if he really reflects on his own being, he will have to say: “It is himself, in his soul, who created the experience which cast its shadow and made him what he is.” The remembrance-shadows arise in consciousness, and they are illuminated in the soul. Dead shadows live in remembrance; living Being resides in the soul in which remembrance continues to act.",
        ],
        imgUrl: `${prefix}guidelines-image.png`,
        link: `${prefix}guidelines-69-84.html`,
        poem: false,
        mainImg: false,
      },
      {
        title: "Christmas: A Festival of Inspiration",
        "sub-title": "",
        author: "Rudolf Steiner",
        description: [
          "From within our work in the Anthroposophical movement we look forward into the future of humanity and we let our souls and hearts be permeated with what we believe will embody itself in the streams and forces of evolution in the future of humanity. When we contemplate the great truths of existence, when we look up to the Forces, Powers and Beings who reveal themselves to us in the spiritual worlds as the cause and foundation of all that meets us in the sensory world. We rejoice to know that the truths which we bring down from the spiritual worlds will and must be gradually realized more and more in the souls and hearts of the people of the future. Thus for the greater part of the year our spiritual gaze is directed either to the immediate present or the future.",
          "All the more do we feel ourselves impelled on the special days of the year, on the Festivals which come through to us from time and its changes as reminders of what earlier humanity imagined and devised. On these feast days we feel ourselves impelled to realise our union with this earlier humanity, to sink ourselves a little into what led people of the past time out of fullness of heart and soul to place these marks in the course of time which come down to us as the ‘Festivals of the year.’ If the Easter Festival is such as to awaken in us, when we understand it, thoughts of human powers and of the power of overcoming all the lower through the higher, everything externally physical through the spiritual, if the Easter Festival is a festival of resurrection, of awaking, a festival of hope and confidence in the spiritual forces which can be awakened in the human soul; so, on the other hand, the Christmas Festival is a festival of the realization of harmony with the whole cosmos, a festival of the realization of Grace. It is a festival that can again and again bring home the thought: No matter how doubtful everything around us may appear, however much the bitterest doubts may enter into faith, however much the worst disappointments may mingle with the most aspiring hopes, however much all that is good around us in life may weaken, there is something in human nature and essence—the rightly understood thought of the Christmas Festival may say—that only needs to be brought livingly, spiritually, before the soul, which reveals to us that we are descended from the powers of good, from the forces of right, from the forces truth. Easter points us to our victorious forces in the future; Christmas points us, in a certain sense, to the origin of man in the primeval past.",
        ],
        imgUrl: `${prefix}gauguin-maria.jpg`,
        link: `${prefix}steiner-christmas.html`,
        poem: false,
        mainImg: false,
      },
      {
        title: "The History and Actuality of Imperialism",
        "sub-title": "",
        author: "Rudolf Steiner",
        description: [
          "Unabridged translation: Frank Thomas Smith",
          "When you consider what has been said here during the past two days you will see that what belongs to the essence of imperialism is that in an imperialistic community something that was felt to be part of a mission – not necessarily justified, but understandable – later continued on as an automatism, so to speak. In the history of human development things are retained – simply due to indolence – which were once justified or explicable, but no longer are.",
          "If a community is obliged to defend itself for a period of time, then it is surely justified to create certain professions for that purpose: police and military professions. But when the danger against which defense was necessary no longer exists, the professions continue to exist. The people involved must remain. They want to continue to exercise their professions and therefore we have something which is no longer justified by the circumstances. Something develops which, although perhaps originating due to the necessity for defense, takes on an aggressive character. It is so with all empires, except the original imperialism of the first human societies, of which I spoke yesterday, in which the people’s mentality considered the ruler to be a god and thus justified in expanding his domain as far as possible. This justification was no longer there in all the subsequent empires.",
        ],
        imgUrl: `${prefix}imperialism1.jpg`,
        link: `${prefix}steiner-imperialism-3.html`,
        poem: false,
        mainImg: false,
      },
      {
        title: "Anthroposophy –An (eyebrow arching) Introduction",
        "sub-title": "",
        author: "Frank Thomas Smith",
        description: [
          "This article, if read at all, will likely be read by people who already know something about Anthroposophy and others who are just curious. As readers I am more interested in reaching them in reverse order. This innocent group probably heard the Word from contact with a Waldorf school or with someone who went to one or had a child who did, or teaches in one. Or from anthroposophical medicine and real physicians who practice it for patients who are open-minded (or intelligent) enough to confide in them. And there is also bio-dynamic agriculture. And, of course, there’s Rudolf Steiner’s spiritual-scientific teaching.",
          "However you may have come across the Word, I think it would be helpful if there were a place where you could get at least a general idea of what it’s all about. If it then interests you more than just enough, you can easily begin more detailed study. I hope to provide that general idea here, rent free – at least my understanding of and feeling for it.",
        ],
        imgUrl: `${prefix}anthroposophy-intro.png`,
        link: `${prefix}anthroposophy-intro.html`,
        poem: false,
        mainImg: false,
      },
    ],
    Poetry: [
      {
        title: "Midnight Christmas",
        "sub-title": "",
        author: "Frank Thomas Smith",
        description: [
          "The midnight air was a crystal vise<br>Crushing a billion bits of ice –<br>One stood out grand and glaring.<br>Mary, a virgin in her bearing,",
        ],
        imgUrl: `${prefix}midnight-christmas-1.png`,
        link: `${prefix}midnight-christmas.html`,
        poem: true,
        mainImg: false,
      },
      {
        title: "Reincarnation Blues",
        "sub-title": "Canto IV to VI",
        author: "Frank Thomas Smith",
        description: [
          "Meditating on the mother of questions,<br>(I don't mean the coronavirus<br>Or the First Class Esoteric Lessons)<br>But the one that necessarily concerns us:",
          "Sooner or later you'll want to know<br>If life has meaning and if so: what?<br>We can start be presuming the answer is: no!<br>If that's the case are we alive or: not?",
        ],
        imgUrl: `${prefix}reincarnation-blues-1.jpg`,
        link: `${prefix}reincarnation-blues-4-6.html`,
        poem: true,
        mainImg: false,
      },
    ],
    "Social Science": [
      {
        title: "JFK - The Unspeakable",
        "sub-title": "Why he died, and why it matters",
        author: "James W. Douglass",
        description: [
          "Do you remember where you were when President Kennedy was killed? I do.",
          "I was in a cafe on a street in downtown Buenos Aires. It was a warm southern hemisphere spring day and I was waiting for a colleague who should have arrived a few minutes ago; but this being Argentina, where punctuality is a mere theoretical virtue, I was accustomed to waiting. There was a buzz of voices in the rear of the café that seemed to be creeping nearer and louder.",
          "Suddenly Osvaldo rushed in. He didn't stop to even say Buenos Días. “Did you hear that Kennedy has been shot?” he blurted out.",
          "“Kennedy?” I repeated stupidly.",
          "“Sí, sí, el presidente.”",
        ],
        imgUrl: `https://southerncrossreview.org/153/jfk-assassination-2.png`,
        link: `https://southerncrossreview.org/153/jfk-review.html`,
        poem: false,
        mainImg: false,
      },
      {
        title: "Favela Children",
        "sub-title": "Chapter 15",
        author: "Ute Creamer",
        description: [
          "September 1977",
          "Perhaps Evaristo Gazzotti, one of the most important land owners in this district, will lend us a piece of land. My house is already full of used building materials: windows, doors, toilets, sinks, beams, etc. If it comes through, we want to build a youth center. Sometimes, when I have a headache for example, and I think of all I would like to do and if I will be able to do it and persevere, it all seems terribly murky. At my age men are at their best, but women are already going downhill. And when everything depends on one person it's very shaky. My situation recently became clear to me when we were with Everisto Gazzotti. Dr. Gazzotti behind his immense leather-trimmed desk; Peter Schmidt, owner of the Giroflex factory; Mr. Blaich, the imposing Waldorf School personality; Cido and Zéca - but the nucleus of it all was my own humble self.",
          "If the Gazzotti land doesn't come through, we must think of something else. My house is simply to small to accommodate forty children every day. When, like now, it has rained for a week and everything is damp, the wash doesn't dry, the children bring in mud which sticks everywhere and it rained into the shed in the back, I could literally go crazy. There's so much land in Brazil and not even a little piece for us. Something must happen in any case. Boxes, cases, sacks, suitcases full of Christmas presents are everywhere. The products of the children's work that they will give their parents for Christmas (35 sewn pillows, calendars, Christmas stars, etc.) and the used clothing for Londrina -- it all winds up here. Where should we store the three sacks of oats, the two sacks of cookies, the five packets of chocolate pieces, the used clothing, the 15 pairs of sneakers, the 30 pajamas for outings, the five doors, three lattices, toilets, bidet, a truck-load of wood??",
        ],
        imgUrl: `${prefix}favela-cover.jpg`,
        link: `${prefix}favela-children-15.html`,
        poem: false,
        mainImg: false,
      },
      {
        title: "The President's New Clothes",
        "sub-title": "",
        author: "",
        description: [
          "The United States of America had a President so exceedingly fond of new clothes that he spent a lot of money (of which he had much, gained honestly by cheating poor orphans and widows and innocent dumbbells) on being well dressed. He cared nothing about the Constitution or the Truth. He was more interested in, according to him, “grabbing women's pussies”. He was known to be one of the world's greatest TV watchers, especially when he himself was the subject, which he mostly was. ",
          "In the great city where he once lived, life was always gay [sic]. Every day many strangers came to town, and among them one day came a South African American named Musk. He let it be known that he was a weaver of conspiracy theories as well as clothes, and he said he could weave the most magnificent lies imaginable. Not only were his colors and patterns uncommonly fine, but clothes made of this cloth, with the pockets full of conspiracy theories, had a wonderful way of becoming invisible to anyone who was unfit for his or her office, or who was unusually stupid and unhinged, or was not sufficiently loyal to the President. (The latter quality did not apply to the President, for he was always loyal to himself, if not to anyone else.)",
          '"Those would be just the clothes for me," thought the President. "If I wear them I will be able to discover which swine in my administration are not blindly loyal to me." He paid the South African-American swindler a large sum of money to start work at once.',
        ],
        imgUrl: "https://southerncrossreview.org/128/trump-statue-small.jpg",
        link: "https://southerncrossreview.org/128/new-clothes.html",
        poem: false,
        mainImg: false,
      },
    ],
    "Children's Corner": [
      {
        title: "The Seventh Birthday",
        "sub-title": "",
        author: "Frank Thomas Smith",
        description: [
          "Usually Nicky's mother has to call him at least three times, kiss him twice and pull his ear gently once before he gets up in the morning. But not today.",
          '"Nicky," she says, "it\'s time to get up. Do you remember what day it is?"',
          "What day? Nicky thinks – Monday, Tuesday? Then he remembers: his birthday! He jumps out of bed and cries, \"It's my birthday, I'm seven years old!\"",
          "Before going to school, Nicky's mother and father and his little sister, Jeannie, sing Happy Birthday to You and he opens his presents, which have been placed around a candle on the living room table. They call it the \"birthday table\". It is covered with a light-green cloth on the children's birthdays and the only light is from the beeswax candle, which sheds a magical glow throughout the room.",
          "Their dog Hachi, who is very old, for a dog that is, watches everything and wags his tail slowly from time to time. He is happy when the children are happy, although you couldn't tell it from looking at his face, which always has the same expression.",
        ],
        imgUrl: "https://southerncrossreview.org/146/froddo-1.jpg",
        link: "https://southerncrossreview.org/146/seventh-birthday.html",
        poem: false,
        mainImg: false,
      },
      {
        title: "The Magic Mound",
        "sub-title": "Chapter 18",
        author: "Frank Thomas Smith",
        description: [
          "Alaram wanted Sergio to explain death and rebirth to the rest of the men, but Sergio reminded him that he was only a boy and would find it difficult to speak about that subject to a group of men. Also, he argued, the men accepted Alaram as their king and would be more likely to believe him that Sergio. This argument did not really convince Alaram, but he agreed to speak to the men himself because he saw that Sergio didn't want to.",
          "The next morning the men stood in circle around Alaram. He insisted that Mireya, Sergio and Divino stand with him in the circle.",
          '"Friends and brothers," Alaram began, "I wish to present to you these two boys who have come to us on the mound from Brazil, from whence, as you know, Mireya also came. They are only boys, it is true, but they possess great wisdom imparted to them by their teacher, Dona Ute. Mireya is also a wise child, which leads me to believe that Brazil is a land of wise people." Mireya and Sergio glanced at each other and smiled, for they knew that most of the people in Brazil were not wise at all and that their own knowledge was very limited. Sergio also knew, because Dona Ute had told him so, that true wisdom is exceedingly rare, not only in Brazil, but in the world.',
        ],
        imgUrl: `${prefix}magic-mound-cover.png`,
        link: `${prefix}magic-mound-18-19.html`,
        poem: false,
        mainImg: false,
      },
      {
        title: "How the Donkey Got His Cross",
        "sub-title": "",
        author: "por Frank Thomas Smith",
        description: [
          "Donkeys are stubborn, all of them, but some are more stubborn than others. Mine is the most stubborn one I know. If you want him to walk, he stands still. If you want him to stand still, he walks. If you want him to work, he sleeps or pretends to sleep. If you want him to sleep...but no, who would want him to sleep? But if you did want him to, he would surely stay awake all night.",
          "Nevertheless, I love my donkey very much because he's a good friend, doesn't lie and doesn't hurt anyone. And he's always willing to take me on his back to the teacher's house and he waits all morning until I leave and takes me home. Some of the kids have ponies, but none of them rides a donkey because, as I said, they are very stubborn.",
          "My donkey doesn't let anyone but me on his back and if you forced him to do so, he wouldn't move a step forward. You could push him, beat him, beg him; he wouldn't move. He won't let anyone else lead him either.",
          "One night I dreamed about him. He was tied to a tree on the road that leads to the teacher's house and we were waiting there, I don't know for what. Then I saw two men approach. They looked at the donkey and seemed pleased to see him. They untied his rope and led him away. The donkey went with them without even protesting. I didn't protest either and I followed them at a safe distance. My dream ended there, interrupted by the cock crowing.",
        ],
        imgUrl: "https://southerncrossreview.org/114/donkey-jesus.jpg",
        link: "https://southerncrossreview.org/114/donkey-cross.html",
        poem: false,
        mainImg: false,
      },
    ],
    Fiction: [
      {
        title: "Love in the Life of Spies",
        "sub-title": "",
        author: "Frank Thomas Smith",
        description: [
          "Paternostro East Berlin, 1974",
          "Judith Baumgartner and Dr. Hans Staudenmaier were huddled over a map of West Berlin in a small basement room with no windows. A long florescent light on the ceiling hummed like a beehive. They were preparing a list of objectives that the Soviet Mission Military Patrol was to photograph on its next rounds. Actually they were suggesting, the Russians would decide. It was frustrating work for they seldom knew if their allies would approve their suggestions. Hans Staudenmaier, a robust middle-aged man with a goatee and rimless glasses, was doing the selecting and dictating to Judith, who made notes in German, which she would later translate into Russian in a stenographer's spiraled notebook made in West Germany. She was young and pretty and intense; there was a certain hardness about her which would have seemed unusual in one so young if we did not know that they were in the building in East Berlin that housed the STASI – East Germany’s State Security organization. It was difficult for them to think of objectives in West Berlin that hadn’t already been photographed.",
        ],
        imgUrl: `${prefix}love-in-the-life.jpg`,
        link: `${prefix}love-in-the-life-2.html`,
        poem: false,
        mainImg: false,
      },
      {
        title: "The Queen of Spades",
        "sub-title": "",
        author: "Alexander Pushkin",
        description: [
          "Three days after this fatal night, at nine o'clock in the morning, Hermann entered the convent where the last respects were to be paid to the mortal remains of the old Countess. He felt no remorse, though he could not deny to himself that he was the poor woman's assassin. Having no religion, he was, as usual in such cases, very superstitious; believing that the dead Countess might exercise a malignant influence on his life, he thought to appease her spirit by attending her funeral.",
          "The church was full of people, and it was difficult to get in. The body had been placed on a rich catafalque, beneath a canopy of velvet. The Countess was reposing in an open coffin, her hands joined on her breast, with a dress of white satin, and head-dress of lace. Around the catafalque the family was assembled, the servants in black caftans with a knot of ribbons on the shoulder, exhibiting the colours of the Countesses coat of arms. Each of them held a wax candle in his hand. The relations, in deep mourning—children, grandchildren, and great-grandchildren—were all present; but none of them wept.",
        ],
        imgUrl: `${prefix}queen-of-spades-5-6.png`,
        link: `${prefix}queen-of-spades-5-6.html`,
        poem: false,
        mainImg: false,
      },
    ],
    "Current Events": [
      {
        title: "Requiem for an Empire",
        "sub-title":
          "How America’s Strongman Will Hasten the Decline of U.S. Global Power",
        author: "Alfred McCoy",
        description: [
          "Some 15 years ago, on December 5, 2010, a historian writing for TomDispatch made a prediction that may yet prove prescient. Rejecting the consensus of that moment that U.S. global hegemony would persist to 2040 or 2050, he argued that “the demise of the United States as the global superpower could come… in 2025, just 15 years from now.”",
          "To make that forecast, the historian conducted what he called “a more realistic assessment of domestic and global trends.” Starting with the global context, he argued that, “faced with a fading superpower,” China, India, Iran, and Russia would all start to “provocatively challenge U.S. dominion over the oceans, space, and cyberspace.” At home in the United States, domestic divisions would “widen into violent clashes and divisive debates… Riding a political tide of disillusionment and despair, a far-right patriot captures the presidency with thundering rhetoric, demanding respect for American authority and threatening military retaliation or economic reprisal.” But, that historian concluded, “the world pays next to no attention as the American Century ends in silence.”",
        ],
        imgUrl: `${prefix}mccoy-main.png`,
        link: `${prefix}mccoy-requiem.html`,
        poem: false,
        mainImg: false,
      },
    ],
    Memoir: [
      {
        title: "Exiles End",
        "sub-title": "",
        author: "Frank Thomas Smith",
        description: [
          "A few hours later we pulled into Fort Dix in New Jersey. All I remember about that place is that they gave us uniforms and shots against diseases I never heard of, and they had us cutting officers' lawns. After a couple of days some of us boarded another bus, this time an overnight journey to Fort Breckinridge in Kentucky — and things began to get interesting. The first shock was that we were in Company A, 101 Airborne Infantry Division. When we saw that sign over the door of the Company HQ, we almost fainted — figuratively of course. I ain't jumpin outta some airplane, someone yelled. We learned that 101 Airborne Division — also known as the Screaming Eagle — was now in a basic training mode, so we wouldn't be jumping any time soon.",
          "",
          "The war in Korea wasn't going very well at that time, something even those of us who kept up with the news weren't aware of because actual news reports, that is, those that told the public the truth, were far and in between those days. That meant that there were very few noncoms and officers around to train new guys like us because they were so badly needed in Korea. In fact, we only had the Company Commander, a lieutenant who was really a lawyer. Then there was First Sergeant Jackson, a battle-scarred veteran who was in Hawaii when the Japs attacked. He ran the company, but I guess First Sergeants run most companies. The Field First Sergeant was Silas Taylor, a wiry little guy from Georgia who had spent a lot of time in Korea, was wounded a few times, and even had a Silver Star. I was really surprised — we all were — to learn that he was only twenty-one years old, because he had eyes that looked a lot older. There were no more noncoms, except for Sgt. Alphabet, who ran the quartermaster section, so didn't really count. On our first day Sgt. Taylor asked if anyone had military experience. No one had, but one guy was a cop in civilian life, so they made him Acting Platoon Leader. Another guy was a lifeguard at Jones Beach, so they made him one too. And so on. I thought of mentioning that I had been a Boy Scout but decided not to. They probably would have made me Acting Company Commander.",
        ],
        imgUrl: `${prefix}exiles-end-main.png`,
        link: `${prefix}exiles-end-4.html`,
        poem: false,
        mainImg: false,
      },
    ],
  };

  const articlesKeys = Object.keys(articles);

  // Uncheck all other hidden checkboxes when one is checked
  // colapses nav-menu dropdowns when a new one is expanded
  function createNavMenu(navMenuElement) {
    function createSingleLink(title, id) {
      const div = document.createElement("div");
      const p = document.createElement("p");
      p.className = "nav-menu-links";
      p.innerText = title;
      p.dataset.title = id;
      div.appendChild(p);
      navMenuElement.appendChild(div);
    }
    function createMenuLinks() {
      //letters link
      const div = document.createElement("div");
      const p = document.createElement("p");
      const a = document.createElement("a");
      a.href = "https://southerncrossreview.org/161/letters161.html";
      a.style.color = "inherit";
      a.style.textDecoration = "none";
      p.className = "nav-menu-links";
      a.innerText = "Letters to the Editor";
      p.dataset.title = "letters";
      p.appendChild(a);
      div.appendChild(p);
      navMenuElement.appendChild(div);
      //end letters link

      articlesKeys.forEach((category) => {
        // create dropdown menu if there is more than one article in category
        if (articles[category].length === 1) {
          if (!articles[category][0]["title"]) return;
          const div = document.createElement("div");
          const p = document.createElement("p");
          const title = articles[category][0]["title"]
            .toLowerCase()
            .replace(/[^a-zA-Z0-9]/g, "");
          p.className = "nav-menu-links";
          p.innerText = category;
          p.dataset.title = title;
          div.appendChild(p);
          navMenuElement.appendChild(div);
        } else if (articles[category].length > 1) {
          const content = document
            .querySelector("[data-dropdown-template]")
            .content.cloneNode(true);
          const hiddenInput = content.querySelector("[data-hidden-input]");
          const label = content.querySelector("[data-label]");
          const title = content.querySelector("[data-title]");
          const list = content.querySelector("[data-list]");
          hiddenInput.id = `${category}-input`;
          label.htmlFor = hiddenInput.id;
          title.innerHTML = `${category} &#9660;`;
          articles[category].forEach((article) => {
            const li = document.createElement("li");
            const title = article["title"]
              .replace(/[^a-zA-Z0-9]/g, "")
              .toLowerCase();
            li.className = "nav-menu-links";
            li.id = article["title"];
            li.innerText = `${article.title} - ${article.author}`;
            li.dataset.title = title;
            list.appendChild(li);
          });
          navMenuElement.appendChild(content);
        }
      });
      //createSingleLink("Letters to the Editor", "pic-nav-menu");
      createSingleLink("Other Sections", "pic-nav-menu");
      createSingleLink("Subscribe", "subscribe");
    }
    createMenuLinks();

    //event listeners
    const navmenuLinkArray = Array.from(
      navMenuElement.querySelectorAll(".nav-menu-links"),
    );
    const scrollToTarget = (target) => {
      const headerOffset = 120;
      const elementPositon = target.getBoundingClientRect().top;
      const offsetPosition = elementPositon + window.pageYOffset - headerOffset;
      window.scrollTo({
        top: offsetPosition,
        behavior: "smooth",
      });
    };

    navmenuLinkArray.forEach((link) => {
      if (link.dataset.title === "letters") return;
      link.addEventListener("click", () => {
        let article = document.querySelector(`#${link.dataset.title}`);
        scrollToTarget(article);
        if (menuBar.dataset.opened === "true") {
          menuBar.dataset.opened = "false";
        }
      });
    });

    const navChekboxes = Array.from(
      document.querySelectorAll(".nav-hidden-inputs"),
    );

    navChekboxes.forEach((input) => {
      input.addEventListener("change", () => {
        navChekboxes.forEach((element) => {
          if (element === input) return;
          element.checked = false;
        });
      });
    });
  }
  function checkAndReduce() {
    const title = mainPage.querySelector("h2");
    if (title.innerText.length > 20) {
      title.style.fontSize = "2.5em";
    }
  }

  function appendPicNavMenu() {
    const picNavDiv = document
      .querySelector("[data-pic-nav]")
      .content.cloneNode(true);
    const nav = picNavDiv.querySelector("nav");
    nav.id = "pic-nav-menu";
    const subscribeDiv = document
      .querySelector("[data-subscribe-div]")
      .content.cloneNode(true);
    const subscribe = subscribeDiv.querySelector("div");
    subscribe.id = "subscribe";
    const firstChild = document.querySelector("#main-div").lastElementChild;
    const navDiv = document.createElement("div");
    navDiv.appendChild(picNavDiv);
    navDiv.appendChild(subscribe);
    firstChild.insertAdjacentElement("afterend", navDiv);
  }

  function createArticlePeek(object) {
    const keys = Object.keys(object);
    keys.forEach((key) => {
      if (keys.indexOf(key) !== 0) {
        const categoryTitle = document.createElement("h1");
        categoryTitle.innerText = key;
        categoryTitle.className = "category-title";
        mainPage.appendChild(categoryTitle);
      }
      object[key].forEach((article) => {
        const articleDiv = document
          .querySelector("[data-article-template]")
          .content.cloneNode(true);
        const articleInnerDiv = articleDiv.querySelector("article");
        const div1 = articleDiv.querySelector("div");
        div1.cloneNode(true);
        const titleElement = articleDiv.querySelector("h2");
        const author = articleDiv.querySelector("h1");
        const subTitle = articleDiv.querySelector("h3");
        const description = articleDiv.querySelector(
          "[data-article-description]",
        );
        const img = articleDiv.querySelector("[data-article-img]");
        const linkContainer = articleDiv.querySelector("[data-link-container]");
        const link = articleDiv.querySelector("[data-article-link]");
        articleInnerDiv.id = article["title"]
          .toLowerCase()
          .replace(/[^a-zA-Z0-9]/g, "");
        titleElement.innerHTML = article["title"];
        author.innerHTML = article["author"];
        if (article["sub-title"] && article["sub-title"].length !== 0) {
          subTitle.innerText = article["sub-title"];
        }
        img.src = article["imgUrl"];
        linkContainer.style.display = "flex";
        linkContainer.style.width = "100%";
        linkContainer.style.justifyContent = "center";
        link.href = article["link"];
        link.style.fontSize = "130%";
        link.style.fontWeight = "500";
        // Special Atributes for "Featured Art"
        if (article["mainImg"]) {
          //   doubleFeaturedArt({
          //     div1,
          //     div2,
          //     titleElement,
          //     subTitle,
          //     articleInnerDiv,
          //     img,
          //     description,
          //   });
          titleElement.style.marginBottom = "1em";
          link.style.display = "none";
          img.style.maxWidth = "40%";
          img.style.maxHeight = "100%";
          img.style.marginLeft = "auto";
          img.style.marginRight = "auto";
          img.style.marginBottom = "1em";
          img.style.float = "none";
          img.insertAdjacentElement("afterend", author);
        }
        // if its a poem, make the div and link float (so the text doesn't go under the img)
        if (article["poem"]) {
          description.style.float = "left";
          link.style.clear = "left";
          link.style.float = "right";
        }
        let i = 1;
        const className = article["title"]
          .replace(/[^a-zA-Z0-9]/g, "")
          .toLowerCase();
        description.id = `${className}-paragraphs-div`;
        link.id = `${className}-main-link`;
        article["description"].forEach((descriptionParagraph) => {
          const paragraph = document.createElement("p");
          paragraph.innerHTML = descriptionParagraph;
          paragraph.className = `${className}-paragraph-${i}`;
          description.appendChild(paragraph);
          i++;
        });
        mainPage.appendChild(articleDiv);
        checkAndReduce();
      });
    });
    appendPicNavMenu();
  }

  function mobilePortrait() {
    if (previousStylesheet.dataset.stylesheet == "mobile") return
    pageName.innerHTML = "Menu";
    //create elements in mobile-navbar


    createNavMenu(navMobile);

    //get modify input and label "for" in mobile nav
    const navMobileInputs = Array.from(navMobile.querySelectorAll("input"));
    const navMobileLabels = Array.from(navMobile.querySelectorAll("label"));

    navMobileInputs.forEach(input => {
      input.id += "-mobile";
    });

    navMobileLabels.forEach(label => {
      label.htmlFor += "-mobile";
    });

    //append elements
    topBar.appendChild(navMobile);

    //create observer functions
    let observerMobileMenu = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        if (mutation.type == "attributes") {
          if (menuBar.dataset.opened == "true") {
            navMobile.classList.add("open");
            menuButton.classList.add("close");
          } else {
            navMobile.classList.remove("open");
            menuButton.classList.remove("close");
          }
        }
      });
    });

    //create menu open button - three lines
    for (let i = 0; i < 3; i++) {
      const menuButtonLine = document.createElement("div");
      menuButtonLine.className = "menu-button-line";
      menuButton.appendChild(menuButtonLine);
    }
    //give new class to desktop menu
    navMobile.className = "nav-menu menu-mobile desktop-hide";
    //observe for changes
    observerMobileMenu.observe(menuBar, {
      attributes: true,
    });

    //menu button listener
    menuButton.addEventListener("click", () => {
      if (menuBar.dataset.opened === "false") {
        menuBar.dataset.opened = "true";
      } else {
        menuBar.dataset.opened = "false";
      }
    });
    previousStylesheet.dataset.stylesheet = "mobile";

    // musicLinks.innerHTML = "Words and Music"
  }

  //scroll to top on refresh
  window.onbeforeunload = function () {
    window.scrollTo(0, 0);
  };

  //create elements for data-attributes

  // function to set data atributes acording to screen width
  function setStylesheetDataAttr() {
    if (screen.width <= 650) {
      if (stylesheetSelector.dataset.stylesheet == "mobile") return
      stylesheetSelector.dataset.stylesheet = "mobile";
    } else if (screen.width >= 651 && screen.width < 1200) {
      if (stylesheetSelector.dataset.stylesheet == "medium") return
      stylesheetSelector.dataset.stylesheet = "medium";
    } else {
      if (stylesheetSelector.dataset.stylesheet == "desktop") return
      stylesheetSelector.dataset.stylesheet = "desktop";
    }
  }

  //execute on rezise
  window.addEventListener("resize", () => {
    setStylesheetDataAttr();
  });

  //ovserve changes on data-attributes and execute functions
  let observerStylesheetAttr = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.type == "attributes") {
        if (stylesheetSelector.dataset.stylesheet === "mobile") {
          mobilePortrait();
        }
      }
    });
  });
  observerStylesheetAttr.observe(stylesheetSelector, {
    attributes: true,
  });

  //onload functions
  window.addEventListener("load", () => {
    setStylesheetDataAttr();
    mainPage.offsetTop;
    introScreen.classList.add("fade-out");
    setTimeout(() => {
      introScreen.style.display = "none";
      document.querySelector("html").style.overflowY = "visible";
      lightDarkWarning.classList.remove("desktop-hide", "mobile-hide");
    }, 1000);

    //local storage - if exists change theme
    if (!localStorage.getItem("style")) return
    lightDarkWarning.style.display = "none";
    const lightOrDark = localStorage.getItem("style");
    if (lightOrDark === "dark") {
      stylesheet.href = `${prefix}css/dark.css`;
    }

    if (screen.width <= 650) {
      mobilePortrait();
    }
  });

  //remove light-and-dark warning onclick
  lightDarkWarning.addEventListener("click", () => {
    lightDarkWarning.style.display = "none";
  });

  // Toggle Stylesheets
  toggleStylesheetLightButton.addEventListener("click", () => {
    stylesheet.href = `${prefix}css/light.css`;
    localStorage.setItem("style", "light");
  });
  toggleStylesheetDarkButton.addEventListener("click", () => {
    stylesheet.href = `${prefix}css/dark.css`;
    localStorage.setItem("style", "dark");
  });

  // Sticky navbar
  const stickyFunc = () => {
    const limit = mainPage.offsetTop;
    const navCol = document.querySelector("#sticky-div  ");
    if (window.pageYOffset + 50 >= limit) {
      navCol.classList.add("fixed-nav-col");
    } else {
      navCol.classList.remove("fixed-nav-col");
    }
  };

  //observer function, scroll-in abnormal logo when footer is 50% visible
  let notFirstTime = 0;
  const observer = new IntersectionObserver(
    entries => {
      if (entries[0].isIntersecting === true) {
        if (notFirstTime > 0) return
        abnormalLogoStylesheet.href = `${prefix}css/logo2.css`;
        abnormalLogo.classList.add("logo-animation");
        notFirstTime++;
      }
    },
    { threshold: [0.5] }
  );

  observer.observe(footerAbnormal);

  createNavMenu(navMenu);
  createArticlePeek(articles);

  window.onscroll = () => {
    stickyFunc();
  };

})();