/* 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(125%) 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:75px;
    /*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;
}


/* accordion code ------------------------ */

.accordion {
  font-family: 'Helvetica-Neue', "Helvetica", Arial, sans-serif;
  background-color:rgba(252,254,255, 0.5);
  margin-top:15px;
  border-radius:10px;
  padding: 18px;
  cursor: url('images/aero_link.png'), auto;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  color:#516d8a;
  transition: 0.4s;
  font-weight:600;
  letter-spacing:0.04em;
}

.active, .accordion:hover {
  background-color: #edf9ff; 
}

.accordion:after {
  content: '+'; /* Unicode character for "plus" sign (+) */
  font-size: 16px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "-"; /* Unicode character for "minus" sign (-) */
}

.panel {
  padding: 30px 10px 5px 10px;
  margin-top:-40px;
  display: none;
  overflow: hidden;
  background-color:rgba(252,254,255, 0.3);
  border-radius:15px;
}
/* ---------------------------------------- */


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

.menu a {
}

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

a {
    color:#0043f8;
    transition: all 0.15s ease-out;
    cursor: url('images/aero_link.png'), auto;
}

a:hover {
    text-decoration:underline;
    transition: all 0.15s ease;
    color:#308aff;
}

a:visited {
    color: purple;
}

a:visited:hover{
    text-decoration:underline;
    transition: all 0.15s ease;
    color:MediumOrchid;
}

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

h3{
    font-size:14px;
}

#pageDesc
{
    width:750px;
}

#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;
}
/* ------------------ */


/* 88x31 button hover animations */
.bClick {
    transition:all 0.175s ease-in;
}

.bClick:hover { /* hover over 88x31 buttons */
    filter:brightness(110%) saturate(150%);
}
/* ---------------------- */


#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;
}

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

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

}

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

.artwork img {
    max-height:700px;
    max-width:700px;
}

.artwork p {
    max-width:650px;
}

.artwork {
    margin-bottom:55px;
    background-color:rgba(252,254,255, 0.5);
    padding:35px 15px 15px 15px;
    border-radius:15px;

}

/* --------------------------------------- */

.hoverImage {
    position: relative;
    display: inline-block;
    
}

.hoverImage .hoverable {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}



/* 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;
    }

    iFrame
    {
        max-width:300px;
    }

    #imgAct
    {
        width:300px;
        height:auto;
    }

    #splashImage
    {
        height:300px;
        width:auto;
    }

    #pageDesc{
        width:auto;
    }
    #hoverImgTop
    {
        max-width:300px;
    }

    .artwork img {
        width:100%;
        height:100%;
    }
    .artwork {
        padding: 10px 10px 10px 10px;
    }
    .menu {
        font-size:14px;
    }
}

@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%);
    }
}