/* variables */
:root{
    --dark-purble: rgb(64, 25, 77);
    --transparent-dark-purble: rgba(64, 25, 77, .5);
    --purble: rgb(131, 22, 194);
    --light-transparent-purble: rgba(253, 204, 255, 0.692);
    --light-purble: rgb(253, 204, 255);
    --pink: rgb(248, 95, 253);
    --transparent-pink: rgba(248, 95, 253, 0.5);
    padding-bottom: 40vh;
    margin-bottom: 40vh;
}

@font-face {
    font-family: Rainbow_BoldItalic;
    src: url(/fonts/Web_Open_Font_Format/Rainbow2000-BoldItalic.woff);
}

@font-face {
    font-family: Rainbow_Bold;
    src: url(/fonts/Web_Open_Font_Format/Rainbow2000-Bold.woff);
}

@font-face {
    font-family: Cheese;
    src: url(/fonts/Web_Open_Font_Format/FreeCheese-Regular.woff);
}

@font-face {
    font-family: Funnytype;
    src: url(/fonts/TrueType/funnytype.ttf);
}

@font-face {
    font-family: Chicago;
    src: url(/fonts/TrueType/Chango-Regular.ttf)
}

/* Body */

body{
    background-color: black;
    background-image: url(/img/rgb_noise_opacity_at_25.png);
    position: relative;
}

body section{
    margin: 8px;
}

body main{
    position: relative;
    background-color: var(--purble);
    background-image: url("/img/rgb_noise_opacity_at_25.png");
    background-blend-mode: difference;
    margin: 3px;
    border: 5px solid;
    padding: 25px;
    border-color:darkslateblue;
    width: 75%;
    left: 20%;
    top: 32.5vh;
    padding-bottom: 10vh;
}

body h1, body h2, body h3, body h4, body h5 {
    color: var(--light-purble);
    font-family: Chicago;
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: var(--pink);
    font-size: 32px;
    padding-left: 5%;
    padding-right: 5%;
}

body h2 {
    font-size: 24px;
}

body h3 {
    font-size: 18px;
}

body legend{
    color:antiquewhite;
    font-family: Calibri, 'Trebuchet MS', sans-serif;
    font-size: 12px;
    -webkit-text-stroke-width: .25px;
    -webkit-text-stroke-color: var(--pink);
}

body main a, body main a:link, body main a:visited{
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:var(--pink);
    color:var(--light-purble);
    text-decoration: none;
}

body p, body label, body li{
    color: var(--light-purble);
    font-family: Funnytype;
    padding-left: 5%;
    padding-right: 5%;
}

body p, body label{
    font-size: 13;
}

body fieldset{
    border-color:var(--pink);
    background-color: var(--dark-purble);
}

body .visualElement{
    position: relative;
    left: 3.5%;
    border: 4px solid;
    width: 90%;
    margin: 3px;
    border-color: var(--light-transparent-purble);
    background-color: var(--light-purble);
    box-sizing: border-box;
}

body .insideNav a{
    transition-property: scale ;
    transition-duration: .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10%;
}

body .insideNav{
    position: absolute;
    top: 36vh;
    left: 1.25%;
    margin: 3px;
    width: 17.5%;
    display: flex;
    flex-direction: column;
    background-color: var(--transparent-pink);
    background-image: url(/img/rgb_noise_opacity_at_25.png);
    font-family: Funnytype;
    border: 5px solid;
    border-color:blueviolet;
    box-sizing: border-box;
}

body .insideNav a:link, body .insideNav a:visited{
    -webkit-text-stroke-width: 0px;
    color: var(--dark-purble);
    background-color: var(--light-purble);
    margin: 20px;
    padding: 3px;
    border: 4%;
    border-color: var(--transparent-pink);
    border-style:ridge;
    border-radius: 3px;
    box-sizing: border-box;
    overflow: auto;
}

body .insideNav a:hover{
    background-color:var(--light-purble);
    color: var(--purble);
    border-color: var(--dark-purble);
    scale: 1.05;
    transition-duration: .2s;
}

body button {
    border-color: solid aqua;
    border: 3px;
    border-radius: 3px;
    background-color: blueviolet;
    color: pink;
}