/* CoinBid style copied from coinsandhistory home page style  */
/* * - this is the universal selector - avoid using  */
* {
    margin: 1px;
    padding: 4px;
    /*  outline: solid black 2px;  */
    box-sizing: border-box;
    /* background-color: #eeedbb; - not in here bileous yellow */
    }


body {
    background-color: #e2e3e2;   /* e2e3e2 - soft matte silver,  d9d9d9- li grey  */
    color: #08045b;        /* govs color in text box :purple: only read there  */
	/* This needs a link to w3.css somewhere 1st?? --NOT Needed */
    -webkit-font-smoothing: antialiased;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-weight: 400;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    text-rendering: optimizeLegibility;
	  }

/* called in header  for 4 test boxes  */
.container{
    display: flex;
    flex-direction: row;
    margin: 0px;
    padding: 0px;
    /* justify-content: space-between; */
    justify-content: space-around;
    }

/* called in header  for 4 test boxes  */
.box{
    width: 15.0vw;  /*was 150px  */
    max-width: 280px; /* don't get bigger than this */
    aspect-ratio: 5/3;  /* seems to ignore  */

    /* height: auto;  */
    margin: 0px;
    padding: 0px;
    border: 2px solid hsl(22, 5%, 75%);
    border-radius: 12px;
    }

/*  the # is how call id's, hence id="box1" is set here as #box1 {} */
#box1{
    background-color: hsl(0, 80%, 60%); /* red */
    }
#box2{
    background-color: hsl(30, 80%, 60%); /* orange */
    }
#box3{
    background-color: hsl(122, 80%, 60%); /* green */
    }
#box4{
    background-color: hsl(222, 80%, 60%); /* blue */
    }

/* define all paragraph font for main pg */
/* <p> works ???  */
	p {
    color: black;
    background-color: transparent;
    text-align: center;
	  font-family: palatino;
    font-size: 1.0rem;
    margin: 0rem;
    padding: 0rem;
	   }

  p.note { background-color: rgba(88,190,238,0.03); /* purple translucent */
    font-size: .65rem;
    /* margin: 4 prop is Top R Bott L no , but spaces*/
      margin: 0.7rem;
    /* this is the proper format for all margins and padding  */
      padding: .2rem;
    /* outline: solid black 1px; */
    /* box-sizing: border-box;  */
      }

  p::first-letter {
              font-family: Georgia, serif;
/* font-family:  Luminary, fantasy; not allowd by Chrome */
              font-size:2.0rem; color: #1C3232;
              }

/* since all lettering is in the p, need to make adjs to that, not here in font */
 /* <p> DOES NOT WORK IN containers, Divs or anything important  */
   font {
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     padding: 5px;
     background-color: transparent;
     height: 0.9rem;
     }
     .auth {
       font-size: 0.6rem;
       color: #404404;
     }

/* should this be in HEAD ? - this is NOT HTML but CSS */
/*  make text shrink slightly on small screens:  */
     @media (max-width: 600px) {
       table td, table th {
         font-size: 0.85rem;
         padding: 1px;
       }
     }

footer	{
	float: clear;
	font-size: 50%;
	font-color: rgb(8,48,112);
	text-align: center;	}

  /* all Headers defined here  H1, H2, H3 responsive sizing */
  h1  { 	color: rgba(48,34,71,0.9);
   /* font-size: 2.8em;
   padding-left:10px;
   text-shadow: 3px 4px 4px rgba(61,9,9,0.8);	}  */

   font-size: clamp(1.7rem, 4.8vw, 6.0em);
   padding-left: 0.5em;
   text-shadow: 0.1em 0.15em 0.15em rgba(61,9,9,0.8);
    }

  h2  { 	color: rgba(32,44,71,0.9);
    /* font-size: 2.1em;
    padding-left:10px;
    text-shadow: 3px 2px 4px rgba(48,66,107,0.8); }  */

    font-size: clamp(1.2rem, 2.5vw, 2.2em);
    padding-left: 0.5em;
    text-shadow: 0.08em 0.12em 0.12em rgba(48,66,107,0.8);
     }

  h3  { 	color: rgba(71,36,40,0.9);
   /* font-size: 1.9em;
   padding-left:10px;
   text-shadow: 1px -1px 4px rgba(61,9,9,0.8);	}   */

   font-size: clamp(1.0rem, 2.2vw, 1.8em);
   padding-left:0.5em;
   text-shadow: .1em -.12em .12em rgba(61,9,9,0.8);	}

  h4  { 	color: rgba(32,44,71,1.0);
   font-size: 1.0em;
   padding-left:10px;
   text-shadow: 2px 2px 2px rgba(48,66,107,0.8); }

  h5  { 	color: rgba(32,44,71,0.9);
   font-size: 0.8em;
   padding-left:10px;  }

  h6  { 	color: rgba(32,44,71,0.9);
   font-size: 0.65em;
   padding-left:10px;  }


  img.coin {
    padding: .5rem;
    border:  0px;
    background-color: transparent;
    margin: auto;
    width: 200px;
    height: 200px;
      }
  img.coin:hover {
     opacity:  0.5;
        }
  img.other {
    padding: .5rem;
    border:  0px;
    background-color: transparent;
    margin: auto;
    width: 200px;
    height: 200px;
       }
  img.other:hover {
    opacity:  0.92;
       }

  img.cell-img {
    width: 30vw;    /* 20% of viewport width  */
    max-width: 350px; /* don't get bigger than this */
    aspect-ratio: 5/4;  /* 250/215 keeps image proportion  */
     /* width: 100%;  */
     /* height: 100%;   */
     text-align: center;
     object-fit: contain; /* keep proportions, may leave empty space */
     background-color: transparent; /* #D9D9D9 optional background behind transparent areas */
     /* display: block; */
     }