/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: 'Helvetica-Neue'; src: url('HelveticaNeue-Regular.otf');
}

html
{
    cursor: url('images/aero_arrow.png'), auto;
    background: url("images/background-trees.gif") no-repeat center bottom;
    background-size: 100%;
    background-color:#d7eeff; 
}

body {
    font-family: 'Helvetica-Neue', "Helvetica", Arial, sans-serif;
    background: url("images/background-cloud.gif") no-repeat top;
    background-size: 100%;
    font-size: 18px;
    color:#516d8a;
    line-height:32px;
    overflow-x:hidden;
    letter-spacing:0.01em;
}

::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: #cfeeff;
}

::-webkit-scrollbar
{
	width: 8px;
	background-color: #cfeeff;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #6d91ad;
}

#titlesplash{
    font-size: 30px;
    text-align:center;
    padding-top:50px;
}

.logo{
    text-align:center;
    padding-top:50px;
    margin-bottom:-15px;
    transition: all 0.15s ease-in;
    width:200px;
    margin-left:auto;
    margin-right:auto;
}

.logo:hover {
    filter:brightness(109%) saturate(110%);
}

#jumpTop, #jumpTop a:visited{
    display:inline-block;
    background-color:#fff;
    font-size:24px;
    margin-top:50px;
    margin-bottom:30px;
    padding: 5px 10px 5px 10px;
    transition: all 0.15s ease;
    color:#516d8a;
    border:1px solid #516d8a;
    border-radius: 5px;
    text-decoration:none;
}

.authNote{
    font-size:14px;
    padding-left:6px;
    padding-right:6px;
    background-color:rgba(252,254,255,0.8);
    line-height:25px;
    border-radius:5px;
}

.new {
    vertical-align:middle;
    content:url("images/new.png");
}

.menu{
    font-family:monospace;
    font-size:16px;
    text-align:center;
    background-color:none;
    max-width:750px;
    margin:auto;
    padding-top:15px;
}

.text-links:after{
    content: attr(before);
}

.menu a, .menu a:visited {
    background-color:#fff;
    padding:2px;
    padding-left:6px;
    padding-right:6px;
    text-decoration:none;

    transition: all 0.15s ease;
    color:#516d8a;
    border:1px solid #516d8a;
    border-radius: 5px;
}

.menu a:hover, .menu a:visited:hover {
    text-decoration: none; !important
    transition: all 0.15s ease;
    color:#7799bd;
    border:1px solid #7799bd;
    border-radius: 5px;
}

.container {
    max-width:750px;
    margin:auto;
    margin-bottom:50px;
    /*padding:50px;*/
}

#splashImage{ /* for the images in each section (art, writing, garden) */
    max-width:400px;
    border-radius:15px;
}

.divBox {
    background-color:rgba(252,254,255, 0.5);
    padding:15px;
    border-radius:15px;
    margin-top:30px;
}

summary {
  cursor: url('images/aero_link.png'), auto;
}

hr{
    margin-top:20px;
    margin-bottom:20px;
    border: 1px solid #598891;
}

a {
    cursor: url('images/aero_link.png'), auto;
}

h1{
    padding-top:1em;
    font-size:20px;
    letter-spacing:0.04em;
}
h2{
    font-size:16px;
    letter-spacing:0.04em;
}

h3{
    font-size:14px;
}

#titlecaption{
    margin-top:5px;
    margin-bottom:0px;
    font-style:italic;
    text-align:center;
    font-size:16px;
}

/* buttons in art page */
.boxbutton {
    display:inline-block;
    font-size:15px;
    padding:15px;
    transition: all 0.2s ease-in;
}

.boxButtonImg {
    border-radius:10px;
}
/* ------------------ */

#titleimage{
    margin-top:5px;
    margin-bottom:10px;
    text-align:center;
    font-style:italic;
    font-size:20px;
}

#caption{
    margin-top:5px;
    text-align:center;
    font-size:16px;
}

.quote{ text-align:center;
    font-style:italic;
    font-family: "Times New Roman", Times, serif;
}

#imgDisp{
    display:block;
    max-width: 600px;
    margin: auto;
}

#imgCapt{
    font-size:14px;
    font-style:italic;
    text-align:center;
    padding-top:5px;

}

/* code for displaying art in art-20XX.html */

.artwork img {
    max-height:550px;
    margin-bottom:-10px;
}

.artwork {
    display: inline-block;
    padding:5px;
}

/* for mobile */
@media only screen and (max-width: 786px) {
    html, body
    { 
        height:100%;
        background: none;
        background-color:#d7eeff; 
        font-size: 16px;
        line-height:30px;
    }

    .container{
        margin: auto;
        border: none;
        padding: 0px;
    }

    h1 {
        font-size:18px;
    }

    h2 {
        font-size:16px;
    }

    #titlesplash{
        font-size: 26px;
    }

    img {
        max-width:100% !important;
        height:auto;
    }

    #splashImage {
        max-width:75% !important;
    }

    .menu {
        font-size:14px;
    }

    #jumpTop {
        font-size:18px;
    }

}

@media (hover: hover) and (pointer: fine) { /* hover animations for desktop (if on mobile , don't do animations) */
    .hoverImage:hover .hoverable{
        display: inline;
    }

    .arti-links:hover:after{
        content: " <---- " attr(data);
        font-size:16px;
    }
    .text-links:hover:after {
        content: attr(data);
        text-decoration:underline;
    }

    .shadowfilter {
            -webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
            -webkit-transition: all 0.25s linear;
            -o-transition: all 0.25s linear;
            transition: all 0.25s linear;
    }

    .shadowfilter:hover {
            -webkit-filter: drop-shadow(0px 0px 6px rgba(18, 136, 255, 0.8));
    }

    .boxbutton:hover {
        filter:sepia(100%) hue-rotate(160deg) saturate(300%);
    }
}