/* 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." */
/* // Properties and what they mean //


            // width: the width of an element.
            // position: the positioning of the element. 
                    ==> (w3schools.com/css/css_positioning.asp)
            // border: the border around an element. 
                    ==> (w3schools.com/css/css_border.asp)
            // margin-top: the distance of an element from the top of the page.
            // background-image: the background of an element.
            // font-family: the font used on the page.
                    ==> (https://www.w3schools.com/css/css_font.asp, custom fonts)
            // font-size: size of the font on the page.
            // text-decoration: the style of links / text.
                    ==> (https://www.w3schools.com/cssref/pr_text_text-decoration.php)
            // color: text color.
            // height: the height of an element. 
            // margin: the space around an element. 
                    ==> 0 (top) 0 (right) 0 (bottom) 0 (left)
            // text-align: specifies where the text is centered. 
                    ==> left, center, right. Remove and text will justify.
            // background: the background color of an element. 
                    ==> Can specificy background-image or background-color
            // padding: the space inside the element.     
            // object-fit: how an element is resized in regards to its container
                    ==> (https://www.w3schools.com/css/css3_object-fit.asp)
            //    
 */

/******************************

Essentials

******************************/

body{
    font-family:ms gothic;
    color:black;
    font-size:16px;
    background-color:white;
    background-image:
        linear-gradient(90deg, rgba(219,233,255,.5) 50%, transparent 50%),
        linear-gradient(rgba(219,233,255,.5) 50%, transparent 50%);
    background-size:30px 30px;
}


a{
    text-decoration:none;
}

#container{
    position:absolute;
    width:700px;
    left: 50%;
    margin-top:5px;
    transform: translateX(-50%);
    padding-bottom:20px;
} 

/* . . . . . . . . . . . . . . . . */    

#header{
    border:3px white ridge;
    border-bottom:none;
    /*background:#e1edff*/
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    background:white;
    background-size: cover;
    object-fit: fill;
    background-size: 100%;
    background-position: 50% 35%; 
    /*background-image:url('https://64.media.tumblr.com/f080e7fb4bd0113838da2a32ecaa2280/7e008ed7829d371b-c9/s500x750/d0d2ad7494d334e040a4b5b97e8ec477f006ebf0.png'); */
    height:310px;
}    

/* . . . . . . . . . . . . . . . . */        

#wrapper{
    /*border-top:none;*/
    border:3px white ridge;
    background:white;
    padding:10px;
    /*original height was 690px*/
}    

/* . . . . . . . . . . . . . . . . */        

#content{
}

/* . . . . . . . . . . . . . . . */      
#header-links{
    height:22px;
    font-weight:normal;
    font-family:times;
    background:linear-gradient(to bottom, #e1f2a5 15%, #ffffc2);
    color:#8bb8d2;
    letter-spacing:.5px;
    padding:5px;
}
/* . . . . . . . . . . . . . . . */      
#header-links:hover{
    color:{color:link button link hover};
    background:linear-gradient(to bottom, #e3f5ff 15%, #8ecef2);
}

/* audio player */

audio {
    width: 150px;
    opacity: .4;
    border-radius: 5px;
}

/* new div settings */

#horistack{
    display:inline-block;
    background-color: white;
    font-style: ms gothic;
    font-size: 15px;
    overflow:hidden;
    margin-top: 5px;
    margin-left: 0px;
    padding: 0 10px 0;
}

#section-box{
    border:2px pink dotted;
    margin:5px 0 5px 0;
}

#section-header{
    background-color:#eeeeee;
    color:#999999;
    font-weight:bold;
    padding:5px;
    border:2px dotted #eeeeee;
}

#section-content{
    padding:5px;
    text-indent: 20px
}

#section-content-horizontal{
    display:inline-block;
    padding:5px;
    margin-right:10px;
}

/* scrollbar */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #FFFACD; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ccff99; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #8ecef2; 
}

/* This adds 20 pixels of space around every image icons */
.image-icons img {
  margin: 20px; 
}