/* CSS Demo Project */

/* ---------box sizing--------- */

html{
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  /* ---------responsive images--------- */

img {
    max-width:100%;
}

  /* ---------background images--------- */

  body{
    background-color: #fff;
    font-family: 'Quicksand', sans-serif;
    margin:0;
    background-image: url("../img/greenery.jpg");
    background-repeat: repeat;
    background-size: contain;
}

  /* --------utility styles-------- */

.container{
    width:80vw;
    margin:40px auto;
}

.img-right{
    float:right;
    margin: 10px 0 10px 20px;
    border: 4px double #20627d;
    padding: 5px;
}

.img-left {
    float:left;
    margin: 10px 20px 10px 0px;
    border: 4px double #20627d;
    padding: 5px;
}

.img-center {
    display: block;
    margin: 20px auto;
    border: 4px solid #20627d;
    padding: 5px;
}

  /* --------global styles-------- */
body{
    background-color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem;
    margin:0;
    line-height: 1.8;
}

h2 {
    color: #012030;
    font-size: 1.9rem;
}

header.primary{
    color:#ffffff;
    text-align:center;
    padding:30px;
    text-shadow: 2px 2px 10px #000000;
    background-color:#012030;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%239C92AC' fill-opacity='0.16'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

header.primary h1{
    font-size: 4.5rem;
    margin: 20px 0 10px;
}
/*you can add longhand or shorhand for different padding values*/

header.primary h1 a {
    color:#D8EBF2;
    text-decoration:none;
}

header.primary h2{
    font-size: 1.7rem;
    margin-bottom: 60px;
    color: #D8EBF2;
}

header.primary nav{
    max-width:900px;
    margin: 40px auto 20px auto;
}

header.primary nav ul{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 0;
}

header.primary nav ul li{
    list-style-type:none;
}
/*list-style-type with value none to remove bullets*/

header.primary nav a {
    color:#fff;
    font-size: 1rem;
    text-decoration:none;
    background-color:#000000;
    background-color:rgba(0,0,0,.4);
    padding:8px 16px;
    border-radius:9px;
    transition: .4s;
    border: 1px solid #DAFDBA;
}

/* We used background color to make the button partially transparent. rgba A stands for alpha*/


header.primary nav a:hover,
header.primary nav a:active
{
    background-color:rgba(0,0,0,.9);
}


#intro{
    padding-bottom:20px;
    background-color: #fff;
    padding: 40px;
}


#content {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    gap:20px;
    border-bottom: 1px solid #023859;
    padding-bottom:2.6rem;
}

#content article.post{
    box-shadow: 4px 4px 15px rgb(40, 117, 104);    
    padding:10px;
    font-size: 1.1rem;
    transition:.5s;
    background-color: #fbfbfbad;
  }

#content article.post:hover {
    box-shadow: 0 12px 8px rgba(0,0,0,.4);
    padding:10px;
    transition: .5s;
    background-color: #fbfbfbea
}

article.post figure {
    margin:0;
}

time.post-date, figcaption, .post-meta{
    text-transform:uppercase;
    color: #20627d;
    font-size: .8rem;
}

article.post img {
    border:solid 1px #50A0BF;
    padding:5px 10px;
    border-radius:2px;
}

article.post a {
    color: #023859;
    transition:.5s;
}

article.post a:hover{
    text-decoration: none;
}

/* Attribute Selector Example
a[target="_blank"]{
  color:red;
}
*/

#practice {
    background-color: #fff;
    padding: 40px;
}

#practice a {
    color:#023859;
}

#practice a:hover {
    text-decoration: none;
}

#practice h3{
    border-left:5px solid #20627d;
    padding-left: 10px;
    font-size: 1.4rem;
    color: #012030;
    margin-top: 40px;
}

#practice .blockquote-wrapper {
    display: flex;
    padding: 90px;
    margin: 40px;
    background-image: url("../img/blue-flower-pollinators.jpg");
 }

#practice blockquote {
    background-color: #012030;
    color: #fff;
    position: relative;
    padding: 80px;
    width: 100%;
    align-self: center;
    background-image: linear-gradient(180deg, #023859 25%, #13678A 100%);
    font-size: 2rem;
}

 /*copied some of this from  https://codepen.io/jupago/pen/dwZKbM 
 I removed the z-index bc not totally sure what it does for this block quote.*/

#practice blockquote:before {
    position: absolute;
    content: "“";
    font: quicksand;
    color: rgba(255, 255, 255, 1);
    font-size: 13rem;
    line-height: 0;
    top: 90px;
    left: 30px;
}

#practice blockquote:after {
    position: absolute;
    content: "”";
    font: quicksand;
    color: rgba(255, 255, 255, 1);
    font-size: 13rem;
    line-height: 0;
    bottom: 10px;
    right: 30px;
}

#practice cite {
    display: block;
    text-align: left;
    font-size: 1rem;
    margin-top: 6px;
}

#practice h4 {
    font-size: 1.2rem;
    color: #012030;
}

table {
    width: 100%;
    border: 1px solid #50A0BF;
    margin: 20px 0;
    border-collapse: collapse;
}

table th {
    background-color: #012030;
    color: #fff;
    padding: 10px;
}

table tr:nth-child(even) {
    background-color: rgba(0,0,0,.2);
}

table td {
    border: 1px solid #023859;
    padding: 6px;
}

table caption {
    font-weight:100;
    margin: 10px;
    /* visibility: hidden; is what you can use to remove the caption but still have the space.*/
}

table tr:hover {
    background-color: rgba(0,0,0,.4);
}

td:nth-child(n+2) {
    text-align: right;
}

dl {}

dt {
    font-weight:bold;
    color: #023859;
    font-size: 1.4rem;
}

dd {
    margin:0;
}

/* Adjacent Sibling Combinator*/
dd + dt {
    margin-top: 20px;
}

/* Attribute Selector Example
a[target="_blank"]{
  color:red;
}
*/

aside[role="complementary"]{ /*---another attribute selector ex---*/
    background-color: #012030;
    color:#fff;
    padding:40px;
}

aside .container{
    display: flex;
    flex-direction:row;
    gap:40px;
}

aside article.widget {
    background-color: #012030;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.07' fill-rule='nonzero'%3E%3Cpath d='M29 58.58l7.38-7.39A30.95 30.95 0 0 1 29 37.84a30.95 30.95 0 0 1-7.38 13.36l7.37 7.38zm1.4 1.41l.01.01h-2.84l-7.37-7.38A30.95 30.95 0 0 1 6.84 60H0v-1.02a28.9 28.9 0 0 0 18.79-7.78L0 32.41v-4.84L18.78 8.79A28.9 28.9 0 0 0 0 1.02V0h6.84a30.95 30.95 0 0 1 13.35 7.38L27.57 0h2.84l7.39 7.38A30.95 30.95 0 0 1 51.16 0H60v27.58-.01V60h-8.84a30.95 30.95 0 0 1-13.37-7.4L30.4 60zM29 1.41l-7.4 7.38A30.95 30.95 0 0 1 29 22.16 30.95 30.95 0 0 1 36.38 8.8L29 1.4zM58 1A28.9 28.9 0 0 0 39.2 8.8L58 27.58V1.02zm-20.2 9.2A28.9 28.9 0 0 0 30.02 29h26.56L37.8 10.21zM30.02 31a28.9 28.9 0 0 0 7.77 18.79l18.79-18.79H30.02zm9.18 20.2A28.9 28.9 0 0 0 58 59V32.4L39.2 51.19zm-19-1.4a28.9 28.9 0 0 0 7.78-18.8H1.41l18.8 18.8zm7.78-20.8A28.9 28.9 0 0 0 20.2 10.2L1.41 29h26.57z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 40px;
}

aside .container h2 {
    color:#fff
}

aside .container p {
    line-height: 2;
}

aside .container p a:last-of-type{
    color: #fff;
    display:block;
    text-align:right;
    margin-top:20px;
}

aside .container .widget footer{
    display:none;
}

#colophon {
    background: #023859;
    color: #fff;
    
}

#colophon h6 {
    padding:20px;
    margin:0;
    text-align:center;
}














  /* --------media queries-------- */

@media screen and (max-width:600px){

    header.primary nav ul{
        flex-direction:column;
        max-width: 250px;
        margin:auto;
        gap: 10px;
    }

    header.primary nav ul a{
        display:block;
    }
    
#content {
    flex-direction:column;
}

#content img {
    display:block;
    margin:auto;
}

aside .container {
    flex-direction:column;
    
}

}




/*----stuff to work on------*/

/* article images not centered.
too much space above global h2s....
What does my blockquote look like on mobile...
it doesn't appear my multiple column layouts are stacking...
get more familiar with margins and how my "block quot:before" absolute positioned quotes work
add a home icon
add hamburger menu*/


/* ---------------Poseidon Color Theme--------------------- */

/* Color Theme Swatches in Hex 
.Poseidon-1-hex { color: #012030; } Navy
.Poseidon-2-hex { color: #13678A; } 
.Poseidon-3-hex { color: #45C4B0; } mild teal
.Poseidon-4-hex { color: #9AEBA3; } light green
.Poseidon-5-hex { color: #DAFDBA; } light yellow green color pop 
*/

/* Color Theme Swatches in RGBA
.Poseidon-1-rgba { color: rgba(0, 32, 48, 1); }
.Poseidon-2-rgba { color: rgba(18, 103, 138, 1); }
.Poseidon-3-rgba { color: rgba(68, 196, 175, 1); }
.Poseidon-4-rgba { color: rgba(153, 234, 162, 1); }
.Poseidon-5-rgba { color: rgba(217, 252, 186, 1); }
 */

/* Color Theme Swatches in HSLA
.Poseidon-1-hsla { color: hsla(200, 96, 9, 1); }
.Poseidon-2-hsla { color: hsla(197, 76, 30, 1); }
.Poseidon-3-hsla { color: hsla(170, 52, 52, 1); }
.Poseidon-4-hsla { color: hsla(126, 66, 76, 1); }
.Poseidon-5-hsla { color: hsla(91, 94, 86, 1); }
*/



/* -----------Ocean color scheme------------ */ 

/* Color Theme Swatches in Hex
.ocean-1-hex { color: #023859; } darkest blue
.ocean-2-hex { color: #025373; }
.ocean-3-hex { color: #50A0BF; }
.ocean-4-hex { color: #96C6D9; }
.ocean-5-hex { color: #D8EBF2; } lightest blue
.ocean-color-pop { color: #DDFFBD; } green accent
*/

/* Color Theme Swatches in RGBA
.ocean-1-rgba { color: rgba(1, 55, 89, 1); }
.ocean-2-rgba { color: rgba(2, 82, 114, 1); }
.ocean-3-rgba { color: rgba(80, 159, 191, 1); }
.ocean-4-rgba { color: rgba(149, 197, 216, 1); }
.ocean-5-rgba { color: rgba(215, 234, 242, 1); }
*/

/* Color Theme Swatches in HSLA
.ocean-1-hsla { color: hsla(202, 96, 17, 1); }
.ocean-2-hsla { color: hsla(196, 96, 22, 1); }
.ocean-3-hsla { color: hsla(196, 46, 53, 1); }
.ocean-4-hsla { color: hsla(196, 46, 71, 1); }
.ocean-5-hsla { color: hsla(196, 51, 89, 1); }
*/

/* -----------Sunset color scheme------------ */ 

/* Color Theme Swatches in Hex
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-1-hex { color: #F2B6D7; }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-2-hex { color: #2C7BBF; }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-3-hex { color: #F2C288; }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-4-hex { color: #F29F80; }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-5-hex { color: #F27D72; }
.Its-Always-Sunny-on-My-SIde-1-hex { color: #FF2151; } HOT pink
*/

/* Color Theme Swatches in RGBA 
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-1-rgba { color: rgba(242, 181, 214, 1); }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-2-rgba { color: rgba(43, 122, 191, 1); }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-3-rgba { color: rgba(242, 194, 135, 1); }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-4-rgba { color: rgba(242, 158, 128, 1); }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-5-rgba { color: rgba(242, 124, 113, 1); }
.Its-Always-Sunny-on-My-SIde-1-rgba { color: rgba(255, 33, 81, 1); }
*/

/* Color Theme Swatches in HSLA
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-1-hsla { color: hsla(326, 70, 83, 1); }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-2-hsla { color: hsla(208, 62, 46, 1); }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-3-hsla { color: hsla(33, 80, 74, 1); }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-4-hsla { color: hsla(16, 81, 72, 1); }
.Beautiful-sunset-over-Lake-Superior-with-a-sail-boat-5-hsla { color: hsla(5, 83, 69, 1); }
.Its-Always-Sunny-on-My-SIde-1-hsla { color: hsla(0, 100, 56, 1); }
 */