/* || GEN STYLES */

html {
background-image: url("/images/backstars.gif");
font-family: "Times-New-Roman", serif;
overflow-x: hidden;
max-width: 100%;
}

html, body {box-sizing: border-box; max-height: 100%;}

body {width: 1280px; margin: 0 auto; position: relative;}

img {
max-width: 100%;
max-height: 100%;
border: 0 none;
margin: 1px 0 1px 0;
}

p, ul, ol, h1, h2, h3, h4, h5, small {
color: #000033; 
word-wrap: break-word; 
hyphens: auto; 
text-align: left;
}

a:hover, a:focus, a:active {color: #9A46FB;}

kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid;
}

iframe {
max-width: 100%;
max-height: 100%;
border: 0 none; 
margin: 0;
}

/* DROPDOWN */

.dropdown a {
    display: block;
    text-decoration: none;
    padding: 5px;
    color: #cc66cc; /* lavender */
    font-size:17px;
}

.dropdown a:hover{background-color: #006767;} /* darker teal */

.dropdown {display: inline-block;}

.dropdown .dropdowncontent {
    z-index: 3;
    display: none;
    position: absolute;
    min-width: 80px;
    max-width: 130px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
    border: 2px solid #400080; /* dark blue */
    border-top: transparent;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: teal;
    margin-left: 15px;
    margin-right: 15px;
}

.dropdown:hover .dropdowncontent {display: block;}

.dropdown:hover .navtext {
    color: teal;
    filter: drop-shadow(0px 1px #330066) drop-shadow(0 -1px #330066) drop-shadow(1px 0 #330066) drop-shadow(-1px 0 #330066); /* darker blue */
    text-shadow: #400080 1px 0 2px, #400080 -1px 0 2px, #400080 0 1px 2px, #400080 0 -1px 2px; /* dark blue */
    letter-spacing: 0.5px;
    transition: .3s;
    font-style: italic;
    text-decoration: none;
}

/* END DROPDOWN */
/* NAV */
.navtext {
padding: 5px 0;
margin: 0 1em 0 1em; /* top right bottom left */
color: #9A46FB; /* light purple */
font-weight: bold;
font-size: 25px;
filter: drop-shadow(0px 1px #330066) drop-shadow(0 -1px #330066) drop-shadow(1px 0 #330066) drop-shadow(-1px 0 #330066); /* darker blue */
text-shadow: #400080 1px 0 2px, #400080 -1px 0 2px, #400080 0 1px 2px, #400080 0 -1px 2px; /* dark blue */
cursor: pointer;
text-decoration: none;
}

.navtext:hover {
color: teal;
filter: drop-shadow(0px 1px #330066) drop-shadow(0 -1px #330066) drop-shadow(1px 0 #330066) drop-shadow(-1px 0 #330066); /* darker blue */
text-shadow: #400080 1px 0 2px, #400080 -1px 0 2px, #400080 0 1px 2px, #400080 0 -1px 2px; /* dark blue */
/* letter-spacing: 0.5px; */
transition: .3s;
font-style: italic;
text-decoration: none;
}

nav {
z-index: 3;
width:800px;
min-height:30px;
padding: 0;
background-color: #990099; /* purple */
box-shadow: 5px 5px 5px #330066; /* darker blue */
border: 3px solid #400080;
border-radius: 10px;
text-align: center;

position: absolute;
top: 115px; left: 260px;
}

/* END NAV MOSTLY */

/* MAIN STRUCTURAL STUFF */

.leftcolumn {display: flex; flex-direction: column; margin: 0;}

.leftcolumn  {
width: 260px;
position:absolute;
left:145px; top:170px;
}

header {
margin: 0 auto 0 auto; 
width: 800px;
min-height: 110px;
position: absolute;
top: 0; left: 260px;

}

header h1 {
margin: 10px 0 0 0;
font-size: 68px;
text-align: center;
}

header h1, header h2, header h3, header h4 {color: #F5F5F5;}

header h3 {margin: 2px 0}

section {
z-index: 1;
margin-bottom:1em;
}

footer {
min-width:600px;
max-width:800px;
min-height:30px;
margin: 0 auto 1em auto;
padding: .5em;
text-align: center;

position:absolute;
top: 720px; right: 320px;
}

footer p {
color: #f5f5f5;
border: 2px dotted #f80455;
border-radius: 10px;
padding: 4px;
margin: auto;
text-align: center;
}

/* END MAIN STRUCTURAL STUFF */

#welcome {
min-height:150px;
padding: .5em;
background-color: #aa00aa; /* purple */
box-shadow: 5px 5px 5px #330066; /* darker blue */
border: 3px solid #400080;
border-radius: 10px;

width: 630px;
position: absolute;
left:415px; top:170px;
z-index: 2;
}

#evil {
background-image: url("/images/");
min-width:200px;
max-width:200px;
padding: .5em;
background-color: #aa0055; /* berry */
border: 2px solid #800040;
text-align: center;
align-self: end;
}

#updates {
min-width:200px;
max-width:250px;
max-height: 160px;
overflow-y: scroll;
background-color: white;
padding-left: .5em;
padding-right: .5em;
border: 1px solid black;
font: 12px monospace;
}

#updates p, #updates h3 {color: #000033;}

#updates span {color: #0000ff;}

#imood {font: 12px "MS Gothic", monospace; margin: 0 auto 0 auto;}

#imood p {color: white; border: 1px solid #f80455;}

#imood img {vertical-align: text-bottom; margin: 0;}

#chattable {
min-height: 230px;
width: 220px;
position: absolute;
left: 680px; top: 420px;
}

#buttons {
height: 31px;
width: 600px;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 685px; left: 380px;
}

/* GARDEN ENTRANCE */

#entrance {
background: radial-gradient(circle at 50% 75%, #ffe699 0%, 15%, #336600 50%, 65%, #1A3300 90%);
background-size: contain;
background-position: center;
background-repeat: no-repeat, no-repeat, no-repeat;
height: 225px;
width: 250px;
border: 2px solid #1A3300;

position: absolute;
left: 415px; top: 420px;
}

#entrance p {
text-align: center;
font-weight: bold;
z-index: 3;
position: absolute;
top:0; left:30px;
}

#entrance a {color: white;}

.leftree {
position: absolute;
left:0;
z-index: 2;
}

.rightree {
position: absolute;
right: 0;
z-index: 2;
}

.backleftree {
position: absolute;
left:50px;
z-index: 1;
animation-play-state: paused;
}

.backrightree {
position: absolute;
right: 50px;
z-index: 1;
}

#entrance:hover .backleftree { 
animation: backleftree 1s ease-out 1 forwards;
}

#entrance:hover .backrightree {
animation: backrightree 1s ease-out 1 forwards;
}

@keyframes backleftree {
  from {transform: translateX(0%);}
  to {transform: translateX(-3%);}
}

@keyframes backrightree {
  from {transform: translateX(0%);}
  to {transform: translateX(5%);}
}

/* END GARDEN ENTRANCE */

/* MARQUEE */

.marquee-container{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
overflow-y: hidden;
white-space: nowrap;
max-width: 88px;
height: 240px;
text-align: center;
border-top: 5px transparent;
border-bottom: 5px transparent;

position: absolute;
top: 415px; left: 915px;
z-index: 1;
}

.marquee-container border {filter: blur(5px);}

#marquee1 {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
animation: marquee1 30s linear infinite;
}


@keyframes marquee1 {
  from {transform: translateY(100%);}
  to {transform: translateY(-100%);}
}

#marquee1 a {margin: 0}
#marquee2 a {margin: 0}

#marquee1:hover, #marquee1:active {animation-play-state: paused;}
#marquee2:hover, #marquee2:active {animation-play-state: paused;}

/* END MARQUEE */

#dove {
position: absolute;
top: 450px; left: 1000px;
}