:root {
    --c1: rgb(198, 105, 59);
    --c2: rgb(89,189,212);
    --c3: rgb(193, 30, 149);
    --c4: rgb(219,226,58);
    --b: rgba(0,0,0,1);
    --w:rgba(255,255,255,1);
    --c:rgba(255,255,255,0);
    --l: rgb(17, 85, 204);
    --fontSize: 100%;
    --fontSize2: 200%;
    --fontSize3: 400%;
}

@font-face {
    font-family:Spooky;
    src: url("../resources/fonts/Spooky.ttf");
}

html {
    animation-name: movement, backgroundFade;
    animation-duration: 3000s, 3s;
    animation-iteration-count:infinite, 1;
    animation-timing-function: linear;
    background-image: url("../resources/background/top.png"),url("../resources/background/bottom.png"),url("../resources/background/texture.png"),url("../resources/background/flower.png"),url("../resources/background/flower.png");
    background-color: var(--w);
    background-repeat: repeat-x,repeat-x,repeat,repeat-x,repeat-x;
    background-position: top center,bottom center,0% 0%,top center,bottom center;
    background-size: 0.2%,0.2%,25%,4%,4%;
    min-height: 100%;   
}


@keyframes movement {
    0% {background-position: top center, bottom center, 0% 0%, 0% top, 0% bottom ;}
    100% {background-position: top center, bottom center, 0% 2000%, 1200% 0%, -1200% bottom;}
}

@keyframes backgroundFade {
    0% {background-color: var(--c4);}
    100% {background-color: var(--c);}
}


h3 {
    animation-name: h3Fade;
    animation-duration: 2s;
    animation-timing-function: linear;
    font-size: var(--fontSize2)
;
    background-color: var(--c2);
    border:var(--c1);
    border-width: 10px;
    text-align: center;
    color: var(--c4);
    font-family: spooky, fantasy;
    padding: 0.25%;
}

h3, nav > a, footer > a{
    border-radius:12px;
}

body {
    margin: 0 36px;
}
@keyframes h3Fade {
    0% {background-color: var(--c4); color: var(--c2);}
    100% {background-color: var(--c2); color: var(--c4);}
}

h2 {
    animation-name: h2Fade;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    color: var(--c3);
    font-size: var(--fontSize2)
;
    font-family: spooky, fantasy;
    text-align: center;  
    margin-top: 0%;
}


@keyframes h2Fade {
    0% {color: var(--c); font-size: 0%;}
    50% {color: var(--c1);}
    100% {color: var(--c3); font-size: 200%;}
  }

h1 {
    animation-name: h1Fade;
    animation-duration: 1s;
    animation-timing-function: linear;
    color: var(--c3);
    font-size:400%;
    font-family: spooky, fantasy;
    margin-bottom: 0%;
}


@keyframes h1Fade {
    0% {color: var(--c); font-size: 0%;}
    50% {color: var(--c1);}
    100% {color: var(--c3); font-size: 400%;}
  }

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

p, h4, th, td, pre, ul, li {
    text-align: justify;
    font-family: Arial;
    font-size: var(--fontSize)
}

figcaption {
    font-size:xx-small    
}


nav {
    text-align: center;
}


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

table {
    width:100%;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    padding: 20%;
}

td {
    animation-name: wireFade;
    animation-duration: 2s;
    animation-timing-function: linear;
    border:thick solid var(--c2);
    padding: 1%;
}

@keyframes wireFade {
    0% {border:thick solid var(--c4);}
    100% {border:thick solid var(--c2);}
}

.pa1 {
    font-size:large;
}

.pa3 {
    color: var(--c2)
}

input[type=submit] {
    background-color: var(--c); 
    color: var(--l); 
    }

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

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

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

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

figure {
    flex: 1 0 100%;
}

section {
    flex: 1 1 48%; 
}

.flexWide {
    flex: 1 1 100%
}

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

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

label[for*="txt"] {
    display:block;
}

fieldset p{
    text-indent: 0;
  }

a {
    color:var(--l);
    transition: color 200ms ease;
}

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

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

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

nav a {
    animation-name: h3Fade2;
    animation-duration: 2s;
    animation-timing-function: linear;
    font-size: var(--fontSize2)
;
    background-color: var(--c2);
    border:var(--c1);
    text-align: center;
    font-family: spooky, fantasy;
    flex: 1 1 20%;
    padding: 0.25%;

}

footer a {
    animation-name: h3Fade2;
    animation-duration: 2s;
    animation-timing-function: linear;
    font-size: var(--fontSize2)
;
    background-color: var(--c2);
    border:var(--c1);
    border-width: 10px;
    text-align: center;
    font-family: spooky, fantasy;
    display:block;
    padding: 0.25%;
    margin-top: 2%;
}

@keyframes h3Fade2 {
    0% {background-color: var(--c4);}
    100% {background-color: var(--c2);}
}

fieldset {
    animation-name: wireFade;
    animation-duration: 2s;
    animation-timing-function: linear;
    border-width: thick;
    font-family: arial;
    font-size: var(--fontSize);
    border-style: solid;
    border-color: var(--c2);
}

footer{
    margin-bottom: 5%;
}


h4 {
    font-size: var(--fontSize2)
;
    text-align: center;
}

.flexList section {
    display: flex;
    flex-wrap:wrap;
    border:thick solid var(--c2);
    margin-bottom: 1em;
    

}

.flexList section h4 {
    flex: 0 0 100%;
}

.flexList section figure {
    flex: 0 0 20%;
    margin: auto;
    border-width: 0px;

}

.flexList section p {
    flex:1 0 70%;
    padding: 2%;
    vertical-align:middle;
    margin-top: 0px;

}

.flexList h4 {
    margin: 0px
}

.flexList img {
    width:256px;
    display:block;
}

ul, li{
    padding: 1%;
}