body {
    width: 99vw;
    color: white;
    background-color: hsl(223, 20%, 12%);
    margin: 0 auto;
    font-size: large;
    cursor: default;
    background: radial-gradient(ellipse at bottom, hsl(236, 20%, 20%) 40%, #090a0f 100%);
    background-size: 120% 300%;
    background-repeat: no-repeat;
    font-family: "Open Sans", sans-serif;
    top: 0px !important;
}

h1, h2, h3, p {margin-block: 0 auto; line-height: 1.3; letter-spacing: 0.4px;}

/* scrollbar style */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: black;}
::-webkit-scrollbar-thumb {background: hsl(0, 0%, 15%);}
::-webkit-scrollbar-thumb:hover {background: hsl(0, 0%, 20%);}

/* Google Translate tool */
#google_translate_element {display: flex; justify-content: end;}
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:nth-of-type(1), div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:nth-of-type(2), div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:nth-of-type(3) {display:none;}
div#google_translate_element div.goog-te-gadget-simple {margin:0px; padding:10px; display:inline-block; background-color:black; border:none; border-radius:10px; font-size:16px;}
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value {color:rgb(255, 0, 0);}
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value::after{content:"Translate Site"; padding-right:5px;}
div#google_translate_element div.goog-te-gadget-simple img:nth-of-type(1) {display:none;}
#\:0\.targetLanguage > span > a > span:nth-child(1) {color: white;}
.VIpgJd-ZVi9od-ORHb-OEVmcd {display: none;}

.hero {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    margin-inline: 10px;
}

.middle-content {
    display: inline;
    align-content: center;
    flex-direction: column;
    width: 100%;
    height: 99vh;
    margin-left: 80px;
    z-index: 99;
    text-wrap: wrap;
}

.middle-content h1 {
    line-height: 1;
    margin-bottom: 10px;
}

.middle-content p {
    text-indent: 3%;
    text-align: justify;
    line-height: 1.2;
    margin: 0;
}

.allArticles {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    margin: 0 auto;
    z-index: 99;
}

.article {
    display: flex;
    flex-direction: row;
    width: 70vw;
    border: hsl(0, 0%, 59%) 1px solid;
    border-radius: 10px;
    background-color: hsla(245, 26%, 9%, 0.8);
    padding-inline: 20px;
    margin-bottom: 30px;
}

.articleImage {
    width: 300px;
    scale: 0.95;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    margin: 0 auto;
    margin-right: 20px;
}

.articleTags {
    display: flex;
    height: 100%;
    align-items: end;
    color: hsl(0, 0%, 50%);
}

.article-content {
    display: flex;
    flex-direction: column;
    width: 80%;
    text-align: center;
}

.article-content > p {
    text-align: justify;
}

.articleModal {
    display: flex;
    text-align: center;
    z-index: 99;
}

.modalContent {
    text-align: justify;
    width: 90%;
    margin: 0 auto;
}

.modalImage {
    display: flex;
    width: 90%;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    margin: 0 auto;
}

.article:hover{
    cursor: pointer;
}

.backButton:hover {
    cursor: pointer;
}

@media screen and (max-width: 700px) {
    .middle-content {display: flex; flex-direction: column !important; margin: 0 auto;}
    .middle-content p {text-indent: 0%;}
    .article {flex-direction: column; width: 80vw;}
    .article-content {width: 100%;}
    .articleImage {margin-right: 0px;}
}

.stars {
    display: flex;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1703px 1208px #FFF, 381px 207px #FFF, 1516px 1990px #FFF, 1960px 982px #FFF, 922px 1278px #FFF, 689px 1766px #FFF, 538px 554px #FFF, 802px 1529px #FFF, 871px 1805px #FFF, 228px 1830px #FFF, 353px 186px #FFF, 1873px 1154px #FFF, 494px 1244px #FFF, 1415px 261px #FFF, 1020px 1990px #FFF, 1924px 1169px #FFF, 1205px 464px #FFF, 596px 830px #FFF, 1319px 504px #FFF, 953px 1850px #FFF, 408px 1360px #FFF, 569px 1704px #FFF, 1367px 729px #FFF, 807px 1845px #FFF, 572px 825px #FFF, 523px 1089px #FFF, 1405px 1622px #FFF, 1352px 423px #FFF, 1247px 1758px #FFF, 1117px 920px #FFF, 983px 352px #FFF, 175px 1351px #FFF, 962px 260px #FFF, 918px 1530px #FFF, 1184px 935px #FFF, 201px 473px #FFF, 90px 1759px #FFF, 211px 933px #FFF, 1887px 171px #FFF, 177px 101px #FFF, 844px 346px #FFF, 283px 1821px #FFF, 1236px 1225px #FFF, 173px 1875px #FFF, 24px 1776px #FFF, 277px 804px #FFF, 1714px 715px #FFF, 937px 1882px #FFF, 1708px 1405px #FFF, 173px 1847px #FFF, 1902px 1160px #FFF, 1725px 1270px #FFF, 36px 18px #FFF, 1612px 1467px #FFF, 1390px 1733px #FFF, 927px 1315px #FFF, 1907px 1337px #FFF, 1855px 1454px #FFF, 1033px 1425px #FFF, 1450px 1359px #FFF, 1422px 771px #FFF, 256px 343px #FFF, 1581px 340px #FFF, 1180px 247px #FFF, 191px 882px #FFF, 372px 1171px #FFF, 1509px 937px #FFF, 1018px 1829px #FFF, 121px 152px #FFF, 327px 767px #FFF, 1438px 1421px #FFF, 321px 905px #FFF, 616px 245px #FFF, 1957px 1520px #FFF, 1811px 1924px #FFF, 1454px 1778px #FFF, 1507px 822px #FFF, 649px 218px #FFF, 362px 1567px #FFF, 1637px 145px #FFF, 115px 466px #FFF, 345px 935px #FFF, 112px 1019px #FFF, 1440px 1910px #FFF, 1280px 1367px #FFF, 1505px 890px #FFF, 788px 927px #FFF, 753px 1273px #FFF, 1924px 1714px #FFF, 495px 1149px #FFF, 267px 1851px #FFF, 1293px 1431px #FFF, 1159px 433px #FFF, 1725px 1170px #FFF, 1067px 296px #FFF, 746px 463px #FFF, 412px 349px #FFF, 1193px 1421px #FFF, 564px 455px #FFF, 1675px 589px #FFF;
    animation: animStar 300s linear infinite;
}
  
.stars:after {
    content: " ";
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1703px 1208px #FFF, 381px 207px #FFF, 1516px 1990px #FFF, 1960px 982px #FFF, 922px 1278px #FFF, 689px 1766px #FFF, 538px 554px #FFF, 802px 1529px #FFF, 871px 1805px #FFF, 228px 1830px #FFF, 353px 186px #FFF, 1873px 1154px #FFF, 494px 1244px #FFF, 1415px 261px #FFF, 1020px 1990px #FFF, 1924px 1169px #FFF, 1205px 464px #FFF, 596px 830px #FFF, 1319px 504px #FFF, 953px 1850px #FFF, 408px 1360px #FFF, 569px 1704px #FFF, 1367px 729px #FFF, 807px 1845px #FFF, 572px 825px #FFF, 523px 1089px #FFF, 1405px 1622px #FFF, 1352px 423px #FFF, 1247px 1758px #FFF, 1117px 920px #FFF, 983px 352px #FFF, 175px 1351px #FFF, 962px 260px #FFF, 918px 1530px #FFF, 1184px 935px #FFF, 201px 473px #FFF, 90px 1759px #FFF, 211px 933px #FFF, 1887px 171px #FFF, 177px 101px #FFF, 844px 346px #FFF, 283px 1821px #FFF, 1236px 1225px #FFF, 173px 1875px #FFF, 24px 1776px #FFF, 277px 804px #FFF, 1714px 715px #FFF, 937px 1882px #FFF, 1708px 1405px #FFF, 173px 1847px #FFF, 1902px 1160px #FFF, 1725px 1270px #FFF, 36px 18px #FFF, 1612px 1467px #FFF, 1390px 1733px #FFF, 927px 1315px #FFF, 1907px 1337px #FFF, 1855px 1454px #FFF, 1033px 1425px #FFF, 1450px 1359px #FFF, 1422px 771px #FFF, 256px 343px #FFF, 1581px 340px #FFF, 1180px 247px #FFF, 191px 882px #FFF, 372px 1171px #FFF, 1509px 937px #FFF, 1018px 1829px #FFF, 121px 152px #FFF, 327px 767px #FFF, 1438px 1421px #FFF, 321px 905px #FFF, 616px 245px #FFF, 1957px 1520px #FFF, 1811px 1924px #FFF, 1454px 1778px #FFF, 1507px 822px #FFF, 649px 218px #FFF, 362px 1567px #FFF, 1637px 145px #FFF, 115px 466px #FFF, 345px 935px #FFF, 112px 1019px #FFF, 1440px 1910px #FFF, 1280px 1367px #FFF, 1505px 890px #FFF, 788px 927px #FFF, 753px 1273px #FFF, 1924px 1714px #FFF, 495px 1149px #FFF, 267px 1851px #FFF, 1293px 1431px #FFF, 1159px 433px #FFF, 1725px 1170px #FFF, 1067px 296px #FFF, 746px 463px #FFF, 412px 349px #FFF, 1193px 1421px #FFF, 564px 455px #FFF, 1675px 589px #FFF;
}
  
@keyframes animStar {
    from {transform: translateY(0px);}
    to {transform: translateY(-2000px);}
}