html{scroll-behavior: smooth;}

  body{
     margin: 0;
     padding: 0;
     color: var(--color);
     background: var(--background);
     text-align: left;
     font-family: "Open Sans", sans-serif;
     --color: #181818;
     --background: #f6f6f6;
     --theme: #2ecc71;
     --theme2: #27ae60;
   }

   #loadingScreen{
     width: 100%;
     height: 100vh;
     background: var(--theme);
     color: #fff;
     z-index: 1010;
     position: fixed;
     top: 0;
     left: 0;
     display: block;
     transition: all 300ms linear;
   }

   #loader{
     width: 30vw;
     height: 100vh;
     background: #fff;
     transition: all 300ms linear;
     animation: loadingAnimation 2.5s infinite;
   }

   @keyframes loadingAnimation{
     0%, 100%{
       margin-left: 0vw;
       width: 20vw;
     }
     50%{
       margin-left: 100vw;
       width: 60vw;
     }
   }

   @keyframes loadFadeOut{
     0%{
       opacity: 1;
     }
     100%{
       opacity: 0;
     }
   }

   #content{
     width: 100%;
     max-width: 1100px;
     margin: auto;
   }

   #navbar{
     width: 100%;
     height: 56px;
     background: none;
     top: 0;
     user-select: none;
   }

   #navbar h1{
     margin: 15px;
   }

   #credit{
     font-size: 14px;
     font-style: normal;
   }

   #home{
     display: block;
   }

   #read-later, #settings{
     display: none;
     padding: 10px;
   }

   #feed{
     margin: auto;
   }

   #greetings{
     width: calc(100% - 40px);
     max-width: 650px;
     height: auto;
     margin: 20px;
     border-radius: 12px;
     color: #f6f6f6;
     user-select: none;
   }

   .news-object{
     width: calc(100% - 40px);
     max-width: 650px;
     height: auto;
     margin: 20px;
     background: var(--theme);
     border-radius: 12px;
     color: #f6f6f6;
     padding-top: 5px;
     padding-bottom: 5px;
     user-select: none;
   }

   .news-url{
     display: none;
   }

   .news-object img{
     width: 100%;
   }

   .news-object h1{
     margin: 10px;
     font-size: 22px;
   }

   .news-description{
     display: inline-block;
   }

   .news-object p{
     text-align: justify;
     width: 80%;
     margin: 10px;
     float: left;
   }

   .news-object button{
     width: 42px;
     max-width: 56px;
     height: 42px;
     max-height: 56px;
     margin: 10px;
     font-size: 24px;
     color: #f6f6f6;
     border: none;
     border-radius: 12px;
     background: var(--theme2);
     outline: none;
     float: right;
   }

   .news-object-i{
     margin-left: -5px;
   }

   .all-feed-items{
     width: calc(100% - 40px);
     height: auto;
     margin: 20px;
     margin-top: 0;
     margin-bottom: 0;
     background: var(--theme);
     color: #f6f6f6;
     user-select: none;
     font-size: 16px;
     /*display: none;*/
   }

   .all-feed-items:first-of-type{
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
   }

   .all-feed-items:last-of-type{
     border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;
   }

   .all-feed-items i{
     font-size: 22px;
     display: inline-flex;
     margin-right: 5px;
   }

   .all-feed-items p{
     display: inline-flex;
   }

   .all-feed-items button{
     width: 36px;
     height: 100%;
     margin: 20px;
     margin-top: 0;
     margin-bottom: 0;
     background: #e74c3c;
     color: #f6f6f6;
     user-select: none;
     font-size: 18px;
     border: none;
     border-top-right-radius: 12px;
     border-bottom-right-radius: 12px;
     outline: none;
     right: 0;
   }

   #settings{
     text-align: center;
   }

   #settings button{
     width: calc(100% - 40px);
     height: 40px;
     margin: 20px;
     margin-bottom: 10px;
     background: var(--theme);
     color: #f6f6f6;
     user-select: none;
     font-size: 16px;
     border: none;
     border-radius: 12px;
     outline: none;
   }

   #settings select{
     width: calc(100% - 40px);
     height: 40px;
     margin: 20px;
     margin-bottom: 10px;
     background: var(--theme);
     color: #f6f6f6;
     user-select: none;
     font-size: 16px;
     border: none;
     border-radius: 12px;
     outline: none;
     text-align: center;
   }

   #otherSettings{
     text-align: left;
     padding-left: 20px;
     padding-right: 20px;
   }

   .switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
     user-select: none;
     margin-top: 10px;
   }

   .switch input {
     opacity: 0;
     width: 0;
     height: 0;
   }

   .switchSlider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #ccc;
     transition: .4s;
     border-radius: 34px;
     display: inline-block;
   }

   .switchSlider:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background: #fff;
     transition: .4s;
     border-radius: 50%;
   }

   .switch input:checked + .switchSlider {
     background-color: var(--theme);
   }

   .switch input:checked + .switchSlider:before {
     transform: translateX(26px);
     -webkit-transform: translateX(26px);
     -ms-transform: translateX(26px);
   }

   .switchText{
     display: inline-block;
     white-space: nowrap;
     margin: 0;
     margin-left: 80px;
     position: relative;
     top: -15px;
     text-align: center;
     user-select: none;
   }

   #your-profile{
     width: calc(100% - 40px);
     height: auto;
     margin: 20px;
     margin-bottom: 10px;
     background: var(--theme);
     color: #f6f6f6;
     user-select: none;
     font-size: 16px;
     border: none;
     border-radius: 12px;
     display: none;
   }

   #your-profile p, i{
     display: inline-flex;
   }

   #navigation{
     width: 100%;
     height: 110px;
     max-height: 250px;
     margin: 0;
     position: fixed;
     bottom: 0;
     background: var(--background);
     opacity: 0.7;
     -webkit-backdrop-filter: blur(4px);
     backdrop-filter: blur(4px);
     display: flex;
     justify-content: space-around;
     flex-direction: row;
     flex-wrap: nowrap;
     text-align: center;
   }

   .navigation-object{
     width: auto;
     height: 100%;
     margin: 0;
     padding: 15px;
     font-size: 16px;
     user-select: none;
     background: none;
     position: static;
     opacity: 1;
   }

   .navigation-object:hover{
     background: none;
   }

   .navigation-object i{
     font-size: 28px;
     margin: 0;
   }

   #footer{
     text-align: center;
     margin: 0;
     margin-top: 40px;
     margin-bottom: 140px;
   }

   #tutorials{
     width: 100%;
     height: 100vh;
     margin: auto;
     display: block;
     z-index: 999;
     position: fixed;
     top: 0;
     left: 0;
     background: var(--background);
     text-align: center;
     padding-top: 56px;
     user-select: none;
   }

   .tutorialscreen{
     display: none;
   }

   .tutorialscreen button{
     width: calc(100% - 40px);
     height: 40px;
     background: var(--theme);
     color: #f6f6f6;
     user-select: none;
     font-size: 16px;
     border: none;
     border-radius: 12px;
     outline: none;
     bottom: 40px;
     left: 20px;
     right: 20px;
     position: fixed;
   }

   .tutorialscreen input{
     width: calc(100% - 40px);
     height: 40px;
     background: var(--theme);
     color: #f6f6f6;
     user-select: none;
     font-size: 16px;
     border: none;
     border-radius: 12px;
     outline: none;
   }

   .tutorialscreen p{
     text-align: justify;
     width: 80%;
     margin: 20px;
     margin-left: 10%;
     margin-right: 10%;
   }

   .tutorialscreen img{
     width: 120px;
     height: auto;
   }

   #tutorialScreen1{
     display: block;
   }

   .bigicon{
     font-size: 64px;
   }

   @media screen and (max-width:449px) and (min-width:400px){
     .news-object button{
       width: 32px;
       height: 32px;
       font-size: 16px;
     }
   }

   @media screen and (max-width:399px){
     .news-object button{
       width: 24px;
       height: 24px;
       font-size: 12px;
     }
     .news-object p{
       width: 70%;
     }
   }

   ::selection {background: var(--theme2); color: #ffffff;}
   ::-moz-selection {background: var(--theme2); color: #ffffff;}
   ::placeholder {color: #ffffff;}