/* 
#034D33 - dark teal
#3B0604 - dark red, text color
#3DB776 - light teal?
*/

body {
    background-color: #DDDDDD;
    background-image: url('img/sayaoverlaybg.png'), url('img/bg3.png');
    background-position: bottom 0px;
    background-repeat: no-repeat, repeat;
    color: black;
    font-family: Sylfaen;
   color: #3B0604;
   font-size:16px;
}

p {
   font-family: Sylfaen;
   color: #3B0604;
   font-size:16px;
}

a {
 color: #3DB776; 
 font-weight:bold;
 letter-spacing: 0.04em;
}

a:hover {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff ;
    font-style:italic;
    color:#1E8D52;
}

.green {
    color:#2DA263;
    font-weight:bold;
}

.content {
    width: 600px;
    margin-left:250px;
    border: 3px double #3B0604;
    padding: 10px;
    height: auto;
    background-color: #FFFFFF70;
    background-image: url('img/splatter.png');
    background-position: right 0px bottom 0px;
    background-repeat: no-repeat;
    box-shadow: 5px 5px 5px #00000030;
}

.linkbar {
    padding:0px;
    margin:0px;
    padding-bottom:10px;
    border-bottom:1px solid #034D33AA;
}

.quote {
    font-style:italic;
    color:#034D33;
    font-size:14px;
    border-bottom:1px solid #034D33AA;
    padding:10px;
    margin-top:0px;
    box-shadow: 0 0 5px #FFFFFF, 0 0 30px #FFFFFF90, 0 0 40px #FFFFFF30;
    background-color: #FFFFFF90; 

}

.intro {
    border-bottom: 1px solid #3B0604AA;
    padding-bottom:10px;
}



/* ----- MEDIA ------------------------------------------------------- */

@media screen and (max-width: 1000px) {
    .content {
        margin-left: 100px;
        width: 600px;
        background-color: #FFFFFFAA;
    }
}

@media screen and (max-width: 700px) {
    .content {
        margin-left: 0px;
        width: auto;
        background-color: #FFFFFFAA;
    }
}