html, body {
  padding: 0;
  margin: 0;
  background-color: grey;
  color: grey;
  background-image: url(images/tech2.webp);
  background-size: cover;
  font-weight: 300;
  width: 100%;
  scroll-behavior: smooth;
}
html {
  padding: 0px;
  margin: 0px;
}

*{
  font-family: libre franklin;
}
::-webkit-scrollbar {
  width: 2px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: blue;
  border-radius: 5px;
}
.head {
  height: 105px;
}
@media screen and (max-width: 600px) {
.head {
  height: 40px;
}
}
header {
  top: 0;
  height: 74px;
  position: sticky;
  position: -webkit-sticky;
  z-index: 9;
  overflow: hidden;
  overflow-x: hidden;
  background-position: bottom;
  background-image: url(images/smoke3.webp);*/
  background-size: 100%;
  border-style: solid;
  border-color: black;
  border-width: 1px; 
}
@media screen and (max-width: 600px) {
header {
  text-align: left;
  display: block;
  z-index: 9;
  top: 0;
  height: 150px;
  position: sticky;
  position: -webkit-sticky;
  z-index: 9;
  overflow: hidden;
  overflow-x: hidden;
  background-position: bottom;
  border-width: 8px;
  background-image: url(images/smoke3.webp);*/
  background-size:100%;
  border-style: solid;
  border-color: black;
}  
}
header h1 {
  width: 300px;
  text-indent: 1px;
  color: blue;
  text-shadow: 2px 6px 8px darkblue;
  text-align: left;
  font-size: 50px;
  margin:20px;
  filter:blur(2px);
  margin-bottom:0px;
  margin-top: 0px;
  margin-left: 10px;
  width: 200px;
}
@media screen and (max-width: 600px) {
header h1 {
  width: 200%;
  margin-right: 0px;
  word-break: keep-all;
  text-indent: 5px;
  color: blue;
  text-shadow: 2px 6px 8px darkblue;
  text-align: left;
  font-size: 40px;
  filter:blur(1.5px);
  margin-bottom: 20px;
  margin-top: 0px;
  position: relative;left: 0px;
  margin-left: -35px;
  background-color: rgba(0, 0, 0, 0.4); 
}
}
 nav li {
  position: relative;top: 3px;
  text-shadow: 2px 6px 8px black;
  z-index: 9;
  margin-left: 10px;
  font-size: 22px;
  display: inline;
  margin-right: 15px;
  padding: 6px;
  padding-top: 3px;
  margin-top: 6px;
  color: silver;
  transition-property: color;
  transition-duration: 0.8s;
}
 nav li:hover {
  position: relative;top: 3px;
  text-shadow: 2px 6px 8px black;
  z-index: 9;
  margin-left: 10px;
  font-size: 22px;
  display: inline;
  margin-right: 15px;
  padding: 6px;
  padding-top: 3px;
  margin-top: 6px;
  color: white;
}
 nav li:link {
  text-decoration: none;
}
@media screen and (max-width: 1000px) {
 nav li {
  text-shadow: 2px 6px 8px black;
  z-index: 6;
  font-size: 20px;
  position: relative;top: 100px;
  position: relative;left:;
  margin-right: 15px;
  padding-right: 30px;
  color: silver;
}
}
@media screen and (max-width: 600px) {
.nav1 {
  position: relative;bottom: 60px;
  left: -20px;
  text-align: left;
}
}
.loggedInAs {
  position:relative;bottom:38px;
  position:relative;right:40px;
  white-space: nowrap;
}
@media screen and (max-width: 1030px) {
.loggedInAs {
  white-space: nowrap;
  position:relative;top:10px;
  position:relative;right:1px;
}
}
.underheadbar {
  box-shadow: 0 0 20px 9px black;
  top: 72px;
  position: sticky;
  position: -webkit-sticky;
  box-shadow: 1px 1px 1px black;
  border-width: 1px;
  border-style: inset;
  border-color: black;
  border-style: blur(2px);
  z-index: 9;
  width: 100%;
  background-image: url(images/flare3.webp);
  background-position: center;
  background-size: 5%;
  }
@media screen and (max-width: 600px) {
.underheadbar {
  box-shadow: 0 0 20px 9px black;
  top: 150px;
  position: sticky;
  position: -webkit-sticky;
  box-shadow: 1px 1px 1px black;
  border-width: 1px;
  border-style: inset;
  border-color: black;
  border-style: blur(2px);
  z-index: 9;
  width: 100%;
  background-image: url(images/flare3.webp);
  background-position: center;
  background-size: 5%;
  }
}
    .HTML_INTRO1 {
    display: inline-block;                                        
    padding: 10px;
    background-color: black;
    border-style: solid;
    border-color: gray;
    border-radius: 15px;
    margin-top: 10px;                                            
    width: 90%;
   }
@media screen and (max-width: 1000px) {
   .HTML_INTRO1 {
    background-color: black;
    border-style: solid;
    border-color: gray;
    border-radius: 15px;                          
    padding: 1px;                                        
    margin-top: 10px;
    position: relative;top: 95px;

   }
   }
   .HTML_INTRO1 h4 {
        clear: both;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 20px;
   }

@media screen and (max-width: 600px) {
  #home1 {
 padding:3px;
 color: #666;
 border-style: outset;
 border-radius: 20%;
 border-color: #333;
 background-color: #111;
 border-width: 1px;
 float:right;
 margin: 0px;
 z-index: 9;
 margin-top:-32px;
}
.search1 {
  width:220px;
}
} 

/*-----------------------------------Buttons+stickys------------------------------------------*/
code {
  color: lawngreen;
  background-color: rgba(20, 20, 20, 0.8);
}
.poweredBy {
  position: relative;top: 12px;
  position: relative;left: -28px;
  margin-left: 0px;
  font-size: 14px;
}
.sticky { 
  float: left;
  margin: 0px;
  margin-left: 10px;
}

.sticky_coding {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative; bottom: 30px;
}

.backbutton {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}
.loginButtons {
  position: absolute;
  right: 0px;
  position: relative;top: px;
  width: 300px;
  display: inline;
  padding: 5px;
  margin: 2px;
}

@media screen and (max-width: 600px) {
.loginButtons {
  position: relative; top: 4px;
  text-align: left;
  left: 0px;
  overflow-y: hidden;
  width: 200px;
  padding: 5px;
  margin: 10px;
  margin-left: 0px;
  padding-left: 0px;
  margin-right: 20px;
  z-index: 9;
}
}
/*==============================HELLO-USER====================*/

.helloThereUser {
  border-style: solid;
  border-width: 1px;
  border-color: black;
  border-radius: 5px;
  margin: 0px;
  padding: 1px;
  display: inline;
  background-color: #333;
  position: relative;top:1px;
  position: relative;left: 7px;
  margin-bottom: 6px;
}
@media screen and (max-width: 600px) {
  .helloThereUser {
  border-style: solid;
  border-width: 1px;
  border-color: black;
  border-radius: 5px;
  margin: 0px;
  padding: 1px;
  display: inline;
  background-color: #333;
  position: relative;top:1px;
  position: relative;left: 0px;
  margin-bottom: 6px;
}
}
/*============================HEADER-ACCOUNT-BUTTON=========================*/
.accountButtonHeader {
  width: 110px;
  margin-top: 1px;
  transition: 0.5s;
}
.accountButtonHeader:hover {
  width: 110px;
  margin-top: 1px;
  transition: 0.5s;
  background-color: green;
}
/*=============================HEADER-LOGOUT-BUTTON=========================*/
.logOutButtonHeader {
  width: 110px;
  margin-top: 1px;
  transition: 0.5s;
}
.logOutButtonHeader:hover {
  width: 110px;
  margin-top: 1px;
  transition: 0.5s;
  background-color: crimson;
}
/*================================HEADER-POST-TOPIC-BUTTON=======================*/
.postTopicButtonHeader {
  width: 110px;
  margin-top: 1px;
  transition: 0.5s;
}
.postTopicButtonHeader:hover {
  width: 110px;
  margin-top: 1px;
  background-color:blue;
}
/*===============================HEADER-ADMINISTRATOR-BUTTON===================*/
.adminButton {
  position: relative;left: 7px;
  margin-top: 0.5px;
  width:110px;
  background-color:#444;
  height:20px;
  transition: 0.5s;
}
.adminButton:hover {
  margin-top: 0.5px;
  width:110px;
  background-color:red;
  height:20px;
  margin-bottom: 0.5px;
}
@media screen and (max-width: 600px) {
  .adminButton {
  position: relative;left:0px;
  margin-top: 0.5px;
  width:110px;
  background-color:#444;
  height:20px;
  transition: 0.5s;
}
.adminButton:hover {
  margin-top: 0.5px;
  width:110px;
  background-color:red;
  height:20px;
  margin-bottom: 0.5px;
}
  }
/*============================================HEADER-SEARCH-BAR-CSS====================*/
.search1 {
  border-radius: 4px;
  background-color: #101010;
}

.loginRegisterButton {
  margin-top: 0.5px;
  width:110px;
  background-color:white;
  height:30px;
  transition: 0.5s;
  color: black;
  font-weight:600;
  font-family: sans-serif;
}
.loginRegisterButton:hover {
  margin-top: 0.5px;
  width:110px;
  background-color:white;
  height:30px;
  transition: 0.5s;
  color: black;
  font-weight:600;
  font-family: sans-serif;
  
}
/*===================LOGIN/REGISTER-BUTTON-SWEEP-EFFECT====================================*/
.loginRegisterButton {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.loginRegisterButton:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.loginRegisterButton:hover, .loginRegisterButton:focus, .loginRegisterButton:active {
  color: white;
}
.loginRegisterButton:hover:before, .loginRegisterButton:focus:before, .loginRegisterButton:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
/*===========================================HOME-BUTTON======================*/
#home1 {
 color: #666;
 border-style: outset;
 border-radius: 20%;
 border-color: #333;
 background-color: #111;
 border-width: 1px;
 margin: 0px;
 z-index: 9;
 transition:0.4s;
}
#home1:hover {
 color: #1994;
 border-style: outset;
 border-radius: 20%;
 border-color: #333;
 background-color: #111;
 border-width: 1px;
 margin: 0px;
 z-index: 9;
 font-size: 16px;
}
 @media screen and (max-width: 347px) {
#home1 {
  position: relative;top: -20px;
 color: #666;
 border-style: outset;
 border-radius: 20%;
 border-color: #333;
 background-color: #111;
 border-width: 1px;
 margin: 0px;
 z-index: 9;
 transition:0.4s;
}
#home1:hover {
  position: relative;top: -20px;
 color: #1994;
 border-style: outset;
 border-radius: 20%;
 border-color: #333;
 background-color: #111;
 border-width: 1px;
 margin: 0px;
 z-index: 9;
 font-size: 16px;
}
  }   
/*=======================================Header Stuff=============================================*/

.login {
  width: 150px;
  position: relative;
  color: blue;
  top: 0;
}
@media screen and (max-width: 600px) {
.login {
  width: 150px;
  position: relative;
  color: blue;
  top: 0;
}
}
.login {
  width: 150px;
  position: relative; left: 70px;
  color: blue;
  top: 0;
}

    .row2 { 
      opacity: 0.2;
      display: flex;
      flex-direction: column;
      order:5;
      position: relative; bottom:60px;
      width: 10px;
      text-decoration-line: underline;
      display: inline-flex;
      justify-content: flex-end;
      text-shadow: 1px 1px 1px black;
      position: relative;right: 25px;
    }
    .red {
      text-decoration-line: underline;
      position: relative; bottom:60px;
      opacity: 0.2;
        display: flex;
      text-shadow: 1px 1px 1px red;
      display: inline-flex;
      justify-content: flex-end;
      color: red;
      display: inline;
      position: relative;right: 25px;
    }    

@media screen and (max-width: 600px) {
    .row2 {
      visibility: hidden;
      opacity: 0.2;
      position: relative; top:35px;
      width: 10px;
      text-decoration-line: underline;
      text-shadow: 1px 1px 1px black;
    }
    .red {
      visibility: hidden;
      text-decoration-line: underline;
      position: relative; top:35px;
      opacity: 0.2;
      text-shadow: 1px 1px 1px red;
      color: red;
      display: inline;
    }    
}



/*=========================================CHANGELOG=================================*/
.changelog_wrapper {
  background-color: rgba(0, 0, 0, 0.9);
  height: 100%;
}
.changelog_box {
  position: relative;
  width: auto;
  height: auto;
  margin: auto;
  padding: 20px;
  border-style: solid;
  border-color: black;
  background-color: #111;
}

/*==================================MAIN_CONTENT_PAGE======================================*/
/*-----------------------------------------------------------------------------------------*/
#tableHomepage {
  border-width: 1px;
  border-radius: 1em;
  transition-property: color;
  transition-duration: 0.8s;
}
#tableHomepage p {
  color: silver;
}

.recent_posts_wrapper_homepage {
  padding-top: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  border-style: none;
  border-width: 1px;
  border-color: black;
  margin:0px;
  margin-top: -20px;
}   
.recent_posts_wrapper_homepage td, tr, th {
  background-color: rgba(0, 0, 0, 0.8); 
  color: crimson;
  padding: 2px;
  padding-top: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  border-style: none;
  border-width: 1px;
  border-color: black;
}   
.content {
  box-shadow: 0 0 20px 9px black; 
  margin-top: 50px;
  overflow: scroll;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  margin: 10px;
  margin-right: 5px;
  margin-left: 5px;
  height: 760px;
  padding: 20px;
  border: solid;
  border-width: 1px;
  border-color: grey;
  background-color: rgba(0, 0, 0, 0.9);
  /*background-image: url(images/background6.webp);*/
}

@media screen and (max-width: 600px) {
.content {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px 9px black; 
  margin-top: 50px;
  overflow: hidden;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  margin: 10px;
  margin-right: 5px;
  margin-left: 5px;
  height: 100%;
  padding: 10px;
  border: solid;
  border-width: 1px;
  border-color: grey;
  order: 3;
  background-color: rgba(0, 0, 0, 0.9);
  /*background-image: url(images/background6.webp);*/
}
}
.content p {
  color: silver;
}

        .change {
            cursor: pointer;
            border: 1px solid #555;
            border-radius: 40%;
            width: 20px;
            text-align: center;
            padding: 5px;
            margin-left: 8px;
        }


.poster {
  background-image: url(images/music6.webp);
  background-size: contain;
  background-repeat: no-repeat;
  width: 160px;
  height: 100px;
  padding: 10px;
  margin: 10px;
}

.content ul { 
  color: silver;
  padding-left: 5px;
  justify-content: flex-start;
  list-style-type: none;
}
.quotes {
  color: #222;
  border-style: groove;
  border-color: #666;
  padding: 10px;
  border-radius: 10px;
  border-width: 1px;

}
.quotes ul {
  color: #888;
 

}
.video {
  padding:0px;
  margin-bottom: 30px;

}
.leftContentBoxForum {
  margin-top: 10px;
  overflow: hidden;
}
.content_right {
  box-shadow: 0 0 20px 9px black;
  font-family: Arial, Helvetica, sans-serif;
  margin: 10px;
  height: 760px;
  display: flex;
  flex-wrap: wrap;
  overflow: scroll;
  overflow-x: hidden;
  margin-left: 5px;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 20px;
  border: solid;
  border-width: 1px;
  border-color: grey;
  justify-content: flex-start;
  margin-right: 4px;
  padding-top: -20px;
}
.content_right p {
 /* margin-top: -20px;
  margin-bottom: -10px;*/
}

.changelog_button {
  border-color: black;
  padding: 5px;
  font-size: 16px;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
  transition: 0.3s;
}
.changelog_button:hover {
  background-color: #DC143C;
  color: white;
  padding: 5px;
  font-size: 18px;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.donate {
  display: flex;
  flex-direction: column;
  margin-top: -10px;
}
@media screen and (max-width: 600px) {
.content_right {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px 9px black;
  font-family: Arial, Helvetica, sans-serif;
  margin: 10px;
  height: 1200;
  display: flex;
  flex-wrap: wrap;
  overflow:hidden;
  overflow-x: hidden;
  margin-left: 5px;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 10px;
  border: solid;
  border-width: 1px;
  border-color: grey;
  justify-content: flex-start;
  margin-right: 4px;
  order: 4;
  height:1150px!important;
}
}
.content_right p, ul {
  color: silver;
}
.main {
  margin: 10px;
  height: 760px;
  overflow: hidden;
  overflow-x: hidden;
  border: solid;
  border-width: 1px;
  border-color: grey;
  background-color: rgba(0, 0, 0, 0.8);
  /*background-image: url(images/earth3.webp); */
  background-size: 100%;
  padding: 15px;
  padding-left: 35px;
  padding-right: 0px;
  padding-bottom: 30px;
  /*width:65%;*/
}
@media screen and (max-width: 600px) {
.main {
  height:auto!important;
  display: flex;
  flex-direction: column;
  margin: 5px;
  overflow: scroll;
  overflow-x: hidden;
  border: solid;
  border-width: 1px;
  border-color: grey;
  background-color: grey;
  background-color: rgba(0, 0, 0, 0.8);
  background-size: 100%;
  padding: 5px;
  padding-bottom: 30px;
  order: 1;
}
}


.jumbotron { 
  height: 110px;
  margin-top: 0px;
  margin-bottom: 0px;
  background-image: url(images/.webp);
  background-position: center;
  background-size: cover;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  border: solid;
  border-color: black;
  border-style: outset;
  border-width: 2px;
  padding: 0px;
}

.jumbotron h3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;

  text-shadow: 2px 2px 2px black;
  /*font-size: 2.5vw;*/
  font-size: 40px;
  color: white;
  position: relative; left: 40px;
  position: relative;bottom: 20px;
  margin-right: 40px;
}


.TM {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

}
.container {
  display: flex;
  flex-direction: column;
  order: 5;
}
.footer {


  margin: auto;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  position: relative; right: 26px;
  order: 5;
}
@media screen and (max-width: 600px) {
.footer {
  display: flex;
  order: 4;
  margin: auto;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  position: relative; right: 26px;
  order: 5;
}
}
.footer1 {
  position: relative;
}
@media screen and (max-width: 600px) {
.footer1 {
  display: flex;
  flex-direction: column;
  order: 5;
  position: relative;
}
}
.wrapper {
  padding-left: 4px;
  padding-right: 2px;
}
@media screen and (max-width: 600px) {
.wrapper {
  display: flex;
  flex-direction: column;
  padding-left: 4px;
  padding-right: 2px;
}
}

/*--------------------------------Website Sub-Sections menu--------------------------------*/
/*=========================================================================================*/


            .Space {
              border-radius: 10px;
              margin: 5px;
              display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              -webkit-transform: scaleX(-1);
              transform: scaleX(-1);

              
              background-repeat: no-repeat;
              filter:contrast(1.3);
              box-shadow: 1px 1px 1px black;
              border-style: inset;
              border-style: blur(1px);
              backface-visibility: hidden;
              animation: Space 60s linear infinite 0s;
              animation-timing-function: ease-in-out;             
              background-image: url('images/space22.webp');
              background-position: center;
              background-size: cover;
              }
    @keyframes Space {
     0% {
       background-image: url('images/space22.webp');
     }
     25% {
       background-image: url('images/space10.webp');
     }
     50%{
       background-image: url('images/shuttle5.webp');
     } 
     75%{
       background-image: url('images/shuttle3.webp');
     } 
  }







              
       /*a { color: white; }  */
            
            .Space h3 { 
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,  
                -1px 1px 0 #000,  
                 1px 1px 0 #000;
              filter: opacity(15);  
              position: relative;
              padding: 5px;
                /*overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;  
              -webkit-transform: scaleX(-1);
              transform: scaleX(-1);
       
            }
            
            .Space {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .Space:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .Space:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
              -webkit-transform: scaleX(-1);
              transform: scaleX(-1);
            }

            .recentPosts {
              border-radius: 10px;
              margin: 5px;
              display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/posts5.webp);
              /*background-position:  200px -10px;*/
              background-position: center;
              background-size: 100%;
              background-repeat: no-repeat;
              
              filter:contrast(1.2);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .recentPosts:hover {
              border-radius: 10px;
              margin: 5px;
              display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/posts5.webp);
              /*background-position:  200px -10px;*/
              background-position: center;
              background-size: 100%;
              background-repeat: no-repeat;
              filter:contrast(1.2);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }


            .recentPosts h3 { 
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,  
                -1px 1px 0 #000,  
                 1px 1px 0 #000;
              filter: opacity(15);  
              position: relative;
              padding: 5px;
                /*overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;          
       
            }
            
            .recentPosts {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .recentPosts:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .recentPosts:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }



            .Coding {
              border-radius: 10px;
              margin: 5px;
                display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/keyboard.webp);
              background-position: center;
              background-size: 130%;
              background-repeat: no-repeat;
              background-position: center;
              filter:contrast();
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }

              
       /*a { color: white; }  */
            
            .Coding h3 { 
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,  
                -1px 1px 0 #000,  
                 1px 1px 0 #000;
              filter: opacity(15);  
              position: relative;
              padding: 5px;
                /*overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;          
       
            }
            
            .Coding {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .Coding:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .Coding:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }
            
            .Electronics {
              border-radius: 10px;
              margin: 5px;
                display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/electric1.webp);
              background-position: 80px 0px;
              background-size: 100%;
              background-repeat: no-repeat;
              filter:contrast();
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .Electronics h3 {
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
                /*overflow: hidden;
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .Electronics {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .Electronics:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .Electronics:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }
            
            .Maths {
              border-radius: 10px;
              margin: 5px;
                display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/maths1.webp);
              background-position: 0px 0px;
              background-size: 100%;
              background-repeat: no-repeat;
              filter:contrast(1.3);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .Maths h3 {
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
               /* overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .Maths {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .Maths:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .Maths:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }
            
            .Goals {
              border-radius: 10px;
              margin: 5px;
                display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/goals5.webp);
              background-position: center;
              background-size: 100%;
              filter:contrast();
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .Goals h3 {
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
                /*overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .Goals {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .Goals:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .Goals:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }
            
            .Gaming {
              border-radius: 10px;
              margin: 5px;
                display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/game5.webp);
              background-position: center;
              background-size: 100%;
              filter:contrast();
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .Gaming h3 {
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
               /* overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .Gaming {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .Gaming:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .Gaming:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }
      
            .Podcasts {
              border-radius: 10px;
              margin: 5px;
                display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/planet2.webp);
              background-position: center;
              background-size: 100%;
              filter:contrast(1);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .Podcasts h3 {
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
                /*overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .Podcasts {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .Podcasts:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .Podcasts:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }

            .Music {                         /*------Now Manufacturing------*/
              border-radius: 10px;
              position: relative; left: 4px;
              margin: 5px;
                display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/engineering5.webp);
              /*background-position: 40px -30px;*/
              background-size: 100%;
              filter:contrast(1.2);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .Music h3 {
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
                /*overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .Music {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .Music:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .Music:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }
            .chemistry {
              -webkit-transform: scaleX(-1);
              transform: scaleX(-1);
              border-radius: 10px;
              position: relative; left: 4px;
              margin: 5px;
                display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/chemistry2.png);
              background-position: center;
              background-size: cover;
              filter:contrast(1.2);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .chemistry h3 {
              -webkit-transform: scaleX(-1);
              transform: scaleX(-1);
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
                /*overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
              text-shadow: 3px 3px 3px black;
            }
      
            .chemistry {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .chemistry:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .chemistry:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
              -webkit-transform: scaleX(-1);
              transform: scaleX(-1);
            }

            .Engineering {
              border-radius: 10px;
              position: relative; left: 4px;
              margin: 5px;
                display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/engineering2.webp);
              background-position: center;
              background-size: 100%;
              filter:contrast(1.2);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .Engineering h3 {
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
                /*overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
              text-shadow: 3px 3px 3px black;
            }
      
            .Engineering {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .Engineering:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .Engineering:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }            


            .MembersBox {
              border-radius: 10px;
              margin: 5px;
              display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/members9.webp);
             /* background-position: 155px -50px;
              background-size: 85%;*/
              background-position: right;
              background-size: 70%;
              background-repeat: no-repeat;
              /* background-blend-mode: luminosity;*/
              filter:contrast(1.4);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .MembersBox h3 {
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
                /*overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .MembersBox {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .MembersBox:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .MembersBox:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }

            .AccountBox {
              border-radius: 10px;
              margin: 5px;
              display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/smoke3.webp);
             /* background-position: 155px -50px;
              background-size: 85%;*/

              background-position: right;
              background-size: 70%;


              background-repeat: no-repeat;
              /* background-blend-mode: luminosity;*/
              filter:contrast(1.5);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .AccountBox h3 {
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
                /*overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .AccountBox {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .AccountBox:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .AccountBox:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }

            .goalsBox {
              border-radius: 10px;
              margin: 5px;
              display: block;
              padding: 20px;
              border: solid;
              border-color: grey;
              background-image: url(images/engineering7.webp);
              background-position: 155px 60px;
              background-size: 80%;

             /*  background-position: center;
             background-size:100%;*/


              background-repeat: no-repeat;
              /* background-blend-mode: luminosity;*/
              filter:contrast(1);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .goalsBox h3 {
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
                /*overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .goalsBox {
              cursor: pointer;
              outline: none;
              color: black;
              background-color: black;
             }
            
            .goalsBox:hover {
              /*border-width: 1px;*/
                border-color: white;
              background-color: black}
            
            .goalsBox:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }

/*=========================================SPACE_PAGE========================================*/
/*-------------------------------------------------------------------------------------------*/

.space-news {
  border-style: inset;
  border-color: white;
  border-width: 0px 0px 1px 0px;
  margin-top: 0px;
  height: auto;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: scroll;
  overflow-x: hidden;
  padding-bottom: 6px;
  border-radius: 5px;
}
.space-news p {
  margin: 5px;
color: silver;

}
@media screen and (max-width: 600px) {
  .space-news {
    display: flex;
    flex-direction: column;
    order: 2;
  border-style: inset;
  border-color: white;
  border-width: 0px 0px 1px 0px;
  margin-top: 0px;
  height: auto;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: scroll;
  overflow-x: hidden;
  padding-bottom: 6px;

  border-radius: 5px;
}
}

.space-news h2 {
  text-decoration: underline;
}

.jumbotron-space { 
  height: 150px;
  margin-top: 0px;
  background-image: url(images/planet1.webp);
  background-position: center;
  background-size: 60%;
  text-align: center;
  background-repeat: no-repeat;
  background-color: black;
  border-top: solid;
  border-bottom: solid;
  border-color: grey;
  border-width: 1px;
  box-shadow: 0 0 20px 4px black;  
  backface-visibility: hidden;
  animation: Spacetwo 45s linear infinite 0s;
  animation-timing-function: ease-in-out; 
}

 
   @keyframes Spacetwo {
     0% {
       background-image: url('images/planet1.webp');
     }
     33% {
       background-image: url('images/europa1.webp');
     }
     66%{
       background-image: url('images/planet2.webp');
     } 
  }


.jumbotron-space h3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;

  text-shadow: 2px 2px 2px black;
  /*font-size: 2.5vw;*/
  font-size: 40px;
  color: white;
  text-shadow: 2px 2px 2px black;
  position: relative; left: 40px;
  margin-right: 40px;
}
.content_main_space {
  background-image: url(images/space11.webp);
  background-size: cover;
  background-position: center;
  height: auto;
  padding-left: 4px;
  padding-right: 4px;

}
@media screen and (max-width: 600px) {
  .content_main_space {
  display: flex;
  flex-direction: column;

  background-image: url(images/space11.webp);
  background-size: cover;
  background-position: center;
  height: auto;
  padding-left: 4px;
  padding-right: 4px;
}
}

 /*  @keyframes SpaceThree {
     0% {
       background-image: url('images/europa2.webp');
     }
     33% {
       background-image: url('images/space6.webp');
     }
     66%{
       background-image: url('images/space11.webp');
     } 
  }
  */



@media screen and (max-width: 600px) {
.table2 td, tr {
  border-style: solid;
  border-width: 1px;
  border-color: black;
  margin: 5px;
  padding: 0px;
  background: #222;
  text-shadow: 2px 2px 2px black;
  
}
}

 .table1 {
  border-width: 2px;
  border-collapse: collapse;
  border-radius: 1em;
  margin: 5px;
 }
 .recent_posts_wrapper11 td, tr, th{
  margin: 5px;
  padding: 10px;
  background: #222;
  text-shadow: 2px 2px 2px black;
}
@media screen and (max-width: 600px) {
#table22 td, tr, th{
  padding:0px;
  margin:0px;
  border-style: solid;
  border-width: 1px;
  border-color: black;

}
}

 /*-------------------------------Coding-Page------------------------------------------------*/
/*==========================================================================================*/


button {

  font-size: 12px;
  /*padding: 2px;
  margin: 2px;*/
  background-color: grey;
  opacity: 0.2px;
  color: black;
  border: solid;
  border-width: 1px;
  border-radius: 5px;
  border-color: ;
  filter: blur(0.1px);
  /*display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: absolute; 
  top: 0px;
  left: 0px;*/

}



.content_main {
  border: solid;
  border-style: inset;
  border-color: #333;
  border-width: 2px;*/
  height: 500px;
  background-image: url(images/goals8.webp);
  background-color: black;
  background-size: cover;
}

            .HTML {
              border-radius: 2px;
              margin: 5px;
              margin-top: 0px;
                display: block;
              padding: 10px;
              border: solid;
              border-color: grey;
              background-image: url(images/code2.webp);
              background-position: center;
              background-size: 80%;
              background-repeat: no-repeat;
              filter:contrast(1.3);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .HTML h3 {
              font-family: Georgia, serif;
                text-shadow: 2px 2px 2px grey;
             
              filter: opacity(15);
              position: relative;
              padding: 5px;
               /* overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .HTML {
              cursor: pointer;
              outline: red;
              color: black;
              background-color: black;
             }
            
            .HTML:hover {
              
                border-color: white;
              background-color: black}

            
            .HTML:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }

            .CSS1 {
              border-radius: 2px;
              margin: 5px;
                display: block;
              padding: 10px;
              border: solid;
              border-color: grey;
              background-image: url(images/artwork1.webp);
              background-position: 600px -70px;
              background-size: 20%;
              background-repeat: no-repeat;
              filter:contrast(1);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .CSS1 h3 {
              font-family: Georgia, serif;
                text-shadow: 2px 2px 2px grey;
             
              filter: opacity(15);
              position: relative;
              padding: 5px;
               /* overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .CSS1 {
              cursor: pointer;
              outline: red;
              color: black;
              background-color: black;
             }
            
            .CSS1:hover {
              
                border-color: white;
              background-color: black}

            
            .CSS1:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }

            .php1 {
              border-radius: 2px;
              margin: 5px;
                display: block;
              padding: 10px;
              border: solid;
              border-color: grey;
              background-image: url(images/matrix1.webp);
              background-position: 200px 0px;
              background-size: 100%;
              background-repeat: no-repeat;
              background-color: black;
              filter:contrast(1.5);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .php1 h3 {
              font-family: Georgia, serif;
                text-shadow:
               -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
              filter: opacity(15);
              position: relative;
              padding: 5px;
               /* overflow: hidden;*/
            
              color: white;
            }
      
            .php1 {
              cursor: pointer;
              outline: none;
              color: blackblack;
              background-color: blackblack;
             }
            
            .php1:hover {

              border-width: px;
              border-color: white;          
              background-color: blackblack}


            .php1:active {
              background-color: blackblack;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }
            

            .JavaScript1 {
              border-radius: 2px;
              margin: 5px;
                display: block;
              padding: 10px;
              border: solid;
              border-color: grey;
              background-image: url(images/code9.webp);
              background-position: right;
              background-size: 90%;
              background-repeat: no-repeat;
                            filter:contrast(3);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .JavaScript1 h3 {
              font-family: Georgia, serif;
                text-shadow: 2px 2px 2px grey;
             
              filter: opacity(15);
              position: relative;
              padding: 5px;
               /* overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .JavaScript1 {
              cursor: pointer;
              outline: red;
              color: black;
              background-color: black;
             }
            
            .JavaScript1:hover {
              
                border-color: white;
              background-color: black}

            
            .JavaScript1:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }

               .Arduino1 {
              border-radius: 2px;
              margin: 5px;
                display: block;
              padding: 10px;
              border: solid;
              border-color: grey;
              background-image: url(images/circuit3.webp);
              background-position: right;
              background-size: 90%;
              background-repeat: no-repeat;
              /*background-blend-mode: luminosity;*/
              filter:contrast(1.2);
                box-shadow: 1px 1px 1px black;
                border-style: inset;
                border-style: blur(1px);
            }
            .Arduino1 h3 {
              font-family: Georgia, serif;
                text-shadow: 2px 2px 2px grey;
                
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
             
              filter: opacity(15);
              position: relative;
              padding: 5px;
               /* overflow: hidden;*/
              /*font-size: 1.5vw;*/
              color: white;
            }
      
            .Arduino1 {
              cursor: pointer;
              outline: red;
              color: black;
              background-color: black;
             }
            
            .Arduino1:hover {
            
                border-color: white;
              background-color: black}

            
            .Arduino1:active {
              background-color: black;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }



/*-------------------------------------------------- HTML_PAGE ----------------------------*/
/*=========================================================================================*/

                                               .content_main_HTML {
                                                width: 100%;
                                                
                                               }

                                               .jumbotron_HTML {
                                                  margin-top: 10px;
                                                 
                                                  background-image: url(images/code2.webp);
                                                    background-position: center;
                                                    background-size: cover;
                                                  text-align: center;
                                                  background-color: grey;
                                                  border: solid;
                                                  border-color: black;
                                                  border-style: outset;
                                                  border-width: 2px;
                                                  padding: 25PX;
                                               }
                                               .jumbotron_HTML h3 { 
                                                background-color: grey;
                                                


                                                   flex-wrap: wrap;
                                                   display: flex;
                                                   justify-content: flex-end;
                                                   text-shadow: 2px 2px 2px black;
                                                   /*font-size: 2.5vw;*/
                                                   font-size: 40px;
                                                   color: black;
                                                   filter: contrast(4);
                                                   position: relative; right: 26px;
                                                   margin-right: 40px;
                                                   }
                                                  
                                                   

                                                   .HTML_INTRO {
                                                    display: inline-block;

                                             
                                                    padding: 10px;
                                                    border-style:solid;
                                                    border-width: 1px;
                                                    border-color: black;

                                                 
                                                    width: 90%;

                                                    background-image: url(images/game1.webp);
                                                    
                                                    background-size: cover;
                                                    background-repeat: no-repeat;
                                                   }
                                                   .HTML_INTRO h4 {
                                                        clear: both;
                                                        display: inline-block;
                                                        overflow: hidden;
                                                        white-space: nowrap;
                                                        margin-right: 20px;
                                                   }

                                                   .content_main_HTML {
                                                      /*border: solid;
                                                      border-style: inset;
                                                      border-color: blue;
                                                      border-width: 2px;*/
                                                      height: 100%;
                                                      background-image: url(images/game1.webp);
                                                      background-size: cover;
                                                      padding: 0px;
                                                    
                                                    }

                                               .HTML_ENTRY {

                                                    border-radius: 2px;
                                                  margin: 10px;
                                                    display: block;
                                                  padding: 20px;
                                                  border: solid;
                                                  border-color: grey;
                                                  background-image: url(images/background1.webp);
                                                  background-position: ;
                                                  background-size: cover;
                                                  background-repeat: ;
                                                  filter:contrast(1);
                                                    box-shadow: 1px 1px 1px black;
                                                    border-style: inset;
                                                    border-style: blur(1px);
                                                }
                                                .HTML_ENTRY h3 {
                                                  font-family: Georgia, serif;
                                                    text-shadow: 2px 2px 2px grey;
                                                 
                                                  filter: opacity(15);
                                                  position: relative;
                                                  padding: 5px;
                                                   /* overflow: hidden;*/
                                                  /*font-size: 1.5vw;*/
                                                  color: white;
                                                }
                                                .HTML_ENTRY p {
                                                  color: white;
                                                }
                                          
                                                .HTML_ENTRY {
                                                  cursor: pointer;
                                                  outline: red;
                                                  color: black;
                                                  background-color: black;
                                                 }
                                                
                                                .HTML_ENTRY:hover {
                                                  border-width: 2px;
                                                    border-color: white;
                                                  background-color: black}
                                    
                                                
                                                .HTML_ENTRY:active {
                                                  background-color: black;
                                                  box-shadow: 0 5px #666;
                                                  transform: translateY(4px);
                                                }

                                              
/*--------------------------------------ELECTRONICS_PAGE-----------------------------------------------*/
/*=======================================================================================*/

.electronics-news {
  padding: 0px;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  margin-top:;
  height: auto;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;

}
.electronics-news p {
margin: 5px;
color: silver;

}
.electronics-news h2 {
  color: #dc143c;
  text-decoration: underline;
  text-shadow: 3px 3px 3px black;
}

.jumbotron-electronics { 
  height: 120px;
  margin-top:;
  background-image: url(images/circuit4.webp);
  background-position: center;
  background-size: cover;
  text-align: center;
  background-repeat: no-repeat;
  background-color: black;
  border-top: solid;
  border-bottom: solid;
  border-color: grey;
  border-width: 1px;
  box-shadow: 0 0 20px 4px black;  
  backface-visibility: hidden;
  animation: electronics 30s linear infinite 0s;
  animation-timing-function: ease-in-out; 
}
   @keyframes electronics {

     0% {
       background-image: url('images/circuit4.webp');
     }
     50%{
       background-image: url('images/electronics1.webp');
     } 
  }

.jumbotron-electronics h3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;

  text-shadow: 3px 3px 3px black;
  /*font-size: 2.5vw;*/
  font-size: 40px;
  color: white;
  text-shadow: 2px 2px 2px black;
  position: relative; left: 40px;
  margin-right: 40px;
}
.content_main_electronics {
  background-image:url(images/background6.webp);
  background-size: cover;
  background-position: center;
  height: auto;
  padding-left: 2px;

}
@media screen and (max-width: 600px) {
.content_main_electronics {
  background-image: url(images/blue-circuit.png);
  background-size: cover;
  background-position: center;
  height: auto;
  padding-left: 2px;

}
}
}
.recent_posts_wrapper_electronics {

  height: 100%;
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;


}   

/*--------------------------------------TECHNOLOGY_PAGE-----------------------------------------------*/
/*=======================================================================================*/

.technology-news {
  padding: 0px;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  margin-top:;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;
}
.technology-news h2 {
  color: #dc143c;
  text-decoration: underline;
  text-shadow: 3px 3px 3px black;
}

.jumbotron-technology { 
  height: 150px;
  margin-top: 15px;

  background-image: url(images/tank2.webp);
  background-position: center;
  background-size: cover;
  text-align: center;
  background-repeat: no-repeat;
  background-color: black;
  border-top: solid;
  border-bottom: solid;
  border-color: grey;
  border-width: 1px;
  box-shadow: 0 0 20px 4px black;  
  backface-visibility: hidden;
  animation: technology 30s linear infinite 0s;
  animation-timing-function: ease-in-out; 
}
   @keyframes technology {
     0% {
       background-image: url('images/tank2.webp');
     }
     33% {
       background-image: url('images/jet6.webp');
     }
     66%{
       background-image: url('images/drone4.webp');
     } 
  }


.jumbotron-technology h3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;

  text-shadow: 0 0 3px #FF0000, 0 0 5px black;
  /*font-size: 2.5vw;*/
  font-size: 50px;
  color: #F8F8FF;
  
  position: relative; left: 40px;
  margin-right: 40px;
}
.content_main_technology {
  background-image:url(images/background6.webp);
  background-size: cover;
  background-position: center;
  height: 600px;
  padding-left: 2px;

}

/*--------------------------------------CHEMISTRY_PAGE-----------------------------------------------*/
/*=======================================================================================*/

.chemistry-news {
  padding: 0px;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  margin-top:;
  height: 500PX;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;
}
.chemistry-news h2 {
  color: #dc143c;
  text-decoration: underline;
  text-shadow: 3px 3px 3px black;
}

.jumbotron-chemistry { 
  height: 150px;
  margin-top: 15px;

  background-image: url(images/chemistry2.png);
  background-position: center;
  background-size: cover;
  text-align: center;
  background-repeat: no-repeat;
  background-color: black;
  border-top: solid;
  border-bottom: solid;
  border-color: grey;
  border-width: 1px;
  box-shadow: 0 0 20px 4px black;  
  backface-visibility: hidden;
  animation: chemistry 30s linear infinite 0s;
  animation-timing-function: ease-in-out; 
}
   @keyframes chemistry {
     0% {
       background-image: url('images/chemistry2.png');
     }
     33% {
       background-image: url('images/chemistry1.webp');
     }
     66%{
       background-image: url('images/chemistry3.jpg');
     } 
  }


.jumbotron-chemistry h3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;

  text-shadow: 0 0 3px #FF0000, 0 0 5px black;
  /*font-size: 2.5vw;*/
  font-size: 50px;
  color: #F8F8FF;
  
  position: relative; left: 40px;
  margin-right: 40px;
}
.content_main_chemistry {
  background-image:url(images/background6.webp);
  background-size: cover;
  background-position: center;
  height: 600px;
  padding-left: 2px;

}




/*=================================MATHS_PAGE========================================*/
/*===================================================================================*/
/* Solid border */
hr.solid {
  border-top: 1px solid #bbb;
}
.maths-resources {
  padding: 4, 6, 6, 6px;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  margin-top:;
  height: auto;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;
}
@media screen and (max-width: 600px) {
  .maths-resources {
  order: 2;
  padding: 4, 6, 6, 6px;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  margin-top:;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;
}
}
.maths-resources h4 {
  color: #dc143c;
  text-decoration: underline;
  text-shadow: 3px 3px 3px black;
}
.maths-news {
  padding: 0px;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  height: 750px;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;
}
@media screen and (max-width: 600px) {
  .maths-news {
  flex-wrap: wrap;
  display: flex;
  order: 3;
  padding: 0px;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  margin-top:;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;
}
}
.maths-news h2 {
  color: #dc143c;
  text-decoration: underline;
  text-shadow: 3px 3px 3px black;
}
.jumbotron-maths { 
  height: 120px;
  margin-top: -18px;
  background-image: url(images/maths8.webp);
  background-position: center;
  background-size: cover;
  text-align: center;
  background-repeat: no-repeat;
  background-color: black;
  border-top: solid;
  border-bottom: solid;
  border-color: grey;
  border-width: 1px;
  box-shadow: 0 0 20px 4px black;  
  backface-visibility: hidden;
  animation: maths 30s linear infinite 0s;
  animation-timing-function: ease-in-out; 
}
   @keyframes maths {
     0% {
       background-image: url('images/maths8.webp');
     }
     33% {
       background-image: url('images/maths13.webp');
     }
     66%{
       background-image: url('images/maths10.webp');
     } 
  }
.jumbotron-maths h3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;
  color: #dc143c;
  text-shadow: 3px 3px 3px black;
  font-size: 50px;
  text-shadow: 2px 3px 3px black;
  position: relative; left: 40px;
  margin-right: 40px;
}
.content_main_maths {
/*  background-image: url(images/carb2.webp);*/
  background-image:url(images/background6.webp);
  background-size: cover;
  background-position: center;
  height: auto;
  padding-left: 2px;
}
@media screen and (max-width: 600px) {
  .content_main_maths {
  flex-wrap: wrap;
  display: flex;
  background-image: url(images/carb2.webp);
  background-size: cover;
  background-position: center;
  height: auto;
  padding-left: 2px;
}
}
.recent_posts_wrapper1 {
  height: auto;
  padding: 5px;
  overflow: hidden;
  overflow-x: hidden;
}   
@media screen and (max-width: 600px) {
  .recent_posts_wrapper1 {
  order: 1;
  height: 100%;
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;
}   
}
.table2 {
  margin: 5px;

}
.table2 td, tr, th {
  border-style: solid;
  border-width: 1px;
  border-color: black;
  margin: 5px;
  padding: 10px;
  background: #222;
  text-shadow: 2px 2px 2px black;
}
 .table1 {
  border-width: 2px;
  border-collapse: collapse;
  border-radius: 1em;
  margin: 5px;
 }
/*=================================ENGINEERING_PAGE========================================*/
/*===================================================================================*/

.engineering-news {
  padding: 0px;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  margin-top:;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;
}
.engineering-news h2 {
  color: #dc143c;
  text-decoration: underline;
  text-shadow: 3px 3px 3px black;
}

.jumbotron-engineering { 
  height: 130px;
  margin-top: 15px;
  
  background-image: url(images/engineering13.webp);
  background-position: center;
  background-size: cover;
  text-align: center;
  background-repeat: no-repeat;
  background-color: black;
  border-top: solid;
  border-bottom: solid;
  border-color: grey;
  border-width: 1px;
  box-shadow: 0 0 20px 4px black;  
  backface-visibility: hidden;
  animation: engineering 60s linear infinite 0s;
  animation-timing-function: ease-in-out; 
}
   @keyframes engineering {
     0% {
       background-image: url('images/engineering13.webp');
     }
     33% {
       background-image: url('images/engineering8.webp');
     }
     66%{
       background-image: url('images/engineering3.webp');
     } 
  }


.jumbotron-engineering h3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;
  color: #FFDEAD;
  text-shadow: 0 1px 3px black;
  font-size: 50px;
  position: relative; left: 40px;
  margin-right: 40px;
}
.content_main_engineering {
  background-image:url(images/background6.webp);
 /* background-image: url(images/metal3.webp); */
  filter: contrast(1.1);
  background-blend-mode: luminosity;
  background-size: cover;
  background-position: center;
  height: 600px;
  padding-left: 5px;

}

  

/*=================================GOALS_PAGE========================================*/
/*===================================================================================*/
.createPostButton_studyPage {
  font-size: 14px;
  width: 65vw;
  height: 30px;
  margin-top:5px;
  transition: 0.3s;
}
.createPostButton_studyPage:hover {
  box-shadow: 1px 1px 18px #202020 inset;
  font: bold;
  font-size: 16px;
  background: rgba(76, 175, 80, 0.9);
  width: 65vw;
  height: 30px;
  margin-top:5px;
}
.goals-news {
  display: flex;
  flex-direction: column;
  order:2;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  margin-top: 17px;
  height: 570px;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;
}
.goals-news h2 {
  color: #dc143c;
  text-decoration: underline;
  text-shadow: 3px 3px 3px black;
}

.jumbotron-goals { 
  height: 130px;
  margin-top: 15px;

  background-image: url(images/goals9.webp);
  background-position: center;
  background-size: cover;
  text-align: center;
  background-repeat: no-repeat;
  background-color: black;
  border-top: solid;
  border-bottom: solid;
  border-color: grey;
  border-width: 1px;
  box-shadow: 0 0 20px 4px black;  
  backface-visibility: hidden;
  animation: goals 60s linear infinite 0s;
  animation-timing-function: ease-in-out; 
}
   @keyframes goals {
     0% {
       background-image: url('images/goals9.webp');
     }
     33% {
       background-image: url('images/goals10.webp');
     }
     66%{
       background-image: url('images/stars2.webp');
     } 
  }

#table1 p{
  text-align: center;
 
 
  margin: auto;
}

.jumbotron-goals h3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;
  color: white;
  text-shadow: 1 1px 6px black;
  font-size: 50px;
  position: relative; left: 20px;
  margin-right: 40px;
}
.content_main_goals {
  background-image: url(images/carb2.webp);
  background-size: cover;
  background-position: center;
  height: auto;
}
@media screen and (max-width: 600px) {
.content_main_goals {
  display: flex;
  flex-direction: column;
  background-image: url(images/carb2.webp);
  background-size: cover;
  background-position: center;
  height: auto;
}
}



/*=================================GAMING_PAGE========================================*/
/*===================================================================================*/

.gaming-news {
  padding: 0px;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  margin-top:;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;
}
.gaming-news h2 {
  color: #dc143c;
  text-decoration: underline;
  text-shadow: 3px 3px 3px black;
}

.jumbotron-gaming { 
  height: 160px;
  margin-top: 15px;

  background-image: url(images/gaming2.webp);
  background-position: center;
  background-size: cover;
  text-align: center;
  background-repeat: no-repeat;
  background-color: black;
  border-top: solid;
  border-bottom: solid;
  border-color: grey;
  border-width: 1px;
  box-shadow: 0 0 20px 4px black;  
  backface-visibility: hidden;
  animation: gaming 40s linear infinite 0s;
  animation-timing-function: ease-in-out; 
}
   @keyframes gaming {
     0% {
       background-image: url('images/gaming2.webp');
     }
     25% {
       background-image: url('images/gaming11.webp');
     }
     50%{
       background-image: url('images/starwars4.webp');
     } 
     75%{
       background-image: url('images/gaming15.webp');
     } 
  }


.jumbotron-gaming h3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;
  color: white;

  text-shadow: 1 1px 6px black;
  /*font-size: 2.5vw;*/
  font-size: 50px;
  
  
  position: relative; left: 20px;
  margin-right: 40px;
}
.content_main_gaming {
  background-image: url(images/carb2.webp);
  background-size: cover;
  background-position: center;
  height: 600px;
  padding-left: 5px;

}



/*=================================PODCASTS_PAGE========================================*/
/*===================================================================================*/

.podcasts-news {
  padding: 0px;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  margin-top:;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;
}
.podcasts-news h2 {
  color: #dc143c;
  text-decoration: underline;
  text-shadow: 3px 3px 3px black;
}

.jumbotron-podcasts { 
  height: 160px;
  margin-top: 15px;

  background-image: url(images/engineering8.webp);
  background-position: center;
  background-size: cover;
  text-align: center;
  background-repeat: no-repeat;
  background-color: black;
  border-top: solid;
  border-bottom: solid;
  border-color: grey;
  border-width: 1px;
  box-shadow: 0 0 20px 4px black;  
  backface-visibility: hidden;
  animation: podcasts 40s linear infinite 0s;
  animation-timing-function: ease-in-out; 
}
   @keyframes podcasts {
     0% {
       background-image: url('images/engineering8.webp');
     }
     33% {
       background-image: url('images/podcast2.webp');
     }
     66%{
       background-image: url('images/podcast3.webp');
     } 
  }

.jumbotron-podcasts h3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;
  color: white;

  text-shadow: 1 1px 6px black;
  /*font-size: 2.5vw;*/
  font-size: 50px;
  
  
  position: relative; left: 40px;
  margin-right: 40px;
}
.content_main_podcasts {
  background-image: url(images/carb2.webp);
  background-size: cover;
  background-position: center;
  height: 600px;
  padding-left: 5px;
}

/*=================================MUSIC_PAGE======NOW MANUFACTURING==================================*/
/*===================================================================================*/

.music-news {
  padding: 0px;
  border-style: inset;
  border-color: white;
  border-width: 1px;
  margin-top:;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: scroll;
  overflow-x: hidden;
}
.music-news h2 {
  color: #dc143c;
  text-decoration: underline;
  text-shadow: 3px 3px 3px black;
}

.jumbotron-music { 
  height: 160px;
  margin-top: 15px;
  background-image: url(images/drone4.webp);
  background-position: center;
  background-size: cover;
  text-align: center;
  background-repeat: no-repeat;
  background-color: black;
  border-top: solid;
  border-bottom: solid;
  border-color: grey;
  border-width: 1px;
  box-shadow: 0 0 20px 4px black;  
  backface-visibility: hidden;
  animation: music 40s linear infinite 0s;
  animation-timing-function: ease-in-out; 
}
   @keyframes music {
     0% {
       background-image: url('images/drone4.webp');
     }
     33% {
       background-image: url('images/jet4.webp');
     }
     66%{
       background-image: url('images/engineering1.webp');
     } 
  }








.jumbotron-music h3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;
  color: white;

  text-shadow: 1 1px 6px black;
  /*font-size: 2.5vw;*/
  font-size: 50px;
  
  
  position: relative; left: 40px;
  margin-right: 40px;
}
.content_main_music {
  background-image: url(images/carb2.webp);
  background-size: cover;
  background-position: center;
  height: 600px;
  padding-left: 5px;

}

/*=================================Registration page=================================*/
/*===================================================================================*/

.php_code {
  text-align: center;
  color: blue;
 font-size: 20px;
}
.php_code2 {
  text-align: center;
  color: blue;
  font-size: 20px; 
  margin-top: 10px;
}
.hero {
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url(images/smoke3.webp);
  background-position: center;
  background-size: cover;
  position: absolute;

}



.form-box {
  box-shadow: 0 0 20px 9px black;
  overflow: hidden;
  width: 380px;
  height: 600px;
  position: relative;
  margin: auto;
  background: #222;
  padding: 5px;
  position: relative;top: 20px;

}



.button-box {
  width: 220px;
  margin: 35px auto;
  position: relative;
  border: solid;
  border-width: 1px;
  border-color: black;
  border-radius: 30px;
  background-color: #444;
}

.toggle-btn {

  padding: 10px 30px;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: none;
  position: relative;
}

#btn {
  border: solid;
  border-width: 2px;
  top: 0;
  left: 0;
  position: absolute;
  width: 110px;
  height: 100%;
  background: linear-gradient(to right, blue, #444);
  border-radius: 30px;
  transition: .5s;
}

.social-icons {
  margin: 30px auto;
  text-align: center;
}

.social-icons img {
  width: 30px;
  margin: 0 12px;
  
  cursor: pointer;
  border-radius: 50%;

}

.input-group {
  top: 180px;
  position: absolute;
  width: 280px;
  transition: .5s;
}

.input-field {
  width: 100%;
  padding: 10px 0px;
  margin: 5px 0;
  border-left: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #999;
  outline: none;
  background: transparent;

}

.submit-btn {
  border: solid;
  border-width: 2px;
  border-color: #888;
  width: 85%;
  padding: 10px 30px;
  cursor: pointer;
  display: block;
  margin: auto;
  background: linear-gradient(to right, blue, #444);
  border-radius: 30px;
}

.check-box {
  margin: 30px 10px 30px 0;
} 

#login {
  left: 50px;
}

#register {
  left: 450px;
}


@media screen and (max-width: 600px) {
.hero {
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url(images/smoke3.webp);
  background-position: center;
  background-size: cover;
  position: absolute;

}
.loginBox {
  margin:10px auto;

}


.form-box {
  box-shadow: 0 0 20px 9px black;
  overflow: hidden;
  width: 305px;
  height: 600px;
  position: relative;
  margin: auto;
  background: #222;
  padding: 5px;
 

}



.button-box {
  width: 220px;
  margin: 35px;
  position: relative;
  border: solid;
  border-width: 1px;
  border-color: black;
  border-radius: 30px;
  background-color: #444;
}

.toggle-btn {

  padding: 10px 30px;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: none;
  position: relative;
}

#btn {
  border: solid;
  border-width: 2px;
  top: 0;
  left: 0;
  position: absolute;
  width: 110px;
  height: 100%;
  background: linear-gradient(to right, blue, #444);
  border-radius: 30px;
  transition: .5s;
}

.social-icons {
  margin: 30px;
  text-align: center;
}

.social-icons img {
  width: 30px;
  margin: 0 12px;
  position: relative;right: 40px;
  cursor: pointer;
  border-radius: 50%;

}

.input-group {
  margin: auto;
  top: 180px;
  position: absolute;
  width: 200px;
  transition: .5s;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 10px 0px;
  margin: 5px auto;
  border-left: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #999;
  outline: none;
  background: transparent;

}

.submit-btn {
  border: solid;
  border-width: 2px;
  border-color: #888;
  width: 85%;
  padding: 10px 30px;
  cursor: pointer;
  display: block;
  margin: auto;
  background: linear-gradient(to right, blue, #444);
  border-radius: 30px;
}

.check-box {
  margin: 30px 10px 30px 0 auto;
} 

#login {
  left: 50px;
}

#register {
  left: 450px;
}
}
.popup {
  cursor: pointer;
  color: white;
}
.popup .popuptext {
  visibility: hidden;
  width: 340px;
  
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 4px;
  position: absolute;
  z-index: 9;
  bottom: 40px;
  left: 20%;
  margin-left: -80px;
  }

@media screen and (max-width: 600px) {
.popup .popuptext {
  visibility: hidden;
  width: 250px;
  overflow-y: scroll;
  
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 4px;
  position: absolute;
  z-index: 9;
  bottom: 0px;
  left: 20%;
  margin-left: -80px;
  }
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}


@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
/*======================================MEMBERS_PAGE=================================*/
/*-----------------------------------------------------------------------------------*/

.members {
  text-shadow: 2px 2px 2px black;
  box-shadow: 0 0 20px 9px black;
  border-radius: 1%;
  width: 70vw;
  height: 90%;
  position: relative;
  margin: auto;
  background: #222;
  padding: 5px;
  color: blue;
  font-size: 20px;
  overflow-y: scroll;
}
.members h1 {
  text-decoration-style: solid;
  text-decoration-line: underline;
  text-decoration-color: black;
  text-decoration-thickness: 2px;
  color: #888;
}
.members1 {
  width: 90%;
  height: 90%;
  background-image: url(images/carb2.webp);
  background-size: cover;
}

/*=================================PROFILE_PAGE_1==========================================*/
/*-----------------------------------------------------------------------------------------*/
.profilePageMain1 {
  background-image: url(images/earth2.webp);
}
.profilePageText1 {
  display: inline-block;
    border-style: outset;
  border-width: 2px;
  border-color: #444;
    border-radius: 5px;
  text-shadow: 2px 2px 2px black;
  color: #e6e6e6;
  box-shadow: 0 0 20px 9px black;
 
  width: 380px;
  height: 640px;

  
  background: #222;
  padding: 5px;
  font-size: 20px;
  font-size: 20px;
}
.bioProfilePage {
  display: inline-block;
  background-color: #555;
  height: 46%;
  width: 40%;
  border-style: inset;
  border-width: 2px;
  border-color: #333;
}
.account2 {
  word-wrap: break-word;
  border-style: outset;
  border-width: 2px;
  border-color: #444;
  border-radius: 5px;
  text-shadow: 2px 2px 2px black;
  color: #e6e6e6;
  box-shadow: 0 0 20px 9px black;
  height: 80%;
  margin: 20px;
  background: #222;
  padding: 5px;
  font-size: 20px;
}
@media screen and (max-width: 600px) {
.account2 {
  word-wrap: break-word;
  border-style: outset;
  border-width: 2px;
  border-color: #444;
  border-radius: 5px;
  text-shadow: 2px 2px 2px black;
  color: #e6e6e6;
  box-shadow: 0 0 20px 9px black;
  margin: 2px;
  background: #222;
  padding: 5px;
  font-size: 20px;
}
}


/*====================================ACCOUNT_PAGE========================================*/
/*-------------------------------------------------------------------------------------------*/
.delete_account_button {
  background-color:; /* Green */
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
}
.delete_account_button:hover {
  background-color: red; /* Green */
  color: white;
}
.words {
  color: #8585e0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  font-size: 18px;
}
.account {
  word-wrap: break-word;
  border-style: outset;
  border-width: 2px;
  border-color: #444;
  border-radius: 5px;
  text-shadow: 2px 2px 2px black;
  color: #e6e6e6;
  box-shadow: 0 0 20px 9px black;
  margin: 20px;
  background: #222;
  padding: 5px;
  font-size: 20px;
}
@media screen and (max-width: 600px) {
.account {
  display: flex;
  flex-direction: column;
  order: 2;
  word-wrap: break-word;
  border-style: outset;
  border-width: 2px;
  border-color: #444;
  border-radius: 5px;
  text-shadow: 2px 2px 2px black;
  color: #e6e6e6;
  box-shadow: 0 0 20px 9px black;
  margin: 2px;
  background: #222;
  padding: 5px;
  font-size: 20px;
}
}
.main11 {
  background-color: #555;
  background-image: url(images/earth2.webp);
}
@media screen and (max-width: 600px) {
.main11 {
  display: flex;
  flex-direction: column;
  background-color: #555;
  background-image: url(images/earth2.webp);
}
}
.changePassword {
  border-style: outset;
  border-width: 2px;
  border-color: #444;
  padding: 10px;
  word-wrap: break-word;
  border-radius: 5px;
  text-shadow: 2px 2px 2px black;
  margin: 20px;
  background: #222;
  padding: 5px;
  font-size: 20px;
}
@media screen and (max-width: 600px) {
.changePassword {
  display: flex;
  flex-direction: column;
  order: 1;
  border-style: outset;
  border-width: 2px;
  border-color: #444;
  padding: 10px;
  word-wrap: break-word;
  border-radius: 5px;
  text-shadow: 2px 2px 2px black;
  margin: 5px;
  background: #222;
  padding: 5px;
  font-size: 20px;
  margin-top: 10px;
}
}

@media screen and (max-width: 600px) {
.bio {

  

}
}

.bio {

  background-color: #555;
  border-style: inset;
  border-width: 2px;
  border-color: #333;
}

.buttonChange {
   margin: 6px;
}
.buttonCancel {

   margin: 8px;
   margin-top: 3px;
   margin-left: 14px;
}
.changePassword_changePic {
  margin: 10px;
}
@media screen and (max-width: 600px) {
.changePassword_changePic {

  margin: 10px;
}
}
.uploading {
  
}
      

/*===========================RECENT_POSTS_PAGE==========================================*/
/*---------------------------------------------------------------------------------------*/
.mobileTable {
  display: none;
}

@media screen and (max-width: 600px) {
.desktopTable {
   display: none;
}
.mobileTable {
  display: block;
}
}

/*=====================TABLE-HOVER-EFFECTS============================*/

td {
  
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
td:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 200, 0.2);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
td:hover, td:focus, td:active {
  color: white;
}
td:hover:before, td:focus:before, td:active:before {
  transition-delay: 0.1s;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
@media screen and (max-width: 600px) {
.contentName {
  min-width: 65vw;
}
}
@media screen and (max-width: 600px) {
.contentCreator {
  visibility:hidden;
}
}
.topicName {
  margin:0px;
  transition: 1s;
}
.topicName:hover {
  font-size: 16.8px;
  text-decoration: none;
}
.tagsBox {
  margin-top: 10px;
  margin-bottom: -5px;
  width:300px;
}
.createPostButton_RecentPostsPage {
  display: inline;
  font-family: roboto;
  font-size: 15px;
  width: 300px;
  height: 27px;
  margin-top:5px;
  transition: 0.3s;
  margin-bottom: 18px;
}
.createPostButton_RecentPostsPage:hover {
  box-shadow: 1px 1px 8px #202020 inset;
  font: bold;
  background: rgba(76, 175, 80, 0.9);
  margin-top:5px;
  margin-bottom: 18px;
}
/*---POST_BUTTON_FOR_OTHER_PAGES-------*/
.createPostButton_OtherPages {
  display: inline;
  font-family: roboto;
  font-size: 15px;
  width: 600px;
  height: 27px;
  margin-top:5px;
  transition: 0.3s;
  margin-bottom: 0px;
}
.createPostButton_OtherPages:hover {
  box-shadow: 1px 1px 8px #202020 inset;
  font: bold;
  background: rgba(76, 175, 80, 0.9);
  margin-top:5px;
  margin-bottom: 0px;
}
/*---------------------------------------*/
@media screen and (max-width: 600px) {
  .createPostButton_RecentPostsPage {
    margin-bottom: 0px;
  }
  .tagsBox {
  margin-top: 5px;
  margin-bottom: 15px;
  width:300px;
}
}
.recent_posts_background {
  overflow: hidden;
  height: auto;
  background-color: rgba(0, 0, 0, 0.7);
}
.recent_posts_wrapper {
  box-shadow: 0px 0px 20px blue, 0px 0px 30px black;
  background-color: black;
  height: auto;
  padding: 2px;
  padding-top: 0px;
  margin: 5px;
  margin-top:-5px;
  overflow: hidden;
  background-image: url(images/smoke3.webp);
  background-size: 100%;
  width: 99%;
  border-style: inset;
  border-width: 3px;
  border-color: black;
}   
.recent_posts_wrapper th {
 background-color: rgba(0, 0, 0, 0.4)!important;
 
}  
.heading_background {
  background-color: #181818;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: black;
}
.recent_posts_wrapper_heading {
  margin-bottom: 0px;
  font-size: 16px;
  color: #6495ED;
}
.table2 {
  margin: 3px;
  margin-top: 5px;
  padding: 4px;
}
.table2 tr, td{
  margin: 0px;
  padding: 0px;
}
td, tr {
  padding:0px;
}
 .table1 {
  border-width: 2px;
  border-collapse: collapse;
  border-radius: 1em;
  margin: 5px;
 }
@media screen and (max-width: 600px) {
 .table1 {
  border-width: 2px;
  border-collapse: collapse;
  border-radius: 1em;
  margin: 0px;
  padding: 0px;
  font-size: 10px;
 }
}
@media screen and (max-width: 600px) {
 .table1 th, tr, td{
  border-width: 2px;
  border-collapse: collapse;
  border-radius: 5px;
  margin: 0px;
  padding: 0px;
  font-size: 14px;
 }
}
 .recent_posts_wrapper td, tr, th{
  border-style: solid;
  border-color: black;
  border-width: 1px;
  margin: 5px;
  
  text-shadow: 2px 2px 2px black;
  border-collapse: separate;
  text-align: center;
}

 @media screen and (max-width: 600px) {
.recent_posts_wrapper td, tr, th{
  font-size: 14px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  margin: 1px;
  padding: 1px;
  text-shadow: 2px 2px 2px black;
  height: 2px;
}
}

/*===================================SPACE_NEWS_PAGE===========================================*/
.space_news_wrapper1 {
  background-color: rgba(0, 0, 0, 0.8);
  height: 700px auto;
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;
  background-image: url(images/.webp);
  background-size: cover;
  border-style: inset;
  border-width: 3px;
  border-color: black;
}
 @media screen and (max-width: 600px) {
  .space_news_wrapper1 {
    display: flex;
    flex-direction: column;
    order: 1;
  background-color: black;
  height: 700px auto;
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;
  background-image: url(images/.webp);
  background-size: cover;
  border-style: inset;
  border-width: 3px;
  border-color: black;
}
}
 @media screen and (max-width: 600px) {
  .space_news {
    display: flex;
    flex-direction: column;
    order: 2;
  }
}
.space_news_wrapper1 p {
  text-indent: 1px;
  background-size: cover;
  border-radius: 0px;
  text-align: left;
  /*border-style: solid;*/
  /*border-width: 0.1px 0px 0.1px 0px;*/
  border-color: white;
  border-radius: 0px;
  white-space: pre-line;
  padding: 5px;
  box-shadow:  0px 2px 0px black;
}
.space_news_wrapper1 h2, h4 {
text-align: center;
}
.topicContentSpaceNews {
  box-shadow: 0 0 20px 9px black;
  width: auto;
  position: relative;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;
}
 @media screen and (max-width: 600px) {
  .topicContentSpaceNews {
  display: flex;
  flex-direction: column;
  order: 1;
  box-shadow: 0 0 20px 9px black;
  width: auto;
  position: relative;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;
  
}
}
.topicContentInsideBoxSpaceNews {
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.1);
  height: 700px auto;
  border-style: inset;
  border-color: black;
  font-size: 20px;
  color: #f0f8ff;
  box-shadow: inset 0 3px 20px 2px black;
  overflow: scroll;
  overflow-x: hidden;
  text-shadow: 2px 2px 2px black;
}
.topicContentInsideBoxSpaceNews h2 {
  
  


}
 @media screen and (max-width: 600px) {
.topicContentInsideBoxSpaceNews {
  display: flex;
  flex-direction: column;
  order: 1;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 700px auto;
  border-style: inset;
  border-color: black;
  font-size: 20px;
  color: #f0f8ff;
  box-shadow: inset 0 3px 20px 2px black;
  overflow: scroll;
  overflow-x: hidden;
  text-shadow: 2px 2px 2px black;
}
}

/*========================================POST_PAGE==============================================*/
.blackPost p{
  color:black;
}
.blackPost li{
  color:black;
}
.blackPost ul{
  color:black;
}
.blackPost ol{
  color:black;
}
.blackPost h1{
  color:black;
}
.blackPost h2{
  color:black;
}
.blackPost h3{
  color:black;
}
.blackPost h4{
  color:black;
}
.blackPost h5{
  color:black;
}
.blackPost strong{
  color:black;
}
.videoSec {
  background-color: rgba(0, 0, 0, 0.8);
  border-style: solid;
  border-width: 0.5px 0px 0px 0px;
  border-color: darkgray;
}
select {
  width: 1000px;
}
.ck-editor__editable {
    min-height: 300px !important;
}
.post_button {
  margin: 5px;
  width: 50vw;
  color: black;
  font-size: 18px;
  transition: 0.4s;
}
.post_button:hover {
  background-color:  #0057d4;
  box-shadow: 0px 0px 20px blue, 0px 0px 30px black;
  margin: 5px;
  width: 50vw;
  color: black;
  font-size: 22px;
}
.topicContentInsideBox {
  padding: 1px;
  background-color: #191970;
  height: auto;
  width: 100%;
  border-style: inset;
  border-color: black;
  font-size: 20px;
  box-shadow: inset 0 3px 20px 2px black;
  margin: 0px;
  margin-top: -30px;
}
 @media screen and (max-width: 600px) {
.topicContentInsideBox {
  padding: 0px;
  background-color: #191970;
  height: auto;
  width: 100%;
  border-style: inset;
  border-color: black;
  font-size: 20px;
  box-shadow: inset 0 3px 20px 2px black;
  margin: 0px;
  margin-top:;
}
}
.pp {
  margin:0px;
  margin-bottom: -10px;
  color:white;
}


.topicContentInsideBoxSpaceNews {
  display: flex;
  flex-direction: column;
  order: 1;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 700px auto;
  border-style: inset;
  border-color: black;
  font-size: 20px;
  color: #f0f8ff;
  box-shadow: inset 0 3px 20px 2px black;
  text-shadow: 2px 2px 2px black;
}




/*==============================TOPIC_PAGE================================================*/
/*------------------------------------------------------------------------------------------*/
#pinPostButton {
  background-color: lightgrey;
  font-size: 18px;
  transition:0.4s;
  border-radius: 0px;
  margin-bottom: 15px;
}
#pinPostButton:hover {
  background-color: blue;
  font-size: 20px;
}
.recent_posts_wrapper_TopicPage {
  box-shadow: 0px 0px 20px blue, 0px 0px 30px black;
  background-color: black;
  height:2px!important;
  padding: 2px;
  padding-top: 0px;
  margin: 5px;
  margin-top:-5px;
  overflow: hidden;
  background-image: url(images/smoke3.webp);
  background-size: cover;
  width: 99%;
  border-style: inset;
  border-width: 3px;
  border-color: black;
}
 @media screen and (max-width: 600px) {
.recent_posts_wrapper_TopicPage {
  box-shadow: 0px 0px 20px blue, 0px 0px 30px black;
  background-color: black;
  height:2px!important;
  padding: 2px;
  padding-top: 0px;
  margin: 5px;
  margin-top:-5px;
  overflow: hidden;
  background-image: url(images/smoke3.webp);
  background-size: cover;
  width: 99%;
  border-style: inset;
  border-width: 3px;
  border-color: black;
}
}

 .recent_posts_wrapper_TopicPage td, tr, th{
  border-style: solid;
  margin: 5px;
  padding: 10px;
  background: #222;
  text-shadow: 2px 2px 2px black;
}
 @media screen and (max-width: 600px) {
.recent_posts_wrapper_TopicPage td, tr, th{
  font-size: 14px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  margin: 0px;
  padding: 0px;
  background: #222;
  text-shadow: 2px 2px 2px black;
  height: 2px;
}
}
.topic_recent_posts {
overflow: hidden;
}
@media screen and (max-width: 770px) {  
.topic_recent_posts {
  display: none;
}
}
.postComment {
  background-color: lightgrey;
  font-size: 18px;
  transition:0.4s;
  border-radius: 0px;
  margin-bottom: 15px;
  width:600px;
}

@media screen and (max-width: 600px) {
.postComment {
  background-color: lightgrey;
  font-size: 18px;
  transition:0.4s;
  border-radius: 0px;
  margin-bottom: 15px;
  width:300px;
}
}
.postComment:hover {
  background-color: green;
  font-size: 20px;
}
.deleteButton {
  background-color: white;
}
#b1 {
  background-color: lightgrey;
  font-size: 18px;
  transition:0.4s;
  border-radius: 0px;
  margin-bottom: 15px;
}
#b1:hover {
  background-color: red;
  font-size: 20px;
}
#b2 {
  background-color: lightgrey;
  font-size: 18px;
  transition:0.4s;
  border-radius: 0px;
  margin-bottom: 15px;
}
#b2:hover {
  background-color: red;
  font-size: 20px;
}
.postText {
  font-family: Arial, Helvetica, sans-serif;
  padding: 40px;
  background-color: rgba(0, 0, 0, 0.4);
  border-style: solid;
  border-width: 0.1px 0px 0.1px 0px;
  border-color: white;
  border-radius: 0px;
  box-shadow:  0px 2px 0px black;
  margin:10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.postText{
  font-family: Arial, Helvetica, sans-serif;
  padding: 30px;
  padding-top: 0px;
  background-color: rgba(0, 0, 0, 0.9);
  border-style: solid;
  border-width: 0.01px 0px 0.01px 0px;
  border-color: white;
  border-radius: 0px;
  box-shadow:  0 0 4px #FF0000;
  margin-top: 10px;
  margin-bottom: 10px;
}
.postText p, h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFAF0;
}
.postText table {
  text-align: center;
  border-spacing: 2px;
  border-collapse: separate;
  margin: -25px -20px -25px -20px;
}
.postText td {
  padding: 10px 20px 10px 20px;
  background-color: rgba(0, 0, 0, 0.8);
}
@media screen and (max-width: 600px) {
.postText {
  font-family: Arial, Helvetica, sans-serif;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  border-style: solid;
  border-width: 0.1px 0px 0.1px 0px;
  border-color: white;
  border-radius: 0px;
  box-shadow:  0px 2px 0px black;
  margin:0px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.postText{
  font-family: Arial, Helvetica, sans-serif;
  padding: 10px;
  padding-top: 0px;
  padding-bottom: 20px;
  background-color: rgba(0, 0, 0, 0.4);
  border-style: solid;
  border-width: 0.01px 0px 0.01px 0px;
  border-color: white;
  border-radius: 0px;
  box-shadow:  0 0 4px #FF0000;
  margin-top: 10px;
  margin-bottom: 10px;
}
.postText p {
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFAF0;
}
}

.main_wrapper_1 ul, ol{
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFAF0;
  line-height: 40px;
  /*text-shadow: 0px 0px 1px  white;*/
}
.main_wrapper_1 mark {
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0px 0px 0px;
}
.main_wrapper_1 strong {
  font-family: Arial, Helvetica, sans-serif;
  color:  #DC143C;
}
.commentText p {
  color:black;
}
.main_wrapper_1 {
  font-family: Arial, Helvetica, sans-serif;
  height: auto;
  width: 97%;

  padding: 0px;

  position: absolute;
  background-image: url(images/red7.jpg);
  background-size: cover;
  border-style: groove;
  border-width: 3px;
  border-color: black;
  border-radius: 20px;
  background-position: center;
  background-repeat:round;
  font-size: 20px;
  color: #f0f8ff;
  margin:20px;
  margin-top:0px;
  margin-left: 5px;
  
}
@media screen and (max-width: 600px) {
.main_wrapper_1 {
  font-family: Arial, Helvetica, sans-serif;
  height: auto;
  width: 98%;
  padding: 10px;
  position: absolute;
  background-image: url(images/background6.webp);
  background-size: cover;
  border-style: groove;
  border-width: 3px;
  border-color: black;
  border-radius: 20px;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 20px;
  color: #f0f8ff;
  margin:0px;
  margin-top:0px;
  margin-left: -10px;

}
.main_wrapper_1 ul, ol{
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFF0;
  line-height: 40px;
  text-shadow: 0px 0px 1px  white;
  font-size: 18px;
  line-height: 30px;
}
}
textarea {

}
@media screen and (max-width: 600px) {
.main_wrapper_1 h2{
  word-break: break-word;
  margin-top: 20px;
  margin-left: 45px;
  font-size: 26px;
  color: #f0f8ff;
  text-shadow: 2px 2px 2px black;
}
}
@media screen and (max-width: 600px) {
.main_wrapper_1 p{
  width: 100%;
  text-shadow: 2px 2px 30px  rgba(0, 0, 0, 0.9);
  font-size: 18px;
}
}
.Wrapper1 {
  background-color: grey;
  width: 600px;
}
.topicPage1 {
  box-shadow: 0 0 20px 9px black;
  background-color: black;
  overflow: hidden;
  width: 600px;
  height: 580px;
  position: relative;
  margin: auto;
  background: #222;
  padding: 5px;
}
.topicContent {
  box-shadow: 0 0 20px 9px black;
  overflow: hidden;
  width: auto;
  height: 89vh;
  width: 89vw;
  position: relative;
  margin: auto;
  background: #444;
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;
}
.topicContentSpaceNewsOne {
  box-shadow: 0 0 20px 9px black;
  overflow: hidden;
  width: auto;
  height: 79vh;
  width: 79vw;
  position: relative;
  margin: 30px;
  margin-left: 15px;
  background: #444;
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;
  }
.main_wrapper_1 p {
  text-indent: 1px;
  background-size: cover;
  border-radius: 0px;
  text-align: left;
  white-space: pre-line;
  padding: 5px;
  margin-bottom:;
  }
@media screen and (max-width: 600px) {
  .main_wrapper_1 p {
  text-indent: 1px;
  background-size: cover;
  border-radius: 0px;
  text-align: left;
  white-space: pre-line;
  padding: 0px;
  margin-bottom:;
  }
}

.main_wrapper_1 h5 {
  text-decoration: underline;
  margin-bottom: 0px;
}
.images {

margin-left: 0px;



  
}
.videoUpload {
  border-radius:5px;
  border-style: groove;
  border-width: 4px;
  border-color: #00004d;
  min-width: 200px;
  max-width: 240px;
  min-height: 50px;
  max-height:100%;
  background-color: black;

  margin-bottom: 5px;
  box-shadow: 2px 2px 2px black;
  padding: 1px;
}
.imageUpload {
  border-radius:5px;
  border-style: groove;
  border-width: 4px;
  border-color: #00004d;
  min-width: 200px;
  max-width: 700px;
  min-height: 50px;
  max-height:1200px;
  background-color: black;

  margin-bottom: 5px;
  box-shadow: 2px 2px 2px black;
  padding: 1px;
  /*margin-right: 140px;*/
}

.imageUpload2 {
  border-radius:5px;
  
  border-style: groove;
  border-width: 4px;
  border-color: #00004d;
  min-width: 200px;
  max-width: 700px;
  min-height: 50px;
  max-height: 1200px;
  background-color: black;

  margin-top: 5px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 2px black;
  padding: 1px;
}
.imageUpload3 {
  border-radius:5px;
  
  border-style: groove;
  border-width: 4px;
  border-color: #00004d;
  min-width: 200px;
  max-width: 700px;
  min-height: 50px;
  max-height: 1200px;
  background-color: black;

  margin-top: 5px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 2px black;
  padding: 1px;
}

.imageUpload4 {
  border-radius:5px;
  
  border-style: groove;
  border-width: 4px;
  border-color: #00004d;
  min-width: 200px;
  max-width: 700px;
  min-height: 50px;
  max-height: 1200px;
  background-color: black;

  margin-top: 5px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 2px black;
  padding: 1px;
}

.imageUpload5 {
  border-radius:5px;
  
  border-style: groove;
  border-width: 4px;
  border-color: #00004d;
  min-width: 200px;
  max-width: 700px;
  min-height: 50px;
  max-height: 1200px;
  background-color: black;

  margin-top: 5px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 2px black;
  padding: 1px;
}
.imageUpload6 {
  border-radius:5px;
  
  border-style: groove;
  border-width: 4px;
  border-color: #00004d;
  min-width: 200px;
  max-width: 700px;
  min-height: 50px;
  max-height: 1200px;
  background-color: black;

  margin-top: 5px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 2px black;
  padding: 1px;
}

.topic_replies  td, tr{
  font-size: 17px;
  color: #f0ffffff;
  word-break: ;
  border-style: solid;
  margin: 5px;
  
  text-shadow: 1px 1px 1px black;
  height: 40px;
}
.comments {
  word-break: break-all;
  border-style: solid;
  background-color:grey;
}

/*===================================POST_PAGE=======================================*/
.videoUpload {
  background-color: black;
  padding:5px;
  margin:0px;
  width: 400px;
}
.recentPostsWrapper1 {
  background-color: black;
  height: 100%;
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;
  background-image: url(images/carb2.webp);
  background-size: cover;
  width: 100%;
  border-style: inset;
  border-width: 3px;
  border-color: black;

}
.recent_posts_wrapper11 {
  height: 100%;
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;
}
 @media screen and (max-width: 600px) { 
.recent_posts_wrapper1 {
  order: 1;
  
  height: 100%;
  padding: 0px;
  overflow: scroll;
  overflow-x: hidden;
}
}

 @media screen and (max-width: 600px) {  
.recent_posts_wrapper11 {
  display: flex;
  flex-direction: column;
  order: 2;
  height: 100%;
  padding: 5px;
  overflow: scroll;
  overflow-x: hidden;

}
}   

/*===============================CHAT_PAGE========================================*/

/*----------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------*/

.chatWrapper {

  background-image: url(images/background3.webp);
  background-size: cover;
  margin: 10px auto;
  margin-top: 0px;
  width: 80%;
  height: 90%;
  background-color: gray;
  border-radius: 10px;
  border-style: outset;
  border-color: black;
  border-width: 2px;
  box-shadow: 2px 2px 2px black;

}

.messageBox {
  margin: auto;
  width: 90%;
  height: 400px;
  background-color: gray;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  border-radius: 10px;
}

.typeBox textarea{
  margin:auto;
  width: 800px;
  height: 200px;
}
/*====================================RANDOM==========================*/
table {
  border-collapse:collapse;
}