@charset "utf-8";

/* ++++++++++++++++  BEGIN CUSTOM CSS   ++++++++++++++  */

/* HTML ELEMENT SETTINGS */

/* Select */
* {box-sizing: border-box;}

a {display: inline-block; text-decoration: none;}
a:hover {text-decoration: none;}

.bg-sky {
    background-image: url("/images/In-The-Clouds.jpg");
    background-attachment:fixed;
    background-position:center top;
    background-repeat:repeat;
}

html {
    position:relative;
    display: table;
    background-color: rgba(255, 255, 255, 1);
    background-image: url("/images/In-The-Clouds.jpg");
    background-attachment:fixed;
    background-position:center top;
    background-repeat:repeat;
    height:100vh;
    min-height:100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 17px;
    color: slategray;
    overflow: auto;
    clear: both;
    content: "";
    display: table;
    scroll-behavior: smooth;
}

body {
    background: 0;
    background-color: rgba(255, 255, 255, 0.33);
    height:auto;
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0;
    overflow: auto;
}

scroll::after {
    display: block;
    content: "";
    height: auto;
    clear: both;
    overflow: auto;
}

scroll-cover {
    background-color: rgba(255, 255, 255, 0.0);
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .1));
    display: block;
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
    clear: both;
    content: "";
    overflow: hidden;
}


sol {
    position: relative;
    background: 0;
    background-color: rgba(255, 255, 255, 0.0);
    width: 100%;
    max-width: 1200px;
    height:auto;
    padding: 0px 0px;
    margin: 0px auto;
    text-align: center;
    clear: both;
    content: "";
    display: block;
    overflow: visible;
}

in-sol, .in-sol {
    position: relative;
    background: 0;
    background-color: rgba(255, 255, 255, 0.0);
    width: 100%;
    max-width: 1200px;
    height:auto;
    padding: 0px 0px;
    margin: 0px auto;
    text-align: center;
    clear: both;
    content: "";
    display: block;
    overflow: hidden;
}

block {
    display: block;
    padding: 0px 0px;
    margin: 0px 0px;
    width: 100%;
    min-width: 100px;
    height:auto;
    overflow: auto;
}

box {
    padding: 0px 0px;
    margin: 0px 0px;
    width: 100%;
    min-width: 100px;
    height:auto;
    overflow: auto;
}

cell {
    padding: 0px 0px;
    margin: 0px 0px;
    width: 100%;
    height:auto;
    text-align: center;
    overflow: auto;
}

cell > a, left-brain > a, crown > a {
    color: white;
}
cell > a:hover, left-brain > a:hover, crown > a:hover {    
    text-shadow: 0px 4px 3px silver, 0px 3px 3px silver, 0px 2px 7px silver, 0px -3px 3px goldenrod, 0px -7px 17px goldenrod;
}

left {
    display: inline-block;
    float: left;
    padding: 0px;
    width: auto;
    height:auto;
    text-align: left;
    overflow: visible;
}

four, .four {
    text-shadow: 0px 0px 1px goldenrod, 0px 0px 5px goldenrod, 6px 8px 2px #007aba, -6px -8px 2px #880808, 0px 0px 7px goldenrod, 0px 0px 11px goldenrod;font-size: 1.1rem; color: white;font-weight: 600;
}
mddle {
    display: inline-block;
    padding: 0px;
    width: auto;
    height:auto;
    text-align: center;
    overflow: visible;
}

right {   
    display: inline-block;
    float: right;
    padding: 0px;
    width: auto;
    height:auto;
    text-align: right;
    overflow: visible;
}

ul,ol,dl,p {
  font-size: 1.1rem;
    text-align: justify;
}

li,p {
    line-height: 1.5;
    color: slategray;
}

/* Description list styles */

dd,dt {
  line-height: 1.5;
}

dt {
  font-weight: 600;
}

h-i {
    display: block;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 2.2rem;
    font-weight: 500;
    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;
    text-align: center;
    color: white;
    width: 100%;
    margin: 0rem 0rem 2.17rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
}
h-ii {}
h-iii {}
h-00 {}
h1 {
    display: block;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 3rem;
    font-weight: 600;
    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;
    text-align: center;
    color: white;
    width: 100%;
    margin: 2.2rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    content: "";
    display: block;
    clear: both;
}
h2 {
    display: block;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 2.5rem;
    font-weight: 600;
    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;
    text-align: center;
    color: white;
    width: 100%;
    margin: 2.2rem 0rem 1.44rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
}

.no-veil {
    background-image: url("/images/In-The-Clouds.jpg");
    background-attachment:fixed;
    background-position:center top;
    background-repeat:repeat;
    display: inline-block;
    font-weight: 700;
    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;
    text-align: center;
    color: white;
    width: 100%;
    max-width: 80%;
    height: auto;
    margin: 1rem 0rem 1rem 0rem;
    padding: 1em 1em;
    border-bottom-left-radius: 3em 100%;
    border-bottom-right-radius: 3em 100%;
    border-top-left-radius: 3em 100%;
    border-top-right-radius: 3em 100%;
    border: 1px solid rgba(255,255,255, .77);
    box-shadow: inset 0px 0px 17px 7px rgba(255,255,255, .77), 0px 0px 17px 3px rgba(155,155,155, .33);
}

h3 {
    display: block;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 2.0rem;

    font-weight: 500;

    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;

    text-align: left;

    color: white;

    width: 100%;

    margin: 1.44rem 0rem 1.44rem 0rem;

    padding: 0rem 0rem 0rem 0rem;

}

h3-center {

    display: block;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    font-size: 2.0rem;

    font-weight: 500;

    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;

    text-align: center;

    color: white;

    width: 100%;

    margin: 1.44rem 0rem 1.44rem 0rem;

    padding: 0rem 0rem 0rem 0rem;

}

h4 {

    display: block;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    font-size: 1.5rem;

    font-weight: 500;

    text-align: justify;

    color: slategray;

    width: 100%;

    margin: .11rem 0rem .33rem 0rem;

    padding: 0rem 0rem 0rem 0rem;

}

h4-center {

    display: block;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    font-size: 1.5rem;

    font-weight: 500;

    text-align: center;

    color: slategray;

    width: 100%;

    margin: .11rem 0rem 1.33rem 0rem;

    padding: 0rem 0rem 0rem 0rem;

}

leader {

    font-size: 1.1em;

    font-weight: 600;

    line-height: 1.5em;

    text-align: justify;

}



.editing {background-color: cornflowerblue; color: white; padding: 17px;font-size: 1.2rem;}



.alert {background-color: lightgoldenrodyellow; padding: 17px;}



h5 {

    display: block;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    font-size: 1.25rem;

    font-weight: 500;

    text-align: center;

    color: slategray;

    width: 90%;

    margin: .33rem 5% 1.7rem 5%;

    padding: 0rem 0rem 0rem 0rem;

}



h5-left {

    display: block;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    font-size: 1.25rem;

    font-weight: 500;

    text-align: justify;

    color: slategray;

    width: 100%;

    margin: .33rem auto 1.7rem auto;

    padding: 0rem 0rem 0rem 0rem;

}

h6 {

    display: block;

    font-size: 1.1rem;

    font-weight: 500;

    text-align: justify;

    color: slategray;

    width: 90%;

    margin: .33rem 5% 1.7rem 5%;

    padding: 0rem 0rem 0rem 0rem;

}



h7 {

    display: block;

    font-size: 1rem;

    font-weight: 500;

    text-align: center;

    color: slategray;

    width: 90%;

    margin: .33rem 5% 1.7rem 5%;

    padding: 0rem 0rem 0rem 0rem;

}

h8 {

    display: block;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    font-size: .9rem;

    font-weight: 500;

    text-align: center;

    color: slategray;

    width: 90%;

    margin: .33rem 5% 1.7rem 5%;

    padding: 0rem 0rem 0rem 0rem;

}

h100 {

    display: block;

    font-size: .33rem;

    margin-top: 3.33rem;

    margin-bottom: 3.33rem;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

}

hI {

    display: block;

    font-size: 33px;

    margin-top: 11px;

    margin-bottom: 11px;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

}

hII {

    display: block;

    font-size: 77px;

    margin-top: 17px;

    margin-bottom: 17px;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

}

hIII {

    display: block;

    font-size: 144px;

    margin-top: 33px;

    margin-bottom: 33px;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

}

hX {

    display: block;

    font-size: 333px;

    margin-top: 88px;

    margin-bottom: 88px;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

}

hInfinity {

    display: block;

    font-size: 78%;

    margin-top: 11%;

    margin-bottom: 11%;

    margin-left: 0;

    margin-right: 0;

    font-weight: bold;

    background-color:DodgerBlue;

    text-align: center;

}



welcome-h1 {

    padding: 7px 0px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 2rem;

    font-weight: 600;

    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;

    text-align: center;

    color: white;

    width: 100%;

    margin: 0px auto;

    content: "";

    display: block;

    clear: both;

}



welcome-h2 {

    padding: 7px 17px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 1.7rem;

    font-weight: 600;

    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;

    text-align: center;

    color: white;

    width: 100%;

    margin: 0px auto;

    content: "";

    display: block;

    clear: both;

}



welcome-h2-l {

    padding: 7px 17px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 1.7rem;

    font-weight: 600;

    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;

    text-align: left;

    color: ghostwhite;

    width: 100%;

    margin: 0px auto;

    content: "";

    display: block;

    clear: both;

}



welcome-h3 {

    padding: 7px 17px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 1.25rem;

    font-weight: 500;

    text-shadow: 0px 0px 7px white;

    text-align: left;

    color: #007aba;

    width: 100%;

    margin: 0px auto;

    content: "";

    display: block;

    clear: both;

}



welcome-p {

    padding: 7px 17px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 1.07rem;

    font-weight: 500;

    text-shadow: 0px 0px 2px white;

    text-align: left;

    text-indent: 33px;

    color: goldenrod;

    width: 100%;

    margin: 0px auto;

    content: "";

    display: block;

    clear: both;

}



music-box {

    position: relative;

    background-color: rgba(225, 225, 225, 0.55);

    width: 100%;

    height:auto;

    padding: 7px 0% 7px 0%;

    margin: 0px auto;

    text-align: left;

    border-bottom-right-radius: 30% 100%;

    border-top-right-radius: 30% 100%;

    box-shadow: inset 0px 0px 17px 3px rgba(255,255,255, .77);

    border: 0px solid silver;

    clear: both;

    content: "";

    display: table;

    overflow: hidden;

}

music-box.describe {

    position: relative;

    float: left;

    background-color: rgba(120,255,120, 0.0);

    background-image: linear-gradient(rgba(120,255,120, 0.33),rgba(255,255,255, 0.77), transparent);

    width: 57%;

    min-width: 300px;

    height: auto;

    padding: 21px 33px 21px 33px;

    margin: 0px 0% 0px 0%;

    text-align: justify;

    border-bottom-right-radius: 50% 100%;

    border-top-right-radius: 50% 100%;

    box-shadow: inset -7px 0px 17px 3px rgba(255, 255, 255, .77);

    clear: none;

    content: "";

    display: inline;

    overflow: hidden;

}



music-box.describe.goldenrod {

    background-image: linear-gradient(rgba(218,165,32, 0.33),rgba(255,255,255, 0.77), transparent);

}



music-box.player {

    position: relative;

    float: right;

    background-color: rgba(220,220,220, 0.0);

    width: 40%;

    min-width: 300px;

    height: auto;

    padding: 33px 3rem 33px 17px;

    margin: 0px 3% 0px 0%;

    text-align: justify;

    border-bottom-left-radius: 0%;

    border-bottom-right-radius: 0%;

    border-top-left-radius: 0%;

    border-top-right-radius: 0%;

    border: 0px solid silver;

    border-right: 0;

    box-shadow: none;

    clear: none;

    content: "";

    display: inline;

    overflow: hidden;

}



audio {

    text-align: center;

    width: 70%;

    margin: 0% 15%;

}



music-box.player.goldenrod > h7 > a, music-box.describe.goldenrod > h6 > a:hover, music-box.describe.goldenrod > h7 > a:hover, h-timer {

    font-size: 1.1rem;font-weight: 700; color: white; text-shadow: 0px 0px 2px #880808, 0px 0px 5px  lightgray, 0px 0px 6px  white, 0px 0px 7px  white}

music-box.player.goldenrod > h7 > a:hover, music-box.describe.goldenrod > h6 > a , music-box.describe.goldenrod > h7 > a {

    font-size: 1.1rem;font-weight: 700; text-decoration: none; color: white; text-shadow: 0px 0px 1px black, 0px 0px 3px  #880808, 0px 0px 5px  #880808, 0px 0px 7px  white}

h-timer {font-size: 1.3rem;}

music-box.player > h7 > a, music-box.describe > h6 > a:hover {

    font-size: 1.1rem;font-weight: 700; color: green; text-shadow: 0px 0px 2px limegreen, 0px 0px 5px  lightgray, 0px 0px 6px  white, 0px 0px 7px  white}

music-box.player > h7 > a:hover, music-box.describe > h6 > a, h-timer-2 {

    font-size: 1.1rem;font-weight: 700; text-decoration: none; color: white; text-shadow: 0px 0px 1px black, 0px 0px 3px  limegreen, 0px 0px 5px  green, 0px 0px 7px  white}

h-timer-2 {font-size: 1.3rem;}



.p-green {font-weight: 700; text-decoration: none; color: white; text-shadow: 0px 0px 1px black, 0px 0px 3px  limegreen, 0px 0px 5px  green, 0px 0px 7px  white; font-size: 1.5em;}



.p-red {font-weight: 700; text-decoration: none; color: white; text-shadow: 0px 0px 1px black, 0px 0px 3px  #880808, 0px 0px 5px  #880808, 0px 0px 7px  white; font-size: 1.5em;}





orb-sky {

    position: relative;

    display: inline-block;

    background-color: rgba(225, 225, 225, 0.33);    

    background-image: url("/images/In-The-Clouds.jpg");

    background-attachment:fixed;

    background-position:center top;

    background-repeat:repeat;

    width: auto;

    height: auto;

    aspect-ratio: 1/1;

    padding: 1%;

    margin: 1%;

    text-align: center;

    border-bottom-right-radius: 100%;

    border-top-right-radius: 100%;

    border-bottom-left-radius: 100%;

    border-top-left-radius: 100%;

    box-shadow: inset 0px 0px 17px 7px rgba(255,255,255, .77), 0px 0px 17px 3px rgba(155,155,155, .33);

    border: 1px solid rgba(255,255,255, .77);  

}

orb-matrix {

    position: relative;

    display: inline-block;

    background-color: rgba(225, 225, 225, 0.33);    

    background-image: url("/images/matrix.gif");

    background-attachment:fixed;

    background-position:center top;

    background-repeat:repeat;

    width: auto;

    height: auto;

    aspect-ratio: 1/1;

    padding: 1%;

    margin: 1%;

    text-align: center;

    border-bottom-right-radius: 100%;

    border-top-right-radius: 100%;

    border-bottom-left-radius: 100%;

    border-top-left-radius: 100%;

    box-shadow: inset 0px 0px 17px 7px rgba(255,255,255, .77), 0px 0px 17px 3px rgba(155,155,155, .33);

    border: 1px solid rgba(255,255,255, .77);  

}

.orb-fish-left {float: left; width: 111px; height: auto;}

.orb-fish-right {float: right; width: 111px; height: auto;}



foot-left > h1 {

    padding: 7px 0px;

    margin: 7px 0px 3px 0px;

    font-size: 2.7rem;

}

foot-left > h2 {

    padding: 3px 0px;

    margin: 3px 0px;

    font-size: 2.1rem;

}

foot-left > h3 {

    padding: 3px 0px 3px 0px;

    margin: 3px 0px 3px 0px;

    font-size: 1.7rem;

    text-align: center;

}

/* ------------- HEADER --------------- */



head-band {

    background-image: linear-gradient(rgba(255, 255, 255, 1));

    position: fixed;

    width: 100%;

    height:auto;

    padding: 0px;

    color: #007aba;

    text-align: center;

    border-bottom: white solid 0px;

    border-bottom-left-radius: 7px;

    border-bottom-right-radius: 7px;

    box-shadow: inset 0px -4px 3px 0px indigo, inset 0px -7px 11px 0px goldenrod, 0px 0px 11px 0px #880808, 0px 3px 33px 0px goldenrod, 0px 33px 33px 0px white;

    content: "";

    display: block;

    clear: both;

    z-index: 998;

}



head-wrap {

    background-image: linear-gradient(rgba(255, 255, 255, 1));

    position: fixed;

    width: 100%;

    height:auto;

    padding: 0px;

    color: #007aba;

    text-align: center;

    border-bottom: white solid 0px;

    border-bottom-left-radius: 7px;

    border-bottom-right-radius: 7px;

    box-shadow: inset 0px -4px 3px 0px indigo, inset 0px -7px 11px 0px goldenrod, 0px 0px 11px 0px #880808, 0px 3px 33px 0px goldenrod, 0px 33px 33px 0px white;

    content: "";

    display: table;

    clear: both;

    z-index: 990;

}



brain-veil {

    background-color: rgba(255, 255, 255, 0.0);

    display: block;

    width: 100%;

    height: auto;

    padding: 0px;

    margin: auto;

    content: "";

    display: table;

    clear: both;

}



smokey-mirror {

    background-color: rgba(55, 55, 55, 0.55);

    display: block;

    width: 100%;

    height: auto;

    padding: 0px;

    margin: auto;

    content: "";

    display: table;

    clear: both;

}



hero-wrap {

    background-color: rgba(255, 255, 255, 0.10);

    display: table;

    width: 100%;

    height: auto;

    padding: 0px;

    margin: 0px;

    text-align: center;

    content: "";

    clear: both;

    overflow: hidden;

}



hero-sol {

    background-color: rgba(255, 255, 255, 0.10);

    display: table;

    width: 100%;

    max-width: 1200px;

    height: auto;

    padding: 0px;

    margin: 0px auto;

    border: 0px silver solid;

    text-align: center;

    content: "";

    clear: both;

    overflow: hidden;

}



hero-cover {

    background-color: rgba(255, 255, 255, .10);

    background-image: url("https://www.istand.world/images/istand-robe1.png");

    background-attachment:local;

    background-position:center bottom;

    background-repeat:no-repeat;

    background-size: 33%;

    display: table;

    width: 100%;

    height: 420px;

    margin: 0px auto;

    font-size: 19px;

    font-weight: 400;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    padding: 0px 0px;

    text-align: center;

    color: white;

    overflow: hidden;

}



hero-cover.share {

    background-color: rgba(255, 255, 255, .0);

    background-image: url("https://www.istand.world/images/share-1.png");

    background-position:center center;

    background-size: contain;

    height: 333px;

}



hero-cover.donate {

    background-color: rgba(255, 255, 255, .0);

    background-image: url("https://www.istand.world/images/donate-1.png");

    background-position:center center;

    background-size: contain;

    height: 333px;

}



hero-cover.privacy {

    background-color: rgba(255, 255, 255, .0);

    background-image: none;

    background-position:center center;

    background-size: cover;

    height: 333px;

}



hero-cover.terms {

    background-color: rgba(255, 255, 255, .0);

    background-image: url("https://www.istand.world/images/twisted-pine.jpg");

    background-position:center center;

    background-size: cover;

    height: 333px;

}



hero-cover.returns {

    background-color: rgba(255, 255, 255, .0);

    background-image: url("https://www.istand.world/images/twisted-pine.jpg");

    background-position:center center;

    background-size: cover;

    height: 333px;

}



legal-menu {

    background-color: rgba(255, 255, 255, .0);

    display: inline-block;

    width: 100%;

    height: auto;

    margin: 0px 0px;

    padding: 1rem 0px;

    font-size: 1.4rem;

    font-weight: 500;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    text-align: center;

    color: white;

    text-shadow: 0px 0px 2px black, 0px 0px 3px slategray;

    border-bottom: 2px solid #FDE08D;

    border-top: 2px solid #FDE08D;

    overflow: hidden;    

}



legal-menu > a:hover, legal-menu > a.current-page:hover {

    background-color: rgba(55, 55, 255, .11);

    color: white;

    text-shadow: 0px 0px 1px slategray, 1px 2px 2px goldenrod, 0px 2px 3px goldenrod, 1px 1px 2px slategray, -1px -1px 3px slategray, 0px 0px 4px #FDE08D;

    border-bottom: 3px solid #FDE08D;

    border-top: 3px solid #FDE08D;    

}



legal-menu > a {

    background-color: rgba(055, 155, 155, .44);

    width: auto;

    height: auto;

    margin: 0px 1%;

    padding: .4rem 2rem .6rem 2rem;

    text-align: center;

    color: white;

    text-shadow: 1px 1px 2px gray, 0px 2px 3px slategray, -1px -1px 2px slategray;

    border-bottom: 3px solid #FDE08D;

    border-top: 3px solid #FDE08D;

    box-shadow: inset 0px 0px 7px 3px ghostwhite, 0px 0px 7px 3px ghostwhite;

    overflow: hidden;    

}



legal-menu > a.current-page {

    background-color: rgba(255, 155, 255, .55);

    color: white;

    text-shadow: 1px 2px 2px gray, 0px 2px 3px slategray, -1px -1px 2px slategray;

    border-bottom: 3px solid #FDE08D;

    border-top: 3px solid #FDE08D;

    box-shadow: inset 0px 0px 7px 3px ghostwhite, 0px 0px 7px 3px ghostwhite;

}



hero-title {

    background-color: rgba(255, 255, 255, .0);

    position: relative;

    top: 0px;

    background-image: linear-gradient(rgba(255, 255, 255, .0), rgba(255, 255, 255, .0), rgba(255, 255, 255, .0));

    display: grid;

    place-items: center;

    width: 100%;

    height: 20%;

    margin: 17px auto 0px auto;

    padding: 17px 0px 0px 0px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 2.5rem;

    font-weight: 600;

    text-shadow: 0px 0px 3px goldenrod, 2px -1px 3px goldenrod, -3px 2px 2px #007aba, 2px 2px 3px #FDE08D, 0px 0px 4px #007aba, 0px 0px 7px slategray, 0px 0px 17px slategray, 0px 0px 21px ghostwhite;

    border-bottom: 0px solid silver;

    text-align: center;

    color: white;

    overflow: hidden;

}



hero-body {

    background-color: rgba(255, 255, 255, .0);

    position: relative;

    top: 20%;

    display: grid;

    place-items: center;

    width: 100%;

    height: 60%;

    margin: 0px auto 0px auto;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 2.1rem;

    font-weight: 600;

    text-shadow: 0px 0px 3px goldenrod, 2px -1px 3px goldenrod, -3px 2px 2px #007aba, 2px 2px 3px #FDE08D, 0px 0px 4px #007aba, 0px 0px 7px slategray, 0px 0px 17px slategray, 0px 0px 21px ghostwhite;

    text-align: center;

    color: white;

    overflow: hidden;

}



hero-caption {

    background-color: rgba(255, 255, 255, .0);

    position: absolute;

    bottom: 0px;

    background-image: linear-gradient(rgba(255, 255, 255, .0), rgba(255, 255, 255, .0), rgba(255, 255, 255, 0));

    display: grid;

    place-items: center;

    width: 100%;

    height: auto;

    margin: 0px auto 0px auto;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 2.7rem;

    font-weight: 600;

    text-shadow: 0px 0px 3px goldenrod, 2px 1px 3px goldenrod, -3px -2px 2px #007aba, 2px -2px 3px #FDE08D, 0px 0px 4px #007aba, 0px 0px 7px slategray, 0px 0px 17px slategray, 0px 0px 21px ghostwhite;

    padding: 0px 0px 7px 0px;

    border-top: 0px solid #FDE08D;

    text-align: center;

    color: white;

    overflow: hidden;

}



color-top {

    background-color: transparent;

    background-image: linear-gradient(rgba(255, 255, 255, 1) 3px, #fbf5b7 2.75rem, #FDE08D 5.5rem, rgba(255, 255, 255, 1) 9.0rem, rgba(255, 255, 255, .77) 20.83rem, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .17) 88%, transparent);

    display: block;

    width: 100%;

    height: auto;

    min-height: 20px;

    margin: 0px auto 0px auto;

    padding: 0px 0px;

    text-align: justify;

    color: white;

    content: "";

    clear: both;

    overflow: hidden;

}



color-top.gold {

    background-image: linear-gradient(#fbf5b7 3.3rem, #FDE08D 7.5rem, #fbf5b7 11rem, rgba(255, 255, 255, 1) 21.0rem, rgba(255, 255, 255, .77) 33rem, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .17) 88%, transparent);}



color-top.silver {

    background-image: linear-gradient(rgba(255, 255, 255, 1) 3.3rem, slategray 7.5rem, silver 11rem, rgba(255, 255, 255, 1) 21.0rem, rgba(255, 255, 255, .77) 33rem, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .17) 88%, transparent);}



color-top.indigo {

    background-image: linear-gradient(rgba(136,8,8, .88) 3.3rem, indigo 7.5rem, indigo 11rem, rgba(255, 255, 255, 1) 21.0rem, rgba(255, 255, 255, .77) 33rem, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .17) 88%, transparent);}

color-top.violet {

    background-image: linear-gradient(#fbf5b7 3.3rem, violet 7.5rem, blue 11rem, rgba(255, 255, 255, 1) 21.0rem, rgba(255, 255, 255, .77) 33rem, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .17) 88%, transparent);}



color-top.red {

    background-image: linear-gradient(rgba(10,10,10, .77) 3.3rem, red 7.5rem, blue 11rem, rgba(255, 255, 255, 1) 21.0rem, rgba(255, 255, 255, .77) 33rem, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .17) 88%, transparent);}



color-top.orange {

    background-image: linear-gradient(#fbf5b7 3.3rem, orange 7.5rem, blue 11rem, rgba(255, 255, 255, 1) 21.0rem, rgba(255, 255, 255, .77) 33rem, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .17) 88%, transparent);}



color-top.green {

    background-image: linear-gradient(rgba(136,8,8, .88) 3.3rem, green 7.5rem, blue 11rem, rgba(255, 255, 255, 1) 21.0rem, rgba(255, 255, 255, .77) 33rem, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .17) 88%, transparent);}

color-top.blue {

    background-image: linear-gradient(#fbf5b7 3.3rem, violet 7.5rem, blue 11rem, rgba(255, 255, 255, 1) 21.0rem, rgba(255, 255, 255, .77) 33rem, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .17) 88%, transparent);}



hero-card {

    position: relative;

    background-image: linear-gradient(rgba(255, 255, 255, .33) 10%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1));

    display: block;

    width: 100%;

    max-width: 1200px;

    height: auto;

    margin: 0px auto 33px auto;

    padding: .7rem .7rem 2.7rem .7rem;

    background-color: rgba(255, 255, 255, .0);

    border-top: goldenrod solid 0px;

    box-shadow: inset 0px 0px 33px 17px rgba(255, 255, 255, .55), 0px 0px 13px 3px rgba(170, 170, 170, .55);

    text-align: justify;

    color: slategray;

    overflow: hidden;

    z-index: 990;

    content: "";

    clear: both;

}



hero-picture {

    position: relative;

    display: block;

    background-color: rgba(255, 255, 255, 0);

    background-image: url("/images/boat-salute.jpg");

    background-attachment:local;

    background-position:center top;

    background-repeat:no-repeat;

    background-size: cover;

    margin-top: 17px;

    width: 100%;

    height: auto;

    aspect-ratio: 117/77;

    border-bottom-left-radius: 2rem 3rem;

    border-bottom-right-radius: 2rem 2rem;

    border-top-left-radius: 77% 100%;

    border-top-right-radius: 2rem;

    border: 2px solid goldenrod;

    border-right: 0;

    box-shadow: inset 13px 0px 17px 3px rgba(70, 70, 70, .77), inset 15px 0px 19px 3px rgba(70, 180, 110, .33),  inset 27px 0px 33px 3px rgba(170, 170, 0, .33);

    padding: 0px 0px 0px 0px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 2.1rem;

    font-weight: 600;

    color: #007aba;

    text-shadow: 0px 0px 3px white, 0px 0px 7px white, 0px 0px 11px goldenrod, 0px 0px 21px silver, 0px 0px 27px slategray;

    text-align: center;

}



/* from W3Schools - EDIT!



.hero-image {

  background-image: url("/w3images/photographer.jpg");

  background-color: #cccccc;

  height: 500px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

}



.hero-text {

  text-align: center;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: white;

}

*/



hero-text1 {

    color: #007aba;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    text-align: center;

    position: absolute;

    font-size: 3.3rem;

    font-weight: 700;

    top:60%;

    right: 10%;

}

hero-text2 {

    color: goldenrod;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    text-align: center;

    position: absolute;

    font-size: 4.0rem;

    font-weight: 700;

    top:7%;

    right: 2.7%;

}

hero-text3 {

    color: white;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    text-align: center;

    position: absolute;

    font-size: 3.2rem;

    font-weight: 700;

    top:77%;

    left: 3%;

}

    

hero-skin {

    display: block;

    background-color: rgba(255, 255, 255, 0);

    background-image: 0;

    width: 100%;

    height: auto;

    margin: 0px 0% 0px 0%;

    padding: 0px 5%;

}

article > article-right > trump-shaft {

    display: block;

    float: right;

    background-color: rgba(255, 255, 255, .44);

    background-image: linear-gradient(rgba(255, 217, 0, .55), white, white, rgba(255, 217, 0, .44));

    width: 100%;

    height: auto;

    min-height: 33px;
    border-bottom-left-radius: 17px 50%;
    border-bottom-right-radius: 17px 50%;
    border-top-left-radius: 17px 50%;
    border-top-right-radius: 17px 50%;
    padding: 7px 0px;
    margin: 0px 0px 0px 0px;
    font-family: "Trebuchet MS", Verdana, "sans-serif";
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;
    text-align: center;
    color: white;
    border: 7px rgba(255, 217, 0, .21) solid;
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
    text-align: left;
    text-indent: 7%;
    box-shadow: 0px 0px 11px 0px rgba(255, 255, 255, 1), 0px 0px 3px 0px goldenrod, inset 0px 0px 11px 3px rgba(0, 0, 111, 0.11);
    clear: none;
}

hr.trump-shaft {
    display: grid;
    background-color: rgba(255, 255, 255, .44);
    background-image: linear-gradient(rgba(255, 217, 0, .21), rgba(255, 217, 0, .55), white, white, rgba(255, 217, 0, .55));
    width: 100%;
    max-width: 77%;
    height: auto;
    min-height: 3px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    padding: 3px 0px;
    margin: 3rem auto;
    font-family: "Trebuchet MS", Verdana, "sans-serif";
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;
    text-align: center;
    color: white;
    border: 0px rgba(255, 217, 0, .21) solid;
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
    text-align: left;
    text-indent: 7%;
    box-shadow: 0px 0px 11px 0px rgba(255, 255, 255, 1), 0px 0px 3px 0px goldenrod, inset 0px 0px 11px 3px rgba(0, 0, 111, 0.11);
    clear: both;
    content: "";
}

hr.silver-lining {
    display: grid;
    background-color: rgba(255, 255, 255, .44);
    background-image: linear-gradient(white, transparent, silver);
    width: 100%;
    max-width: 77%;
    height: auto;
    min-height: 3px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;

    border-top-left-radius: 50%;

    border-top-right-radius: 50%;

    padding: 3px 0px;

    margin: 3rem auto;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 2rem;

    font-weight: 600;

    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;

    text-align: center;

    color: white;

    border: 0px rgba(255, 217, 0, .11) solid;

    border-left: 0px;

    border-top: 0px;

    border-right: 0px;

    text-align: left;

    text-indent: 7%;

    box-shadow: inset 0px 0px 4px 1px silver;

    clear: both;

    content: "";

    

}



hr.silver-lining.donate {

        margin: 1.7rem auto;

}



hr.red-stripe, .red-stripe {

    display: grid;

    background-color: rgba(255, 255, 255, .44);

    background-image: linear-gradient(white, transparent, #880808);

    width: 100%;

    max-width: 77%;

    height: auto;

    min-height: 3px;

    border-bottom-left-radius: 50%;

    border-bottom-right-radius: 50%;

    border-top-left-radius: 50%;

    border-top-right-radius: 50%;

    padding: 3px 0px;

    margin: 3rem auto;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 2rem;

    font-weight: 600;

    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;

    text-align: center;

    color: #880808;

    border: 0px rgba(255, 217, 0, .11) solid;

    border-left: 0px;

    border-top: 0px;

    border-right: 0px;

    text-align: left;

    text-indent: 7%;

    box-shadow: inset 0px 0px 4px 1px #880808;

    clear: both;

    content: "";

    

}



article.donate {

    background-color: rgba(255, 255, 255, 1);

    background-image: url("/images/In-The-Clouds.jpg");

    background-attachment:fixed;

    background-position:center top;

    background-repeat:repeat;

    display: grid;

    position: relative;

    height: auto;

    width: 100%;

    min-width: 60%;

    max-width: 94%;

    padding: 1.5rem 2rem 2rem 2rem;

    margin: 0px auto 0px auto;

    overflow: hidden;

    text-align: center;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    border: 1px white solid;

    border-bottom-left-radius: 100px 100px;

    border-bottom-right-radius: 100px 100px;

    border-top-left-radius: 100px 100px;

    border-top-right-radius: 100px 100px;

    box-shadow: inset 0px 0px 13px 2px rgba(195, 195, 195, .88);

    clear: both;

}



article-number {

    display: block;

    background-color: rgba(255, 55, 55, .55);

    height: auto;

    width: 144px;

    aspect-ratio: 1/1;

    padding: 1.1rem 2rem;

    margin: 17px auto;

    overflow: hidden;

    text-align: center;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    font-size: 3.9rem;

    font-weight: 700;

    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba, 0px 0px 5px white, 0px 0px 7px white, 0px 0px 11px white;

    color: white;

    border: 1px white solid;

    border-bottom-left-radius: 50% 50%;

    border-bottom-right-radius: 50% 50%;

    border-top-left-radius: 50% 50%;

    border-top-right-radius: 50% 50%;

    box-shadow: inset 0px 0px 13px 2px rgba(255, 255, 255, .77), inset 0px 0px 33px 2px rgba(255, 255, 255, 1), 0px 0px 13px 2px rgba(195, 195, 195, .88);

    clear: both;

}



.pay-button {

    background-color: rgba(144, 255, 144, 1);

    display: block;

    width: 100%;

    margin: 33px auto;

    padding: 17px;

    max-width: 77%;

    height: auto;

    line-height: 33px;

    font-size: 33px;

    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba, 0px 0px 5px white, 0px 0px 7px white, 0px 0px 11px white;

    color: white;

    border: 1px lightgoldenrodyellow solid;

    border-bottom-left-radius: 7px;

    border-bottom-right-radius: 7px;

    border-top-left-radius: 7px;

    border-top-right-radius: 7px;

    box-shadow: inset 0px 0px 13px 2px rgba(255, 255, 255, .77), inset 0px 0px 33px 2px rgba(255, 255, 255, 1), 0px 0px 13px 2px rgba(195, 195, 195, .88);

    clear: both;

    text-align: center;

    

}



p.center {text-align: center;}

.pay-button > a {

    background-color: none;

    text-shadow: 0px -2px 7px darkgoldenrod, 0px 2px 3px #007aba, 0px 0px 5px white, 0px 0px 7px white, 0px 0px 11px white;

    color: white;

    border: 1px lightgoldenrodyellow solid;

    border-bottom-left-radius: 7px;

    border-bottom-right-radius: 7px;

    border-top-left-radius: 7px;

    border-top-right-radius: 7px;

}

.pay-button:hover {

    background-color: none;

    text-shadow: 0px -2px 7px darkgoldenrod, 0px 2px 3px #007aba, 0px 0px 5px white, 0px 0px 7px white, 0px 0px 11px gold;

    color: white;

    box-shadow: inset 0px 0px 13px 2px rgba(255, 255, 255, .77), inset 0px 0px 33px 2px rgba(225, 255, 255, 1), 0px 0px 17px 2px rgba(195, 195, 195, .91);

    border: 1px lightgoldenrodyellow solid;

    border-bottom-left-radius: 7px;

    border-bottom-right-radius: 7px;

    border-top-left-radius: 7px;

    border-top-right-radius: 7px;

}



article-right {

    display: inline-block;

    background-color: rgba(255, 255, 255, 0);

    height: auto;

    width: 100%;

    min-width: 300px;

    max-width: 676px;

    padding: 17px;

    margin: 0px auto;

    overflow: hidden;

    text-align: center;

    clear: none;

}



article-text {

    display: inline-block;

    background-color: rgba(255, 255, 255, 1);

    height: auto;

    width: 88%;

    padding: 1.7rem 2.5rem 1.7rem 2.5rem;

    margin: 0px 6%;

    overflow: hidden;

    text-align: justify;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 1.33rem;

    font-weight: 500;

    color: darkgray;

    text-shadow: 0px 0px 1px goldenrod;

    border: 1px silver solid;

    border-top: 0px;

    border-bottom-left-radius: 17px 17px;

    border-bottom-right-radius: 17px 17px;

    border-top-left-radius: 0px;

    border-top-right-radius: 0px;

    box-shadow: inset 0px 0px 33px 2px rgba(195, 255, 255, .55), inset 0px 0px 77px 3px ghostwhite, 0px 0px 13px 2px rgba(195, 195, 195, .88);

    clear: none;

}



portal-home {

    position:relative;

    background-color: rgba(255, 255, 255, 1);

    background-image: url("/images/In-The-Clouds.jpg");

    background-attachment:fixed;

    background-position:center top;

    background-repeat:repeat;

    margin: 0px auto;    

    width: 280px;

    height: auto;

    aspect-ratio: 1/1;

    padding: 21px;

    border: 0;

    border-bottom-left-radius: 50% 50%;

    border-bottom-right-radius: 50% 50%;

    border-top-left-radius: 50% 50%;

    border-top-right-radius: 50% 50%;

    box-shadow: inset 0px 0px 33px 11px rgba(255, 255, 255, 1);

    content: "";

    display: block;

    min-height: 0px;

    clear: both;

}



header {

    position: sticky;

    top: 0px;

    background-image: linear-gradient(rgba(255, 255, 255, 1));

    width: 100%;

    height:auto;

    padding: 0px 17px;

    color: #007aba;

    text-align: center;

    border-bottom: white solid 0px;

    border-bottom-left-radius: 7px;

    border-bottom-right-radius: 7px;

    box-shadow: inset 0px -4px 3px 0px indigo, inset 0px -7px 11px 0px goldenrod, 0px 0px 11px 0px #880808, 0px 3px 33px 0px goldenrod, 0px 33px 33px 0px white;

    content: "";

    display: block;

    clear: both;

    z-index: 999;

    margin: 0px;

    overflow: auto;

}



left-brain {

    display: block;

    float: left;

    padding: 17px 0px;

    margin-right: 0px;

    width: auto;

    height:100px;

    text-align: left;

    text-shadow: 0px 4px 3px indigo, 0px 3px 3px slategray, 0px 2px 7px silver, 0px -3px 3px goldenrod, 0px -7px 17px goldenrod;

    color: white;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-weight: 600;

    overflow: visible;

}



crown {

    display: inline-block;

    padding: 0px;

    width: auto;

    height:auto;

    text-align: center;

    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;

    color: white;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-weight: 600;

    overflow: visible;

}



milk-jug {

    

}



bor-conis {

    padding: 0px 0px;

    margin: 0px 0px;

    width: 100%;

    height:auto;

    text-align: center;

    overflow: visible;

}



honey-pot {

    

}



right-brain {

    display: block;

    float: right;

    padding: 17px 0px;

    width: auto;

    height:77px;

    text-align: right;

    text-shadow: 0px 0px 0px slategray;

    font-size: 1rem;

    color: slategray;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-weight: 500;

    overflow: visible;

}



/* ------------- NAVBAR --------------- */



nav {

    position: sticky;

    top: 111px;

    width: 100%;

    overflow: hidden;

    font-size: 1.25rem;

    font-weight: 500;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    background-color: #007aba;

    background-image: repeating-radial-gradient(rgba(55, 155, 55, .33), rgba(255, 255, 255, .33), indigo, rgba(255, 255, 255, .0));

    box-shadow: inset 0px 0px 7px 3px white, 0px 0px 17px 7px white;

    z-index: 997;

    text-align: center;

}



nav::after {

    background-color: rgba(255, 255, 255, 0.0);

    content: "";

    display: block;

    min-height: 0px;

    clear: both;

}



nav a {

    float: left;

    width: 20%;

    display: inline-block;

    color: white;

    text-align: center;

    padding: 1.1rem .5rem;

    margin: 0px auto;

    text-decoration: none;

    text-shadow: 0px 0px 3px silver, 0px 0px 4px #880808, 0px 0px 5px #FDE08D, 0px 0px 11px #FDE08D, 0px 0px 33px violet;

}



nav a:hover{

    background-color: #FDE08D;

    color: ghostwhite;

    box-shadow: inset 0px 0px 7px 3px ghostwhite, 0px 0px 7px 3px ghostwhite;

}

nav a.current-page {

    background-image: none;

    background-color: white;

    color: white;

    box-shadow: inset 0px 0px 7px 3px ghostwhite, 0px 0px 7px 3px ghostwhite;

}





#full-555 {

        

}



#menu-555 {

    display: table;

    

        

}



.hide-this {

    display: none;

}



nav.mobile-555 {

    position: sticky;

    top: 111px;

    width: 100%;

    overflow: hidden;

    font-size: 2.1rem;

    font-weight: 500;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    background-color: #007aba;

    background-image: repeating-radial-gradient(rgba(55, 155, 55, .33), rgba(255, 255, 255, .33), indigo, rgba(255, 255, 255, .0));

    box-shadow: inset 0px 0px 7px 3px white, 0px 0px 17px 7px white;

    z-index: 997;

    text-align: center;

}

#menu_title {

    width: 100%;

    display: block;

    color: white;

    text-align: center;

    padding: 1.1rem .5rem;

    margin: 0px auto;

    font-size: 2.1rem;

    text-decoration: none;

    text-indent: 0px;

    text-shadow: 0px 0px 3px silver, 0px 0px 4px #880808, 0px 0px 5px #FDE08D, 0px 0px 7px #FDE08D, 0px 0px 11px #FDE08D, 0px 0px 33px violet;

    background-color: #007aba;

    background-image: repeating-radial-gradient(rgba(55, 155, 55, .33), rgba(255, 255, 255, .33), indigo, rgba(255, 255, 255, .0));

    box-shadow: inset 0px 0px 7px 3px white, 0px 0px 17px 7px white;

}



nav.mobile-555 a {

    background-image: none;

    background-color: rgba(245,245,245, .33);

    color: white;

    font-size: 2.1rem;

    box-shadow: inset 0px 0px 7px 3px ghostwhite, 0px 0px 7px 3px ghostwhite;

    display: block;

    width: 100%;

    text-align: center;

}



nav.mobile-555 a:hover {

    background-image: none;

    background-color: white;

    color: white;

    box-shadow: inset 0px 0px 7px 3px ghostwhite, 0px 0px 7px 3px ghostwhite;

}



#mobile-menu {

    display: none;

}



#mobile-menu-item {

    display: block;

}



nav a:active, nav.mobile-555 a:active, #menu_title:hover {

    background-color: white;

    background-image: repeating-radial-gradient(white, #FDE08D, indigo, rgba(255, 255, 255, .0), rgba(255, 255, 255, .0));

    color: white;

    box-shadow: inset 0px 0px 7px 3px ghostwhite, 0px 0px 7px 3px ghostwhite;

}

#menu-555 a.current-page {

    background: 0;

    background-color: #FDE08D;

    color: ghostwhite;

    box-shadow: inset 0px 0px 7px 3px ghostwhite, 0px 0px 7px 3px ghostwhite;

}

    

ear-left {   

    float: left;

    display: inline-block;

    padding: 0px 0px;

    width: 34%;

    min-width: 240px;

    text-align: center;

}



voice {

    float: left;

    display: inline-block;

    padding: 0px 0px;

    width: 32%;

    min-width: 240px;

    text-align: center;

}



ear-right {

    float: right;

    display: inline-block;

    padding: 0px 0px;

    width: 34%;

    min-width: 240px;

    text-align: center;

}



/* 1st Main Row Boxes */



main {

    background-color: rgba(255, 255, 255, 0.0);

    margin: 0;

    height: auto;

    width: 100%;

    padding: 0px 0px;

    content: "";

    display: block;

    clear: both;

}



arm-left {

    float: left;

    display: inline-block;

    padding: 0px 0px;

    width: 32%;

    margin: 0% 1% 0% 0%;

    min-width: 240px;

    text-align: center;

}



chest-middle {

    float: left;

    display: block;

    padding: 0px 0px;

    width: 32%;

    margin: 0% 1% 0% 0%;

    min-width: 240px;

    text-align: center;

    overflow: visible;

}



arm-right {

    float: left;

    display: inline-block;

    padding: 0px 0px;

    width: 32%;

    margin: 0% 1% 0% 0%;

    min-width: 240px;

    text-align: center;

}



/* 2nd Main Row Boxes */



belt {

    background-color: rgba(248, 248, 255, 1);

    display: table;

    width: 100%;

    height: auto;

    padding: 17px 3%;

    margin: 21px 0px 0px 0px;

    box-shadow: inset 0px 7px 7px 3px ghostwhite, 0px 0px 7px 3px ghostwhite;

    content: "";

    clear: both;

    z-index: 0;

    overflow: auto;

}



hip-left {   

    float: left;

    display: inline-block;

    padding: 0px 10px;

    width: 70%;

    text-align: center;

}



hip-right {

    float: right;

    display: inline-block;

    padding: 0px 10px;

    width: 30%;

    text-align: center;

}



/* 3rd Main Row Boxes */



pants {

    background-color: rgba(248, 248, 255, 1);

    display: block;

    width: 100%;

    height: auto;

    min-height: 144px;

    padding: 0px;

    margin: 0px;

    box-shadow: inset 0px -17px 17px 3px ghostwhite, 0px -17px 17px 3px ghostwhite;

    content: "";

    display: table;

    clear: both;

    z-index: 0;

}



leg-left {   

    float: left;

    display: inline-block;

    padding: 0px 0px;

    width: 55%;

    text-align: center;

}



leg-right {

    float: right;

    display: inline-block;

    padding: 0px 0px;

    width: 45%;

    text-align: center;

}



/* 4th Main Row Boxes */



/* Footer */



footer {

    background-color: rgba(255, 255, 255, 0.0);

    background-image: linear-gradient(rgba(255, 255, 255, .33), rgba(255, 255, 255, .0));

    position: relative;

    bottom: 0px;

    width: 100%;

    height: auto;

    bottom: 0px;

    padding: 0px;

    text-align: center;

    margin-top: 0px;

    margin-bottom: 0px;

    content: "";

    display: table;

    clear: both;

}

footer-skin-top {

    position: relative;

    display: block;

    width: 100%;

    height: 690px;

    max-width: 1200px;

    min-height: 690px;

    margin: 0px auto 0px auto;

    padding: 0px 0px 0px 0px;

    background-color: rgba(255, 255, 255, .5);

    background-image: url("/images/robe-transparent-flip.png"), url("/images/purple-grass.jpeg");

    background-attachment:local;

    background-position:right bottom, center bottom;

    background-repeat:no-repeat, no-repeat;

    background-size: contain, cover;

    border-top: goldenrod solid 0px;

    text-align: justify;

    color: white;

    box-shadow: inset 0px 0px 7px 7px rgba(255, 255, 255, 1), 0px 0px 27px 17px rgba(255, 255, 255, 1.0);

    overflow: visible;

    content: "";

    display: table;

    clear: both;

    z-index: 555;

}



footer-skin-bottom {

    position: relative;

    display: block;

    width: 100%;

    height: 690px;

    max-width: 1200px;

    min-height: 690px;

    margin: 0px auto 0px auto;

    padding: 0px 0px 0px 0px;

    background-color: rgba(255, 255, 255, .5);

    background-image: url("/images/indian-transparent-flip.png"), url("/images/purple-grass.jpeg");

    background-attachment:local;

    background-position:center bottom, center bottom;

    background-repeat:no-repeat, no-repeat;

    background-size: contain, cover;

    border-top: goldenrod solid 0px;

    text-align: justify;

    color: white;

    box-shadow: inset 0px 0px 7px 7px rgba(255, 255, 255, 1), 0px 0px 27px 17px rgba(255, 255, 255, 1.0);

    overflow: visible;

    content: "";

    display: table;

    clear: both;

    z-index: 555;

}



foot-sol {

    position: absolute;

    bottom: 0px;

    left: 0px;

    right: 0px;

    padding: 0px;

    margin: 0px auto;

    width: 100%;

    max-width: 1200px;

    height: auto;

}



foot-left {   

    float: left;

    display: inline-block;

    background-color: rgba(33,33,33, .33);

    background-image: linear-gradient(rgba(136, 8, 8, .55));

    padding: 0px 5px 7px 5px;

    margin: 0px 0% 0px 0%;

    width: 44%;

    height: 396px;

    min-width: 313px;

    border: 3px solid silver;

    border-bottom-left-radius: 0px;

    border-bottom-right-radius: 0px;

    border-top-left-radius: 0px;

    border-top-right-radius: 144px;

    border-left:0;

    border-bottom:0;

    text-shadow: 0px 0px 4px black;

    text-align: center;

}



foot-left.gold {

    background-color: rgba(33,33,33, .55);

    background-image: linear-gradient(rgba(218, 165, 32, .55));

}



.long-button {

    background-color: darkgoldenrod;

    background-image: repeating-radial-gradient(ghostwhite, ghostwhite 11%, transparent 44%, goldenrod, transparent, transparent);

    border: 0;

    border-bottom-left-radius: 33% 100%;

    border-bottom-right-radius: 33% 100%;

    border-top-left-radius: 0px;

    border-top-right-radius: 0px;

    color: white;

    display: block;

    width: 100%;

    max-width: 1100px;

    height: auto;

    padding: 17px 3% 17px 3%;

    margin: 0px auto 44px auto;

    font-size: 3rem;

    font-weight: 700;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    text-shadow: 0px 0px 3px darkgoldenrod, 0px 0px 5px darkgoldenrod, 0px 0px 7px #880808, 0px 0px 9px #FDE08D, 0px 0px 11px #880808, 0px 0px 13px #880808;

    box-shadow: inset 0px 0px 7px 4px goldenrod, inset 0px 0px 7px 7px rgba(255, 255, 255, 1), 0px 0px 21px 2px #FDE08D, 0px 0px 27px 17px rgba(255, 255, 255, 1.0);

    content: "";

    display: table;

    clear: both;

    z-index: 0;

}



.long-button:hover {

    background-color: rgba(255, 255, 255, 1);

    background-image: repeating-radial-gradient(#880808, #880808 11%, transparent 44%, goldenrod, transparent);

    border: 0;

    color: white;

    text-shadow: 0px 0px 3px darkgoldenrod, 0px 0px 5px darkgoldenrod, 0px 0px 7px goldenrod, 0px 0px 9px #FDE08D, 0px 0px 11px #FDE08D, 0px 0px 13px goldenrod;

    box-shadow: inset 0px 0px 7px 4px goldenrod, inset 0px 0px 7px 7px rgba(255, 255, 255, 1), 0px 0px 21px 2px #FDE08D, 0px 0px 27px 17px rgba(255, 255, 255, 1.0);

}



root-middle {

    position: absolute;

    bottom: 0px;

    left: 0px;

    right: 0px;

    display: block;

    padding: 17px 7px 17px 7px;

    margin: 0px auto;

    height: 100%;

    width: 77px;

    height: auto;

    min-width: 300px;

    text-align: center;

}



hr {width: 77%; margin: 0px auto;  border: 1px solid silver;

}



foot-right {

    float: right;

    display: inline-block;

    background-color: rgba(33,33,33, .55);

    background-image: linear-gradient(rgba(218, 165, 32, .55));

    padding: 0px 5px 7px 5px;

    margin: 0px 0% 0px 0%;

    width: 33%;

    height: auto;

    min-width: 310px;

    border: 3px solid silver;

    border-bottom-left-radius: 0px;

    border-bottom-right-radius: 0px;

    border-top-left-radius: 25%;

    border-top-right-radius: 0px;

    border-right:0;

    border-bottom:0;

    text-shadow: 0px 0px 4px black;

    text-align: center;

}



/* 5th Main Row Boxes */



trumpet {

    background-color: rgba(255, 255, 255, 0.69);

    position: fixed;

    width: 100%;

    bottom: 50%;

    padding: 0px;

    color: #007aba;

    text-align: center;

    margin-top: 17px;

}



ground {

    display: inline-block;

    background-color: #007aba;

    background-image: repeating-radial-gradient(white, #880808, rgba(255, 255, 255, .33), indigo, rgba(255, 255, 255, .0));

    box-shadow: inset 0px 0px 7px 3px white, 0px 0px 17px 7px white, inset 0px 0px 11px 0px #880808, inset 0px 11px 21px 0px rgba(255, 255, 255, .21), inset 0px -27px 27px 0px rgba(255, 255, 255, .77);

    

    position: relative;

    width: 100%;

    padding: 0px 0px;

    color: rgba(255, 255, 255, 0.88);

    text-align: center;

    margin-top: 0px;

}



grounded-sol {

    position: relative;

    padding: 0px;

    margin: 0px auto;

    width: 100%;

    max-width: 1200px;

    height: auto;

    content: "";

    display: table;

    clear: both;

}



underground {

    background-image: linear-gradient(rgba(255, 255, 255, 1));

    position: relative;

    width: 100%;

    height:auto;

    padding: 17px 0px;

    text-align: center;

    border-bottom: white solid 0px;

    border-bottom-left-radius: 7px;

    border-bottom-right-radius: 7px;

    box-shadow: inset 0px 4px 3px 0px indigo, inset 0px 7px 9px 0px goldenrod, 0px 0px 11px 0px #880808, 0px 0px 33px 0px goldenrod, 0px 33px 33px 0px white;

    content: "";

    display: table;

    clear: both;

    z-index: 999;

}



underground > a {

    display: table;

    width: auto;

    margin: auto;

    padding: 25px 0px 0px 0px;

    font-size: 1.7rem;

    font-weight: 500;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    text-shadow: 0px 0px 2px black, 0px 0px 3px goldenrod, 0px 0px 6px goldenrod, 0px 0px 9px #FDE08D, 0px 0px 11px silver;

    color: white;

}



underground > a:hover {

    text-shadow: 0px 0px 2px indigo, 0px 0px 3px #880808, 0px 0px 6px #880808, 0px 0px 7px #880808;

    color: white;

}



fault-left {

    display: inline-block;

    float: left;

    margin: 0px 0px;

    padding: 0px 5px;

    width: auto;

    font-size: 1.5rem;

    text-align: center;

}



fault-left a {

    display: inline-block;

    background-color: rgba(255, 111, 111, 1);

    font-size: 27px;

    font-weight: 500;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    color: white;

    text-shadow: 0px 0px 2px #880808;

    text-align: center;

    padding: 2px 33px 7px 33px;

    margin: 0px 0px 0px 33px;

    border: 2px solid white;

    border-bottom-left-radius: 3px;

    border-bottom-right-radius: 3px;

    border-top-left-radius: 3px;

    border-top-right-radius: 3px;

    box-shadow: 0px 0px 3px gray, 0px 0px 7px white;

    text-decoration: none;

}



fault-left a:hover {

    background-color: white;

    border: 2px solid goldenrod;

    color: goldenrod;

}



zero-point {

    display: inline-block;

    background-attachment:local;

    background-position: center bottom;

    background-repeat: no-repeat;

    background-size: contain;

    width:auto;

    height:auto;

    padding: 17px 0px;

    font-size: 1.7rem;

    font-weight: 500;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    text-align: center;

}



zero-point a {

    display: inline-block;

    background-image: repeating-radial-gradient(#880808 0%, transparent 55%, transparent);

    color: ghostwhite;

    text-shadow: 0px 0px 3px black, 0px 0px 4px #880808, 0px 0px 6px #880808, 0px 0px 7px silver, 0px 0px 8px silver, 0px 0px 13px #880808, 0px 0px 17px #880808;

    padding: 13px 21px;

    overflow: visible;

}



zero-point a:hover {

    background-color: none;

    color: ghostwhite;

    text-shadow: 0px 0px 3px silver, 0px 0px 4px #880808, 0px 0px 6px #FDE08D, 0px 0px 7px #FDE08D, 0px 0px 11px #FDE08D, 0px 0px 13px #FDE08D, 0px 0px 33px violet;

}



fault-right {

    display: inline-block;

    float: right;

    margin: 0px 0px;

    padding: 0px 5px;

    width: auto;

    font-size: 1.5rem;

    text-align: center;

}



fault-right a {

    display: inline-block;

    background-color: rgba(255, 111, 111, 1);

    font-size: 27px;

    font-weight: 500;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    color: white;

    text-shadow: 0px 0px 2px #880808;

    text-align: center;

    padding: 2px 33px 7px 33px;

    margin: 0px 33px 0px 0px;

    border: 2px solid white;

    border-bottom-left-radius: 3px;

    border-bottom-right-radius: 3px;

    border-top-left-radius: 3px;

    border-top-right-radius: 3px;

    box-shadow: 0px 0px 3px gray, 0px 0px 7px white;

    text-decoration: none;

}



fault-right a:hover {

    background-color: white;

    border: 2px solid goldenrod;

    color: goldenrod;

}

/* Fake image */



.fakeimg {

    background-color: #aaa;

    width: 100%;

    padding: 20px;

}



/* Add a card effect for articles */



.card {

    background-color: rgba(255, 255, 255, 0.0);

    padding: 17px;

    margin-top: 17px;

    text-align: center;

}



/* Clear floats after the columns */



poem-holder::after {

    background-color: rgba(255, 255, 255, 0.0);

    content: "";

    display: block;

    clear: both;

}







/* -------- BODY ELEMENTS ----------- */



article > h1, p {

    margin: 10px;

    padding: 5px;

}



article > p {

    font-size: 1.3rem;

}



p-holder {

    background-color: rgba(255, 255, 255, .0);

    background-image: radial-gradient(transparent, transparent, transparent);

    padding: 21px 0px;

    display: table;

    width: auto;

    text-align: left;

    margin: 0px auto;

}



p-holder.red {background-image: radial-gradient(rgba(255, 0, 0, .33), transparent, transparent);}

p-holder.orange {background-image: radial-gradient(rgba(255, 127, 0, .77), transparent, transparent);}

p-holder.yellow {background-image: radial-gradient(rgba(255, 255, 0, .77), transparent, transparent);}

p-holder.green {background-image: radial-gradient(rgba(0, 255, 0, .77), transparent, transparent);}

p-holder.blue {background-image: radial-gradient(rgba(0, 0, 255, .77), transparent, transparent);}

p-holder.indigo {background-image: radial-gradient(rgba(75, 0, 130, .77), transparent, transparent);}

p-holder.violet {background-image: radial-gradient(rgba(148, 0, 211, .77), transparent, transparent);}

p-holder.white {background-image: radial-gradient(rgba(255, 255, 255, .77), transparent, transparent);}





p-holder > p {

    background-color: rgba(255, 255, 255, .91);

    padding: 21px 17px;

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

    font-size: 1.5rem;

    font-weight: 500;

    text-shadow: 0px 0px 1px lightgoldenrodyellow,  0px 1px 1px goldenrod;

    color: slategray;

    display: table;

    width: auto;

    text-align: left;

    margin: 0px auto 21px auto;

    border-radius: 33px;

}



p-holder.milk > p {background-color: rgba(255, 255, 255, .17);}



h-timer {

    color: white;

    text-shadow: 0px 0px 3px silver, 0px 0px 4px #880808, 0px 0px 5px #FDE08D, 0px 0px 11px #FDE08D, 0px 0px 33px violet;    

}

img.why-subject {
    margin-left: 17px;
    border: 3px silver solid;
    border-radius: 33px;
    float: right;
    width: 217px;
    height: auto;
}
a.jump-button{
    position: relative; top:217px; left:33px;border:1px solid silver; border-radius: 17px; padding: 7px;background-color: lightgoldenrodyellow;
}

.page-pic {width: 51%;height: auto;}


.p-333 {width: 100%; max-width: 333px; margin: 11px auto;}
.p-420 {width: 100%; max-width: 420px; margin: 11px auto;}
.p-555 {width: 100%; max-width: 555px; margin: 11px auto;}
.p-640 {width: 100%; max-width: 640px; margin: 11px auto;}
.p-777 {width: 100%; max-width: 777px; margin: 11px auto;}
.p-77 {width: 100%; max-width: 77%; margin: 11px auto;}
.p-888 {width: 100%; max-width: 888px; margin: 11px auto;}
.h-888 {width: 100%; max-width: 888px; margin: 33px auto;}
.p-88 {width: 100%; max-width: 88%; margin: 11px auto;}

.f-25 {width: 100%; max-width: 25%; margin:17px auto;display: block;float: left;}

.f-50 {width: 100%; max-width: 50%; margin:17px auto;display: block;float: left;}

.f-33 {width: 100%; max-width: 33%; margin:17px auto;display: block;float: left;}

who-list > p {text-align: center;}
why-list > p {text-align: center;}

.who-list {color:#007aba; width: auto; margin: 7px auto; padding: 7px 17px;font-size: 1.2rem;font-weight: 500; border-radius: 17px;background-color: white;border: 2px solid silver;}

.why-list {color:#007aba; width: 100%; max-width: 77%; margin: 7px auto 7px auto; padding: 7px 17px;font-size: 1.2rem;font-weight: 500; text-align: left;border-radius: 17px;background-color: white;border: 2px solid silver;}

.h-blue {color:cornflowerblue;}



poem-card {
    position:relative;

    display: block;

    width: 100%;

    height: auto;

    margin: 0px 0px 33px 0px;

    padding: 17% 0px;

    background-color: rgba(255, 255, 255, .5);

    background-image: url("/images/rise-above.jpg");

    background-attachment: local;

    background-position:center center;

    background-repeat:no-repeat;

    background-size: cover;

    border-radius: 33px 33px 33% 33%;

    border: silver solid 0px;

    text-align: justify;

    color: ghostwhite;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19),inset 0px 0px 33px 4px rgba(255, 255, 255, 0.88),inset 0px 0px 44px 4px rgba(255, 255, 255, 0.88);

    overflow: visible;

}



poem-card.violet {background-image: url("/images/cloud-007.png");}

poem-card.indigo {background-image: url("/images/cloud-006.jpg");}

poem-card.blue {background-image: url("/images/cloud-005.jpg");}

poem-card.green {background-image: url("/images/cloud-004.png");}

poem-card.yellow {background-image: url("/images/cloud-003.jpg");}

poem-card.orange {background-image: url("/images/cloud-002.jpg");}

poem-card.red {background-image: url("/images/Bee-Hive-Honey-Drip.png"), url("/images/milk-splash.png");

background-attachment: local, local;

background-position: center top -33px, center bottom;

background-size: 50% auto, cover;}



chest-middle > trump-poem, arm-left > trump-poem, arm-right > trump-poem {

    display: block;

    background-color: rgba(255, 255, 255, .44);

    background-image: linear-gradient(rgba(255, 217, 0, .55), white, white, rgba(255, 217, 0, .44));

    width: 100%;

    height: auto;

    min-height: 33px;

    border-bottom-left-radius: 17px 50%;

    border-bottom-right-radius: 17px 50%;

    border-top-left-radius: 17px 50%;

    border-top-right-radius: 17px 50%;

    padding: 17px 0px 17px 0px;

    margin: 17px 0px 0px 0px;

    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";

    font-size: 1.5rem;

    font-weight: 600;

    text-shadow: 0px 0px 1px #007aba, 0px -2px 7px goldenrod, 0px 2px 3px #007aba;

    text-align: center;

    color: white;

    border: 4px rgba(255, 217, 0, .21) solid;

    border-left: 0px;

    border-top: 0px;

    border-right: 0px;

    box-shadow: 0px 0px 11px 0px rgba(255, 255, 255, 1), 0px 0px 3px 0px goldenrod, inset 0px 0px 11px 3px rgba(0, 0, 111, 0.11);

    clear: both;

}



card-title {

    background: 0;

    position:relative;

    top: 0px;

    margin: 0px;

    padding: 17px;

    text-align: center;

    color: ghostwhite;

    width: 100%;

    height: auto;

    line-height: 33px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 1.4rem;

    text-shadow: 0px -2px 7px goldenrod, 0px 2px 3px #007aba;

    content: "";

    display: table;

    clear: both;

}



.gwb-text {

    margin: 0px;

    padding: 11px 7px 7px 7px;

    text-align: left;

    color: ghostwhite;

    width: 100%;

    height: auto;

    line-height: 33px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 33px;

    text-shadow: 0px -2px 4px goldenrod, 0px 2px 4px #007aba;

    content: "";

    display: table;

    clear: both;

}



.rwb-text {

    margin: 0px;

    padding: 0px 0px 11px 0px;

    text-align: right;

    color: ghostwhite;

    width: 100%;

    height: auto;

    line-height: 21px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 21px;

    font-weight: 500;

    text-shadow: 0px -2px 4px #007aba, 0px 2px 4px red;

    content: "";

    display: table;

    clear: both;

}



card-caption {

    background-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.33), rgba(255, 255, 255, 0.77));

    position:relative;

    top: 0px;

    margin: 0px;

    padding: 11px;

    text-align: center;

    color: ghostwhite;

    width: 100%;

    height: auto;

    line-height: 21px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 17px;

    font-weight: 500;

    text-shadow: 0px -2px 4px #007aba, 0px 2px 4px red;

    content: "";

    display: table;

    clear: both;

}



card-body {

    background: 0;

    position:relative;

    padding: 0px 0% 0px 0%;

    text-align: center;

    color: ghostwhite;

    width: 100%;

    height: auto;

    line-height: 21px;

    font-family: "Trebuchet MS", Verdana, "sans-serif";

    font-size: 19px;

    text-shadow: 0px -1px 3px #007aba, 0px 2px 4px #007aba;

    content: "";

    display: table;

    clear: both;

}

card-body.yellow {background-image: linear-gradient(rgba(255, 255, 0, .33), transparent 17%, transparent 83%, rgba(255, 255, 0, .33));}

card-body.orange {background-image: linear-gradient(rgba(255, 127, 0, .33), transparent 17%, transparent 83%, rgba(255, 127, 0, .33));}

card-body.red {background-image: linear-gradient(rgba(255, 0, 0, .33), transparent 17%, transparent 83%, rgba(255, 0, 0, .33));}

card-body.green {background-image: linear-gradient(rgba(0, 255, 0, .33), transparent 17%, transparent 83%, rgba(0, 255, 0, .33));}

card-body.blue {background-image: linear-gradient(rgba(0, 0, 255, .33), transparent 17%, transparent 83%, rgba(0, 0, 255, .33));}

card-body.violet {background-image: linear-gradient(rgba(148, 0, 211, .33), transparent 17%, transparent 83%, rgba(148, 0, 211, .33));}

card-body.white {background-image: linear-gradient(rgba(155, 0, 0, .33), transparent 17%, transparent 83%, rgba(155, 0, 0, .33));}

card-body.indigo {background-image: linear-gradient(rgba(75, 0, 130, .33), transparent 17%, transparent 83%, rgba(75, 0, 130, .33));}

story-card {
    background-image: url("/images/In-The-Clouds.jpg");
    background-attachment:fixed;
    background-position:center top;
    background-repeat:repeat;
    position:relative;
    padding: 0px 0px 17px 7px;
    margin: 17px 0 17px 0;
    text-align: center;
    color: slategray;
    width: 100%;
    height: auto;
    line-height: 21px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 19px;
    border: 2px solid silver;
    border-radius: 7px;
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
}
story-text {
    background: rgba(255,255,255, .88);
    position:relative;
    float: right;
    padding: 11px 11px 17px 11px;
    margin: 0px 1% 17px auto;
    text-align: left;
    color: slategray;
    width: 100%;
    max-width: 74%;
    height: auto;
    line-height: 21px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 19px;
    border: 1px solid silver;
    border-radius: 33px;
    content: "";
    display: table;
    clear: none;
    overflow: hidden;
}
story-caption {
    background: rgba(255,255,255, .88);
    position:relative;
    padding: 11px 11px 11px 11px;
    margin: 0px auto 0px auto;
    text-align: center;
    color: slategray;
    width: 100%;
    max-width: 88%;
    height: auto;
    line-height: 1.5;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 19px;
    border: 1px solid silver;
    border-radius: 33px;
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}

polaroid {
    background: white;
    position:relative;
    padding: 21px 11px 11px 11px;
    margin: 0px 1% 17px auto;
    float: left;
    text-align: center;
    color: slategray;
    width: 24%;
    min-width: 217px;
    height: auto;
    line-height: 19px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 19px;
    border: 1px solid silver;
    content: "";
    display: inline-block;
    clear: none;
    overflow: hidden;
}

polaroid > img {
    background-image: linear-gradient(#010101, #101010, #011001);
    position:relative;
    padding: 0;
    margin: 0px auto;
    text-align: center;
    color: white;
    width: 100%;
    max-width: 217px;
    height: auto;
    line-height: 21px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 19px;
    border: 0px solid silver;
    border-radius: 0px;
    content: "";
    display: grid;
    clear: both;
    overflow: hidden;
}

polar-caption {
    background: rgba(248, 248, 255, .33);
    position:relative;
    padding: 11px 7px 7px 7px;
    margin: 0px auto 0px auto;
    text-align: center;
    color: darkslategray;
    width: 100%;
    height: auto;
    min-height: 69px;
    line-height: 1.33;
    font-family: "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 25px;
    font-weight: 500;
    border: 0px solid silver;
    content: "";
    display: grid;
    clear: both;
    overflow: hidden;
}
polar-caption > span.date-line {
    color: darkslategray;
    font-family: "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 21px;
    font-weight: 500;
}

matrix-alpha {
    background-image: url("/images/matrix.gif");
    background-attachment:fixed;
    background-position:center top;
    background-repeat:repeat;
    position:relative;
    padding: 17px 17px;
    margin: 17px auto;
    text-align: left;
    color: slategray;
    width: auto;
    height: auto;
    border: 2px solid silver;
    border-radius: 33px;
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
}

why-card {
    background-image: url("/images/In-The-Clouds.jpg");
    background-attachment:fixed;
    background-position:center top;
    background-repeat:repeat;
    position:relative;
    padding: 0px 0px 17px 7px;
    margin: 17px 0 17px 0;
    text-align: center;
    color: slategray;
    width: 100%;
    height: auto;
    line-height: 21px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 19px;
    border: 2px solid silver;
    border-radius: 7px;
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
}
why-text {
    background: rgba(255,255,255, .88);
    position:relative;
    float: right;
    padding: 11px 11px 17px 11px;
    margin: 0px 1% 17px auto;
    text-align: left;
    color: slategray;
    width: 100%;
    max-width: 74%;
    height: auto;
    line-height: 21px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 19px;
    border: 1px solid silver;
    border-radius: 33px;
    content: "";
    display: table;
    clear: none;
    overflow: hidden;
}
why-caption {
    background: rgba(255,255,255, .88);
    position:relative;
    padding: 11px 11px 11px 11px;
    margin: 0px auto 0px auto;
    text-align: center;
    color: slategray;
    width: 100%;
    max-width: 88%;
    height: auto;
    line-height: 1.5;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 19px;
    border: 1px solid silver;
    border-radius: 33px;
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}
why-pic {
    background: white;
    position:relative;
    padding: 21px 11px 11px 11px;
    margin: 0px 1% 17px auto;
    float: left;
    text-align: center;
    color: slategray;
    width: 24%;
    min-width: 217px;
    height: auto;
    line-height: 19px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 19px;
    border: 1px solid silver;
    content: "";
    display: inline-block;
    clear: none;
    overflow: hidden;
}

why-pic > img {
    background-image: linear-gradient(#010101, #101010, #011001);
    position:relative;
    padding: 0;
    margin: 0px auto;
    text-align: center;
    color: white;
    width: 100%;
    max-width: 217px;
    height: auto;
    line-height: 21px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 19px;
    border: 2px solid silver;
    border-radius: 33px;
    content: "";
    display: grid;
    clear: both;
    overflow: hidden;
}

why-pic-caption {
    background: rgba(248, 248, 255, .33);
    position:relative;
    padding: 11px 7px 7px 7px;
    margin: 0px auto 0px auto;
    text-align: center;
    color: darkslategray;
    width: 100%;
    height: auto;
    min-height: 69px;
    line-height: 1.33;
    font-family: "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 25px;
    font-weight: 500;
    border: 0px solid silver;
    content: "";
    display: grid;
    clear: both;
    overflow: hidden;
}
why-pic-caption > span.date-line {
    color: darkslategray;
    font-family: "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 21px;
    font-weight: 500;
}

.jump-button-bottom {
    position: relative; top:0px; left:0px;border:1px solid silver; border-radius: 17px; padding: 7px;background-color: lightgoldenrodyellow;
}

img.pic-333 {
    border: 3px silver solid; border-radius: 33px;width:333px; height:auto;
}


/* ------------ Animated Gradient ----- */

@property --startColor {
  syntax: "<color>";
  initial-value: ghostwhite;
  inherits: false;
}

@property --middleColor {
  syntax: "<color>";
  initial-value: transparent;
  inherits: false;
}

@property --endColor {
  syntax: "<color>";
  initial-value: rgba(218,165,32, 0.77);
  inherits: false;
}

@keyframes gradient {
  0% {
    --startColor: ghostwhite;
    --middleColor: transparent;
    --endColor: rgba(218,165,32, 0.77);
  }
    
  50% {
    --startColor: ghostwhite;
    --middleColor: transparent;
    --endColor: rgba(218,165,32, 0.55);
  }
  100% {
    --startColor: ghostwhite;
    --middleColor: transparent;
    --endColor: rgba(218,165,32, 0.77);
  }
}
.ex1 {
  background: linear-gradient(var(--startColor), var(--middleColor), var(--endColor));
  animation: gradient 5s linear infinite;
}
#grad1 {
  height: auto;
}

/* --- Define Colors ---- */

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

.fresh {
    --my-bg-color: #ff6347;
}

.nature {
    --my-bg-color: rgb(120, 180, 30);
}