:root{
    --o: rgba(255,165,0,1);
    --b: rgba(0,0,0,1);
    --w:rgba(255,255,255,1);
    --c:rgba(255,255,255,0);
}
body {
    background-image: url("../orange/background.png");
    background-color:var(--w);
    background-repeat: repeat-x;
    background-position: center top;
}

figure {    
    text-align: center; 
}

figcaption {
    font-size:xx-small    
}

img {
    max-width: 100%;
}
h1 {
    font-family: cursive;
    font-size: xx-large;
    color: var(--w);
    text-transform: uppercase;
    
}

h2 {
    font-size:x-large;
    background-color: var(--o);
    border:var(--o);
    border-width: 10px;
    
}

nav {
    text-align: center;
    margin:auto;
}

fieldset p{
    text-indent: 0%;
  }

p {
    text-indent: 1%;
}

ol,ul,table {
    padding-left: 1%;
    margin-left: 1%
}

table {
    width:100%;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    border:thin dashed var(--o);
    padding: 20%;
}


li:nth-child(even),tr:nth-child(even) {
    background-color: rgba(200,200,200,0.5)
}
li:nth-child(odd),tr:nth-child(odd) {
    background-color: rgba(220, 220, 220,0.5)
}

td{
    border:thin solid var(--b)
}

th{
    border:thin dashed var(--o)
}


/*Insert Start*/

nav a:link {
   font-size: x-large; 
   text-decoration: none;
}



nav {
    text-align: center;
    
}


/*Insert End */

/*Various Fixes Start */
.pa1 {
    font-size:large;
}

.pa3 {
    color: rgba(255,164,0,1)
}
/*Various Fixes End*/

input[type=submit] {
    background-color: var(--o); 
    width: 15%;
    }

input[type=submit]:hover {
        background-color: var(--b); 
        color: var(--o); 
        }

input[type=radio],input[type=checkbox],input[type=submit] {
    cursor: pointer;
    }         

.displayblock label, .displayblock input, .displayblock select,.displayblock textarea{
    display:block
}


/*FlexBox Start */

main {
    display:flex;
    flex-wrap:wrap;
    column-gap: 3%;
}

figure {
    flex: 1 0 100%;
}

section {
    flex: 0 1 100%; 
}

.flextable {
    flex: 0 0 100%
}

nav {
    display: flex;
}

nav a{
    justify-content: center;
    flex-wrap: wrap-reverse;
    flex: 1 1 100%
}

h1 {
    flex: 0 0 100%;
    justify-content: center;
    text-align: center;
}

.form section{
    flex: 0 0 100%;
}


/*FlexBox End */

a {
    color:rgb(17, 85, 204);
    transition: color 200ms ease;
}

a:hover[href$=".php"] {
    color: var(--b);
    text-decoration: underline;
  }

footer {
    text-align: center;
}


.centerfig{
    display: none;
}
.centerfig2{
    display: inline;
    position: absolute;
    left:0%;
    top:-1%;
    animation-name: move2;
    animation-duration: 3s;
    height: auto;  
    transition: all 200ms ease;
}

 @keyframes move2 {
    0%   {left:0%; top:-1%; }
    50%   {left:25%; top:-1%; }
    100%  {left:0%; top:-1%; }
 }

 .centerfig2:hover, .centerfig:hover{
    transform: scale(1.05);
 }

 .comic{
    width:75%;
    height:auto;
 }

h1,h2,h3,p,table,ol,ul{
padding-left:0.25rem;
padding-right:0.25rem;
;
}

.activePage{
    color:var(--b)}