/* CSS Project 2
by: Rachel Lincoln
Class: ITWP 1050 V0851 2023WI
Taking a basic newsletter and formating it with CSS to look like the example
*/

/*adding @font-face */

@font-face {
    font-family: "title font";
    src: url(.../webfont/calistoga-regular-webfont.woff);
    src: url(.../webfont/calistoga-regular-webfont.woff2);
    font-weight: normal;
    font-style: normal;
    /* Font-variant will not validate. I have tired a tutor, posting in help forum, and searching multiple times online. 
    I will commenting this out for this specificly for validation for my css file but I do understand what
    assigning a normal font using @font-face. */
    /*font-variant: normal;*/
}

/*adding body selector / using important tags*/
body{
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 90% !important;
    background-color: rgba(102,204,255,1);
}    
    
/*setting paragraph selector */
p{
    text-indent: 1em;
    line-height: 16px;
}

/*Setting h1 heading appearance*/
h1{
    font: 3em "title font", Arial, Helvetica, sans-serif;
    border: 1px solid  rgb(255,255,255);
    filter: drop-shadow(1px 1px 2px rgb(255,255,255));

}

/*Setting h2 heading appearance */
h2{
    background-image: url(.../images/mountain_bkgd.jpg);
    background-repeat: no-repeat;
    background-color: rgba(250,250,250,1);
    padding: 10px 10px 10px 10px;
    border: 2px solid rgba(0,0,0,1);
    font-variant: small-caps;
}

/*Setting h3 & h4 to normal font variant*/
h3,h4{
    font-variant: normal;
}

/*Setting fh5 to italicize and color*/
h5{
    font-style: italic;
    color: rgba(51,102,153,1);
}

/*Setting up Images */
img{
    float:right;
    margin: 10px 10px 10px 10px;
    border-left: 1px solid rgba(0,0,0,1);
    border-top: 1px solid rgba(0,0,0,1);
    border-bottom: 2px solid rgba(0,0,0,1);
    border-right: 2px solid rgba(0,0,0,1);
}

/*Setting up stateflag as a class */
.stateflag{
    float: left;
    border: 1px dotted  rgba(0,0,0,1);
    margin: 0px 15px 40px 0px;
}

/*Setting up logos as a class */
.logos{
    border: none;

}

/*Using Psudo code to change hyperlink appearances for the link, once it's clicked,
after its visited, and when the mouse hovers */
a{
    text-decoration: underline;
    color: rgba(0,0,0,1);
}

a:link{
    text-decoration: underline;
    color: rgba(0,0,0,1);
    font-weight: bold;
}

a:visited{
    text-decoration: underline;
    color: rgba(51,102,153,1);
    font-weight: bold;
}

a:hover{
    text-decoration: none;
    color: rgba(250,250,250,1);
    font-weight: bold;
}

a:active{
    text-decoration: underline;
    color: rgba(250,250,250,1);
    font-weight: bold;
}

/*Adding a class for copyright*/
.copyright{
    font-size: 9px;
    font-style: italic;
    text-align: center;
}

/*Adding parent selector of  bground color*/
blockquote{
    background-color: rgba(250,250,250,1);
}

/* adding child selector*/
blockquote > p{    
    color: rgba(51,102,153,1);
    background-color: rgba(250,250,250,1);
    padding: 5px 5px 10px 5px;
    }

/*Adding <hr> horizontal rule selector appearance */
hr{
    border: 1px solid rgba(0,0,0,1);
}