/* MyWebU.css here */
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {        
  background-color: #1f2937; 
  //background-color: #000; 
}

body {
  //background-color: WHITE; 
  //background-color: #000; 
  background-color: #1f2937; 
  margin: 0;
  padding: 0.5%;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.5vw;
}

input, button, textarea {
  font: inherit;
  font-size: 1.20vw;
}

nav {
 border-radius: 2rem;
 margin: 0 auto 2rem;
 max-width: 100%;
 font-size: 1vw;
 line-height: 2rem;
}

div {
  text-align:center;
  //background-color:WHITE;
  //background-color:#555;
  //background-color:#111111;
  background-color:#1f2937;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.div_radius {
  text-align:center;
  //background-color:#002500;
  //background-color:#151515;
  background-color:#1f2937;
  //margin-left: auto;
  //margin-right: auto;
  max-width: 100%;
}

img {
  margin: 0;
  padding: 0;
  border-radius: 8px;
  width: auto;
  height: auto;
  //max-width: 250px;
  max-width: 30%;
  max-height: 30%;
  min-height: 25%;
  box-sizing: border-box;
  background-color:#1f2937;
}

img.img_200x200 {
  max-width: 50%;
}
img.img_600x500 {
  max-width: 600px;
  max-height: 500px;
}
img#img_cycle {
  max-width: 350px;
  min-height: 260px;
}
img.img_header {
  max-width: 85%;
  border-radius: 80%;
  width:250px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  }

img.img_WhosWho {
  max-width: 15%;
  margin-left: auto;
  margin-right: auto;
  }
.background-image {
    margin-top: 0;
    margin-bottom: 10px;
    position: relative;
    background-image: url('https://www.mywebuniversity.com/images/H1_BG1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    width:250px;
    height: 50px;
    //max-width: 20%;
    //min-height: 15%;
    margin-left: auto;
    margin-right: auto;
}

table {
  border: 2px outset white; 
  border-collapse: collapse;
  background-color: #FFF;
  text-align: center;
  //max-width: 90%;
  max-width: 70%;
  color: #FFF;
  margin-left: auto;
  margin-right: auto;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

th {
  color: #FFF; 
  margin: 10px;
  padding: 5px;
  text-align: center;
  //background-color: #002500;
  // background-color: #050505;
  background-color: #1f2937;
  //border: 2px #E1FAE1; 
}

td {
  //color: #005000;
  color: #FDDC5C; /* lightgold */
  margin: 10px;
  padding: 5px;
  max-width: 80%;
  min-height: 20%;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  //border: 0.5px solid #000055;
  border: 0.5px solid #FFF;
  //background-color: #202020;
  background-color: #1f2937;
  border-collapse: collapse;
}

h1 {
 color:#FFF; 
 background-color: #1f2937;
 //color:#8de2f7; 
 border-radius: 50px;
 position: relative;
 white-space: nowrap;
 animation: mymove 10s infinite;
 margin-top: 10px;
 margin-bottom: 10px;
 text-align: center;
 font-size:1.3vw;
 margin-left: auto;
 margin-right: auto;
 //max-width: 30%;
}
.h1_matchparent {
 color:gold; 
 border-radius: 50px;
 position: relative;
 white-space: nowrap;
 animation: mymove 10s infinite;
 margin-top: 10px;
 margin-bottom: 10px;
 text-align: justify;
 font-size:1.5vw;
 max-width: 100%;
 margin-left: auto;
 margin-right: auto;
}

h2 {
  color: #FFF; 
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  //background-color: #002500;
  background-color: #1f2937;
  font-size:1.25vw;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.h2_blink {
        animation: blinker 1.5s linear infinite;
        color: #900000; 
        background-color:#FFF;
        text-align: center;
        font-family: sans-serif;
        }
             @keyframes blinker {
             50% {
                 opacity: 0;
                 }
             }

.h2_man {
  color: #007500;
  border: none;
  background-color: #FFF;
  margin: 10px;
  font-size:2vw;
  font-weight: bolder;
  text-align: center;
  padding: 10px 75px 10px 75px;
  margin-left: auto;
  margin-right: auto;
}
.h2_header {
  color: #FFF;
  border: none;
  background-color: #001500;
  margin: 10px;
  font-size:1.5vw;
  text-align: center;
  padding: 0 75px 0 75px;
  margin-left: auto;
  margin-right: auto;
}

.h2_noborder {
  color: #005000;
  border: none;
  background-color: #FFF;
  margin: 20px;
  font-size:1.65vw;
  font-weight: bolder;
  text-align: auto;
  max-width: auto;
  padding: 0 0px 0 75px;
}
.text-background p_bold {
    display: inline-block;
    //background-color: lightyellow; 
    background-color: #FFFFF0; 
    color: #FFF;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-weight: bold; 
    fn class="text-background">About MyWebUniversity</span>ont-weight: bold; 
    //padding: 0 75px 0 75px;
}
.h2_nav {
  color: #007500; 
  padding: 1rem;
  font-size:1.35vw;
  text-align: left;
  border-radius: 2rem 2rem 0 0;
  line-height: 3rem;
}
.h2_toc {
  color: #FFF; 
  padding: 1.0rem;
  text-align: center;
  background-color: #1f2937;
  font-size:2.1vw;
  max-width:70%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5px;
  border-radius: 2rem 2rem 0 0;
}

#h2_white {
  color: #FFFFFF; 
  margin: 10px;
  font-size:2.05vw;
  padding: 5px;
  font-size: 1.6vw;
}
#h2_lightcyan {
  color: lightcyan; 
  //background-color: #111;
  background-color:#1f2937;
  font-size:2.05vw;
  margin: 10px;
  padding: 5px;
  text-align: left; 
}

#h2_#000090 {
  color: #FFF; 
  font-size:2.05vw;
  margin: 10px;
  padding: 5px;
  font-size: 1.6vw;
}
#h2_blue {
  color: lightcyan;
  margin: 10px;
  text-decoration: none;
}

h3 {
  color: lightblue;
  text-align: left;
  font-size:1.5vw;
  padding: 0 75px 0 75px;
}

h4 {
  //color: #FFF;
  //color: #00F100;
  color: #00DA00;
  text-align: justify; 
  padding: 0 75px 0 70px;
  font-size:2.35vw;
  margin: 10px;
  font-size: 1.6vw;
  text-align: center;
}

.h4_notice {
  color: #FFF;
  text-align: justify; 
  padding: 0 75px 0 75px;
  font-size:2.05vw;
  margin: 10px;
  font-size: 1.6vw;
}

.h4_lightcyan {
  color: #9F9F9F;
  font-size:1.35vw;
}

h5 {
  //color: #33ffaf;
  color: #DAF7A6;
  text-align: center; 
  font-size:1.5vw;
  margin: 10px;
  padding: 5px;
}
h6 {
  color:#FFF;
  text-indent:50px;
  text-align:justified;
  font-size:1vw;
  margin: 5px;
  padding: 0px 50px 0px 0px;
}

ul {
  list-style-type: none;
  font-size:1.35vw;
  color: #FFF;
}

ol {
  //list-style-type: "none";
  type: "1";
  font-size:1.35vw;
  color: #FFF;
}

li {
  //color: #1f2937;
  color: #FFF;
  font-size: 1vw;
  font-weight: bolder;
  max-width:80%;
  margin-left: auto;
  margin-right: auto;
}

.li_noborder {
  color: #FFF;
  //border-top: 0px solid #111;
  border-top: 0px solid #1f2937;
  font-size: 1.25vw;
}

li a {
  display: block;
  //color: #b5df2d; 
  color: #FFF; 
  font-size: 1.35vw;
  text-align: left;
  border-radius: 2rem 2rem 0 0;
  padding: 0 75px 0 75px;
}
li a,
li a:visited {
  text-decoration: none;
  //color: gold; 
  //color: #FFF; 
  color: lightblue;
  padding: 10rem;
  text-align: justify;
  font-size:1.35vw;
  //background-color: #103050;
  background-color: #1f2937;
  padding: 0 15px 5px 55px;
  max-width:90%;
  margin-left: 60px;
  margin-right: 60px;
  border-radius: 2rem 2rem 0 0;
}

li a:hover,
li a:focus {
  background-color: #F8F8F8;
  font-size:1.15vw;
  color: red;
  cursor: pointer;
}

li:last-child a {
  border-radius: 0 0 2rem 2rem;
}

textarea {
  margin:15px;
  padding: 15px; 
  text-align: justify;
  background-color: #002000; 
  font-size:1.25vw;
  color:#FFF;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

a {
  text-decoration: none;
  font-size:1.15vw;
  //color: #FFF;
  color: lightblue;
  background-color:1f2937;
}
/* unvisited link */
a:link {
  //color: #FFF;
  color: lightblue;
  font-family:Arial, Helvetica, sans-serif;
  background-color: transparent;
  text-decoration: none;
   
}

/* visited link */
a:visited {
  // color: #b5df2d; /* Pistai color */
  background-color: transparent;
  text-decoration: none;
  //color: pink;
  color: lightgreen;

  text-decoration-color: hotpink;
}

/* mouse over link */
a:hover {
   color: red;
   background-color: transparent;
   text-decoration: none;
}

/* selected link */
a:active {
     //color: #FFF;
     color: cyan;
} 

p  { 
     color: #FFF;
     background-color: #1f2937;
     font-size: 1.25vw;
     margin: 20px;
     padding: 20px;
     text-align: justify;
     font-family: sans-serif, Arial, Helvetica;
     font-variant: normal;
     padding: 0 75px 0 75px;
     }

blockquote { 
     font-size: 1.35vw;
     color: white;
     font-family: sans-serif, Arial, Helvetica;
     font-variant: normal;
     }

/* Media Query */
@media only screen and (max-width: 900px) {
body, html, nav, div {
  text-align:center;
  //background-color:WHITE;
  //background-color:#111;
  background-color:#1f2937;
  margin-left: auto;
  margin-right: auto;
  overflow-y: visible;
  float none;
  display: block;
}
}

@media only screen and (max-width: 900px) {
table,  tr, th, td, li, li a, li:last-child {
  max-width: 70%;

}
}

@media only screen and (max-max-width: 900px) {
a,  a:hover, li a:hover, li a:focus, a:active a:link  {
  max-width: 70%;
  font-size: 10vw;
}
}

@media only screen and (max-max-width: 900px) {
img {
  margin: 0;
  padding: 0;
  border-radius: 5%;
  box-sizing: border-box;
  border-radius: 10%;
  //max-width: 380px;
  //max-height: 300px;
  max-width: 30%;
  max-height: 30%;
  min-height: 25%;
}
}

@media only screen and (max-max-width: 900px) {
.img_header  {
  //max-width: 300px; 
  //max-height: 50px;
  max-width: 30%;
  max-height: 30%;
  min-height: 25%;
}
}

@media only screen and (max-max-width: 900px) {
img.img_200x200 {
  //max-width: 200px;
  //min-height:200px;
  max-width: 30%;
  max-height: 30%;
  min-height: 25%;
}
}

@media only screen and (max-max-width: 900px) {
img.img_600x500 {
  //max-width: 600px;
  //max-height:500px;
  max-width: 100%;
  max-height: 100%;
  min-height: 50%;
}
}

@media only screen and (max-max-width: 900px) {
img#img_cycle {
  max-width: 100px;
  max-height: 100px;
}
}

@media only screen and (max-max-width: 900px) {
img.img_header {
  max-width: 250px%;
  border-radius: 80%;
  //width:250px;
  //height: 25px;
  margin-left: auto;
  margin-right: auto;
  }
}

@media only screen and (max-max-width: 900px) {
img.img_WhosWho {
  max-width: 15%;
  margin-left: auto;
  margin-right: auto;
  }
}

@media only screen and (max-max-width: 900px) {
.background-image {
    margin-top: 0;
    margin-bottom: 10px;
    position: relative;
    background-image: url('https://www.mywebuniversity.com/images/H1_BG1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    //width:250px;
    max-height: 30%;
    max-width: 30%;
    min-height: 25%;
    //max-width: 600px;
    //max-height:100px;
    margin-left: auto;
    margin-right: auto;
}
}

table {
  border: 2px outset white; 
}

@media only screen and (max-max-width: 900px) {
img#img_cycle  {
  max-width: 100%;
  max-height: 100%;
}
}

@media only screen and (max-max-width: 900px) {
.center {
  width: 100%;
}
}

@media only screen and (max-max-width: 900px) {
p, .p_bold, blockquote, input, button, textarea {
  max-width: 55%;
}
}

@media only screen and (max-max-width: 900px) {
h1, h2, h3, h4, h5, h6 {
  max-width: 50%;
}
}

/* mystyles.css here */
body {
   //background-color:  rgb(25,25,25); 
   background-color:  #1f2839; 
   //background-color:  rgb(FF,FF,FF);  
   overflow-y: visible;
   float none;
   display: block;
}

@keyframes mymove {
  from {left: -20%;}
  to {left: 20%;}
}

.myclass {
    display: block;
    color: lightgoldenrodyellow;
    text-align: center;
    font-size: 1.2em;
    font-family: 'New York', 'Helvetica Neue';
}
#btnContainer {
    text-align: center;
}
#btnContainer1 {
    text-align: center;
}
#btnContainer2 {
    text-align: center;
}
#countLabel {
    display: block;
    color: #1f2937;
    text-align: center;
    font-size: 0.85em;
    font-family: 'New York', 'Helvetica Neue';
}
#num1Label {
    display: block;
    color: #1f2937;
    text-align: center;
    font-size: 0.85em;
    font-family: 'New York', 'Helvetica Neue';
}
#num2Label {
    display: block;
    color: #1f2937;
    text-align: center;
    font-size: 0.85em;
    font-family: 'New York', 'Helvetica Neue';
}
.buttons {
    padding:10px 20px;
    color: #FFF;
    //font-size: 0.85em;
    font-size: .80em;
    //font-weight: 1em;
    //width: 360px;
    //max-width: 100%;
    max-width: auto;
    //display: inline-block;
    //background-color: #353535;
    background-color: #393939;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.20s;
}
button#width-350px{
    //width: 360px;
    max-width: 50%;
    display: inline-block;
}
.buttons:hover {
    background-color:#009900;
}
.scrollText {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}
.scrollText span {
    display: inline-block;
    padding-left: 100%;
    animation: scroll 55s linear infinite;
    font-weight: bold; 
}

@keyframes scroll {
    50% {
         transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}