/* style.css */

/* CSS VARIABLES  */
:root {
  --red: red;
  --yellow: yellow;
  --blue: #1e90ff;
  --white: #ffffff;
  --idlecolor: black;
  --idlebg: white;
  --hovercolor: black;
  --hoverbg: silver;
  --activecolori: white;
  --activebg: black;
}

* {
}

body {
  margin: 5rem;
  margin-top: 0rem;
}
 
/* ELEMENTS */

body {
  font-family: sans-serif;
  background-color: white;
  color: black;
}

h1,h2,h3,h4,h5,h6 {
        text-align: center;
}

div {
  max-width: 75ch;
  margin: auto;
}

p{
  text-indent: 0em;
  margin-right: 1em;
}

/* emphasize <dt> */
dt {
        font-weight: bold;
}

img {
        max-width: 100%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        border-radius: 10%;
}

figure {
        margin-left: 0px;
        margin-right: 0px;
        border: 5px solid;
}

figcaption {
        text-align: center;
        font-weight: bold;
}
hr {
        height: 1px;
        color: black;
        background-color: black;
}

button {
  font-size: inherit;
  width: auto;
  width: 100%;
}

/* PSEUDO-ELEMENTS */

:hover { /* a:acive must precede a:hover */
}

:active {
}

/* CLASSES */

.maxW {
  max-width: none;
}

.maxW75 {
  max-width: 75ch;
}

/* don't underline ^ in ref links */
.ref{
        text-decoration: none;
}

/* float text around figures */
/* width: top, right, bottom, left */
.floatright {
        float: right;
        /* border: 10px, 0px, 10px, 15px; */
        width: 45.0%;
}

.floatright30 {
        float: right;
        /* border: 10px, 0px, 10px, 15px; */
        width: 30.0%;
}

.floatleft {
        float: left;
        /* border: 0px, 0px, 0px, 30px; */
        width: 30.0%;
}

.row::after {
          content: "";
          clear: both;
          display: table;
}

.col10 {
}

[class*="col-"] {
    float: left;
    border: 0px solid;
}
.col-0 {width: 4.165%;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* create a class of left-aligned <hn> */
.left {
    text-align: left;
    }

.center {
  text-align: center;
  margin-top : 10px;
  margin-bottom: 10px;
}

.right {
  text-align: right;
}

/* PSEUDO-CLASSES */
/* selector:pseeudo-class {} */
a:active, button:active  {
  background-color: white;
  color: black;
}

a:hover, button:hover{
  background-color: grey;
  color: white;
}

/* ESOTERICA */

/* --var datatype */

/* add external link symbol by using selector */
/*
a[target="_blank"]:after {
        content: " (external link)";
}
*/

/* support RWD */
/* # {
    box-sizing: border-box;
}
*/

/* TECNIQUES *******************/


/* W3C says breakpoints are 600px, 768px, 992px, 1200px */
/* phone (portait), tablet, laptop, desktop, large desktop */
/* when viewport is narrower than 500px, do this */
@media only screen and (max-width: 500px){ 
        .hideifphone{ display: none; }
        }

/* @media only screen and not (max-width: 500px){ 
        .isnotphone{ display: none; }
} */

@media only screen and (min-width: 500px){ 
        .hideifnotphone{ display: none; } 

}

/* legacy naming convention */
@media only screen and (min-width: 500px){ 
        /* .hideifphone{ display: none; } */
}

/* for tablets and landscape samrt phones 501 - 768*/
/* when vp wider than 500 and narrower than 768*/
@media only screen and (min-width: 501px) and (max-width: 768px){ 
        .no_tablet{
                display: none;
        }
}

@media only screen and (max-width: 501px) and (min-width: 768px){ 
        .istablet{
                display: none;
        }
}

/* for monitors wider than 768*/
@media only screen and (min-width: 768px){ 
        .nomonitor{
                display: none;
        }
}

@media only screen and (max-width: 768px){ 
        .ismonitor{
                display: none;
        }
}

/* END *************************/