/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url(https://madgadgets.neocities.org/bg.png);
  color: white;
  font-family: monospace;
  font-size: 150%;
}

ul {
    list-style-position: inside;
}

button {
  background-image: url(https://madgadgets.neocities.org/button1.png);
  background-size: 100% 100%;
  color: green;
  font-size: 100%;
}

/*----------------------------div stuff start------------------------------*/

#checkout {
    position: absolute;
    top: 530px;
    right: 50px;
    width: 200px;
    background-color: grey;
    padding: 10px;
}

#content {
    position: absolute;
    right: 0;
    top: 0;
    margin-left: 200px;
}

#content {
    margin: 0 200px; /* setting top and bottom margin to 0 and right and left margin to 200px */
}

#maincontent {
    position: absolute;
    left: 22%;
    width: 850px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

#helpme {
    position: absolute;
    top: 170px;
    right: 120px;
    width: 400px;
}

#main_nav {
  position: absolute;
  top: 180px;
  left: -300px;
  width: 400px;
  background-color: gray;
  box-shadow: -4px 4px 15px 1px black;
}

ul {
  list-style-type: square;
  margin: 0;
  padding: 0;
}
/*----------------------------div stuff end------------------------------*/


.animated-text {
  font-family: monospace;
  overflow: hidden;
  height:1.1em;
  word-wrap: break-word;
  white-space: nowrap;
  animation: typing 4s steps(71) forwards;
} 

@keyframes typing {
   from { width: 0; }
   to { width: 100%; }
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-image: url(https://madgadgets.neocities.org/column%20tooltip.png);
  background-size: 100% 100%;
  color: #fff;
  text-align: left;
  font-size: 90%;
  padding: 15px 25px;
  border-radius: 2px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

@keyframes blinker {
  50% {
    color: indigo;
  }
}

blink {
  animation: blinker 1.5s linear infinite;
  color: hotpink;
  font-weight: bold;
}

code {
  background-color: black;
  border-radius: 10%;
  padding: 5px;
  color: green;
}

kbd {
  color: black;
  background-color: rgb(236, 236, 236);
  border-radius: 5%;
  padding: 5px;
  border: 2px solid rgb(189, 189, 189)
}
/* tables */
td {
			border: 1px solid #999;
			padding: 0.1em 1em;
}
	
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: orange;
}

/* mouse over link */
a:hover {
  color: yellow;
}

/* selected link */
a:active {
  color: lightgreen;
}