/* 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." */


:root {
  --superdarkgreen: #004707;
  --darkgreen: #00870B;
  --midgreen: #00CF11;
  --green: #a1f71c;
  --darkblue: #0200f3;
  --blue: #014cfb;
  --lightblue: #40a3ff;
  --cyan: #35e5f2;
  --pink: #f34895;
  --purple: #9201f7;
  --black: #000000;
  --white: #ffffff;
  --yellow: #dee505;
}

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dashed dotted;}

div.dotted {border-style: dotted;}
div.dashed {border-style: dashed;}
div.solid {border-style: solid;}
div.double {border-style: double;}
div.groove {border-style: groove;}
div.ridge {border-style: ridge;}
div.inset {border-style: inset;}
div.outset {border-style: outset;}
div.none {border-style: none;}
div.hidden {border-style: hidden;}
div.mix {border-style: dashed dotted;}

.box {
    padding: 20px;
    width: 90%;
    margin: auto;
    background: #FFFFFF;
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 7%, rgba(161, 247, 28, 1) 43%, rgba(56, 230, 236, 1) 91%);
    background-image: url(""), url("images/backgrounds/fruitigeraero/materialdictionary178_12.jpg");
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    background-position: left 0% top 0%;
    border-style: outset;
    border-color: var(--green);
    border-width: 5px;
}

.nyan {
    background-image: url("images/gifs/nyan.gif");
    background-repeat: repeat;
    background-size: 30%;
}

.box2 {
    padding: 20px;
    width: 90%;
    margin: auto;
    background: #FFFFFF;
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 7%, rgba(161, 247, 28, 1) 43%, rgba(56, 230, 236, 1) 91%);
    background-image: url(""), url("images/backgrounds/fruitigeraero/materialdictionary226_35.jpg");
    background-repeat: repeat, repeat;
    background-position: left 35% bottom 45%;
    background-size: auto, cover;
    border-style: outset;
    border-color: var(--green);
    border-width: 5px;
}

.box3 {
    padding: 0px;
    width: 90%;
    margin: auto;
    background: #FFFFFF;
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 7%, rgba(161, 247, 28, 1) 43%, rgba(56, 230, 236, 1) 91%);
    background-image: url(""), url("images/backgrounds/fruitigeraero/materialdictionary178_198.jpg");
    background-repeat: repeat, repeat;
    background-position: left 35% bottom 45%;
    background-size: auto, cover;
    border-style: outset;
    border-color: var(--green);
    border-width: 5px;
}

.divider {
  
  margin: auto;
  text-align: center;

  /*border: 3px solid var(--pink);*/
  overflow: hidden; /*lol doesnt do anything
  /*background: #FFFFFF;*/
  /*background: linear-gradient(180deg,rgba(255, 255, 255, 1) 7%, rgba(161, 247, 28, 1) 43%, rgba(56, 230, 236, 1) 91%);*/
  /*background-image: url("images/gifs/greenstar.gif"), url("images/backgrounds/fruitigeraero/materialdictionary178_198.jpg");*/
  /*background-repeat: repeat, repeat;*/
}

.headerfooter {
  
  margin: auto;
  text-align: center;
  display: flex;
  /*border: 3px solid var(--pink);*/
  overflow: hidden;

}

.center {
  margin: auto;
  width: 65%;
  /*border: 3px solid var(--blue);*/
  padding: 10px;
  text-align: center;
}

.center2 {
  margin: auto;
  width: 50%;
  /*border: 3px solid var(--blue);*/
  padding: 10px;
  text-align: center;
}

.whitebg {
  width: 70%;
  background-color: var(--white);  
  margin: auto;
}


.whitebg2 {
  background-color: var(--white);  
}

.bluebg {
  width: 70%;
  background-color: var(--blue);  
  margin: auto;
  color: var(--white);
}

.centerleft {
  margin: auto;
  width: 80%;
  /*border: 3px solid var(--green);*/
  padding: 10px;
}

.simpleborderblue {
    border-color: var(--darkgreen);
    border-style: double;
    border-width: 5px;
    background: var(--white);
    background: linear-gradient(167deg,rgba(255, 255, 255, 1) -15%, rgba(161, 247, 28, 1) 55%, rgba(56, 230, 236, 1) 105%);
}

.simpleborderpink {
    border-color: var(--pink);
    border-style: outset;
    border-width: 5px;
    /*background: var(--white);*/
    /*background: linear-gradient(167deg,rgba(255, 255, 255, 1) -15%, rgba(161, 247, 28, 1) 55%, rgba(56, 230, 236, 1) 105%);*/
}

.versebox {
  width: 50%;
  background-color: var(--white);  
  margin: auto;
  border: 5px outset white;
}

body {
  /*padding: 40px;*/
  background: cyan;
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 7%, rgba(161, 247, 28, 1) 43%, rgba(56, 230, 236, 1) 91%);
  background-image: url("images/gifs/greenstar.gif"), url("images/backgrounds/fruitigeraero/materialdictionary178_5.jpg");
  background-repeat: repeat, repeat;
  background-size: 3%, cover;
  font-family: "BIZ UDGothic", "Tw Cen MT", Verdana, Tahoma, sans-serif;
  font-size: 16px;
}

p {
    color: var(--darkgreen);

}

a {
    color: var(--darkblue);
    font-weight: bold;
}

ul {
    color: var(--darkgreen);  
    list-style-image: url('images/gifs/starspin.gif');
    list-style-position: outside;
}

table {
    /*border-collapse: collapse;*/
    width: 100%;
}

.cooltable {
    background: linear-gradient(167deg,rgba(255, 255, 255, 1) -15%, rgba(161, 247, 28, 1) 55%, rgba(56, 230, 236, 1) 105%);
    table-layout: fixed;
    border-style: outset;
    border: 2px solid var(--darkgreen);

}

.cooltable2 {
    border-style: double;
    border: 2px solid var(--darkgreen);
    border-collapse: collapse;
}

.cooltable3 {
  overflow: hidden;
}

th {
  text-align: center;
}

.cooltableth {
    border: 2px solid var(--blue);
    padding: 8px;
}

td {
    text-align: left;
    vertical-align: top;
}

.cooltabletd {
  border: 2px solid var(--darkgreen);
  padding: 8px;
}

.cooltabletd2 {
  padding: 20px;
}
/*tr:nth-child(even) {*/
/*    background-color: var(--white);*/
/*}*/
/*tr:nth-child(odd) {*/
/*    background-color: var(--white);*/
/*}*/

.verticalalign {
    vertical-align: center;
}

h1 {
    color: var(--blue);
    display: block;
}

h2 {
    color: var(--blue);
}
  
h3 {
    color: var(--blue);
}
  
h4 {
    color: var(--blue);
}

h5 {
    color: var(--blue);
}

h6 {
    color: var(--blue);
  }
  
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
}