/*  appearance - font pallette etc  kept separate from layout - positioning etc. The 
    thought being that I am more likely to want to change fonts and pallete than I 
    am positioning and block size. The latter pretty well demanded by the function
    they serve, having the title at the bottom or thee donation box before the story
    probably won't work.... 
*/

/* ----------------- Pallette and Font ---------------------------*/

*{
    margin:0;
}

header{
    background:black;
    color:whitesmoke;
}

#site-title{
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

#story{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height:1.5;
}

#story h2{
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height:1.5;
  margin-bottom:20px;
}

#story .lead{
    line-height:1.5;
    font-size:1.6rem;
    text-align:center;
}
#story .lead .subtext{
    font-size:1.3rem;
    padding-top:50px;
}

#story .general{
    line-height:1.5;
    font-size:1rem;
}

.dark-1{
    background:black;
    color:whitesmoke;
}

.light-1{
    background:lightgrey;
    color:black;
}

.dark-2{
    background:dimgrey;
    color:whitesmoke;
}

.light-2{
    background:whitesmoke;
    color:black;
}

#donations .section-header{
    background:black;
    color:whitesmoke;
    font-size:1.4rem;
}


#donations .section-header h2{

  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  font-style: normal;
  text-align:center;
}

#donations .blurb{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height:1.5;
}

#donations .crypto{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height:1.5;
}

#donations .crypto .wallet .detail p{
 font-size:0.8rem;
}

#end-quote p.quote{
  font-family: "Courier Prime", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size:1.8rem;
}

#end-quote p.citation{
margin-top:10px;
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  font-style: normal;
  font-size:0.8rem;
  text-align:right;
}


/* ----------------------- Layout --------------------------------*/

/* ------------ the title block ------------- */

#site-title{
    padding:70px;  
}

/* ------------ the story block ------------- */


#story div.container{
    max-width:1000px;
    padding:70px;
    margin:auto
}

#story>div.lead>.container{
    padding-top:20px;
}

#story div p.continuance{
    margin-top:20px;
}

#story div p.subtext{
    margin-top:20px;
    text-align:center;
}

#story div li{
    margin-top:20px;
}


/* ------------ the donation block ------------- */

#donations>.container{
    max-width:1000px;
    justify-self:center;
    align-self:center;
    padding:70px;
    margin:auto;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
}

#donations .section-header{   
    padding:70px;
    align-self:center; 
}

#donations .blurb{
    padding-top:20px;
    padding-bottom:20px;
}

#donations p.continuance{
    margin-top:20px;
}

#donations div li{
    margin-top:20px;
}

#donations h3{
    margin-top:20px;
}

#donations .cash{
    justify-self:center;
    align-self:center;
}

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

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

    #donations>.container{
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

   #donations .section-header{
        grid-column-start:1;
        grid-column-end:3;
    }

   #donations .blurb{
        grid-column-start:1;
        grid-column-end:2;
    }
}

@media only screen and (min-width: 900px) {

    #donations>.container{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
    }

    #donations .section-header{
        grid-column-start:1;
        grid-column-end:4;
    }

    #donations .blurb{
        grid-column-start:1;
        grid-column-end:3;
    }
}

/* ------------ crypto block ------------- */

/* qr codes */

#donations .crypto>.container{
    max-width:1000px;
    padding-top:70px;
    padding-bottom:70px;
    display:grid;
    grid-template-columns: 1fr;
    margin: 0 auto;
}

#donations .crypto .wallet{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding-bottom:20px;
}

#donations .crypto .wallet img{
    justify-self:center;
    padding:20px;
    width:160px;
}


#donations .crypto .wallet .detail{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-self:center;
    align-self:center;
}


#donations .crypto .wallet .detail p{
    width:180px;
    justify-self:left;
    align-self:center;
    overflow-wrap: break-word;
}


#donations .crypto .wallet .detail img{
    width:120px;
    padding:10px 20px 20px 10px;
}


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


}

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

    #donations .crypto{
        grid-column-start:1;
        grid-column-end:3;
    }

    #donations .crypto .wallet{  
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    #donations .crypto .wallet .detail{
        justify-self:left;
    }
 
    #donations .crypto .wallet .detail img{
        bottom:10%;
        left:20%;
    }

}

@media only screen and (min-width: 900px) {

    #donations .crypto{
        grid-column-start:1;
        grid-column-end:4; 
    }

    #donations .crypto>.container{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

     #donations .crypto .wallet{
        grid-template-columns: 1fr;
    }

    #donations .crypto .wallet .detail{
        justify-self:center;
    }

    #donations .crypto .wallet .detail p{
        justify-self:center;
    }
}



/* ------------ footer block ------------- */

#end-quote{
    padding:70px;
}

#end-quote .container{
    margin:auto;
    text-align:center;
    max-width:50rem;
}

#end-quote p.quote{
    text-align:center;
}

#end-quote p.citation{
    text-align:right;
}

#socials>.link{
    text-align:center;
}

#socials>.link.twitter img{
    width:20px;
}

#socials>.link.youtube img{
    width:25px;
}

#socials>.link a{
    display:inline-block;
    width:100%;
    height:100%;
    padding:20px;
}



/* --------------- debug ---------------*/

/*
header{
    border-style: solid;
    border-color: red;
}

main{
    border-style: solid;
    border-color: red;
}

div{
    border-style: solid;
    border-color: red;
}

footer{
    border-style: solid;
    border-color: red;
}


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

    #donations .crypto .wallet{
        background: red;
    }

}

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

    #donations .crypto .wallet{
        background: blue;
    }
}

@media only screen and (min-width: 900px) {

     #donations .crypto .wallet{
        background: green;
    }
}

*/