:root{
 --yellow: #BFBFBF;
 --red: #62120a;
 --paleYellow: #C2C2C2;
  --paleblue: #80A1C1;
  --green: #A1B9CE;
  --cream: #F6D8AE;
  --darkgrey: #252323;
      --BGgrey: #fff;
  --dark: #111;
  --light: #F5F5F4;
  --boxborder: 5px;
   --boxborderT: 4px;
  --ballborder: 6px;
  --ballborderSmall: 5px;
  --ballborderXSmall: 5px;
    --overlight: #FCA311;
        --overblood: #BFBFBF;
        --black: #000;
         --white: #fff;
         --grey: #FFF7EB;
}


@font-face {
  font-family: 'NordExpressNF';
  src: url(../fonts/NordExpressNF.woff);
}


@font-face {
  font-family: 'Montserrat-Black';
  src: url("../fonts/Montserrat-Black.ttf");
}

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

:hover{ 
  z-index:555555;
}

html {
  font-size: 1em;
  color: var(--dark);
  background-color: var(--BGgrey);
  text-align: center;
}
a {
  color: var(--dark);
}
svg:hover{
  background-color: var(--overblood);
}
h5:hover {
  background-color: var(--yellow);
}
h4:hover {
  background-color: var(--yellow);
}
h3:hover {
  background-color: var(--overblood);
}
h2:hover {
  background-color: var(--red);
}
li img:hover {
  border-color: var(--yellow);
}
li div:hover {
  border-color: var(--red);
}

canvas {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 75px;
}

.anarchy {
  position: absolute;
  visibility: hidden;
}
img {
  width: 200px;
  height: 200px;
  display: block;
  border-radius: 100%;
  border: var(--ballborder) solid var(--dark); 
}
.photoYellow img{
  width: 120px;
  height: 120px;
  border: var(--ballborder) solid var(--yellow); 
}

.photoYellow img:hover {
  border-color: var(--dark);}

  .photoYellowSmall img{
    width: 90px;
    height: 90px;
    border: var(--ballborderXSmall) solid var(--yellow); 
  }
  
  .photoYellowSmall img:hover {
    border-color: var(--dark);}

    .photoDarkSmall img{
      width: 90px;
      height: 90px;
      border: var(--ballborderXSmall) solid var(--dark); 
    }
    
    .photoDarkSmall img:hover {
      border-color: var(--yellow);}

.photoRed img{
  width: 120px;
  height: 120px;
  border: var(--ballborder) solid var(--red); 
}
    
.photoRed img:hover {
  border-color: var(--yellow);}

.photoSmall img{
  width: 120px;
  height: 120px;
  border: var(--ballborderSmall) solid var(--dark); 
}
    
.photoSmall img:hover {
  border-color: var(--yellow);}

.ballStore img{
  width: 120px;
  height: 120px;
  border: var(--ballborderSmall) solid var(--red); 
     background-color: var(--red);
}
    
.ballStore img:hover {
   background-color: var(--yellow);
border: var(--ballborderSmall) solid var(--yellow); 
}

#intro {
  font-size: 14px;
  width: 180px;
  padding: 10px;
  font-family: 'DM Sans', sans-serif;
  font-style:italic;
  background-color: #000;
  border: var(--boxborder) solid var(--black); 
  color: #fff;
}
h1 {
  font-family: Georgia, serif;
  font-size: 34px;
  width: 180px;
  height: 40px;
  background-color: #000;
  border: var(--boxborder) solid var(--black); 
  color: #fff;
}

h2 {
  width: 144px;
  height: 34px;
  padding-top: 14px;
  font-family: Georgia, serif;
  font-size: 19px;
  background-color: #000;
  border: var(--boxborder) solid var(--black); 
  color: #fff; 
}
h3 {
  max-width: 200px;
  min-width: 100px;
  padding: 8px 20px 8px 20px;
  font-family: Georgia, serif;
  font-size: 17px;
    background-color: #fff;
  border: var(--boxborder) solid var(--black); 
  color: #000;
}

h4 {
  width: 100px;
  height: 30px;
  padding-top: 14px;
  font-family: Georgia, serif;
  font-size: 17px;
  background-color: var(--white);
  border: var(--boxborderT) solid var(--black);
  color:#000; 
}

h5 {
  width: 54px;
  height: 30px;
  padding-top: 14px;
  font-family: 'Carter One', cursive;
  font-size: 17px;
  background-color: var(--white);
  border: var(--boxborderT) solid var(--black);
  color:#000; 
}

h6 {
  width: 200px;
  padding: 8px;
  font-family: Georgia, serif;
  font-size: 17px;
    background-color: #ddd;
  border: var(--boxborder) solid var(--black); 
  color: #000;
}

.howTo {
  padding: 10px 12px 10px 12px;
  font-family: Georgia, serif;
  font-size: 25px;
    background-color: var(--red);
  border: var(--boxborderT) solid var(--black); 
  color: var(--white);
}

svg {
  fill: var(--red);
  background-color: #fff;
  display: block;
  border-radius: 100%; 
}
li > div {
  width: 180px;
  padding: 10px 10px 0px 10px;
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-size: 13px;
  background-color:#ddd;
 /* background-image: url("../images/bg-quote.jpg"); */
  border: var(--boxborder) solid var(--black); 
  color:#000;
}
p {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  p {font-size: 15px;
  }
}

.scroll-down-right,
.scroll-down-right:hover{
    display: inline-flex;
    justify-content: center;
	align-items: center;
    text-decoration: none;
    color: var(--color-dark-1);
    animation: scroll-down-right 2s infinite ease-out;
		rotate:-90deg;
}

.newsletter-icon {
  fill: #fff;       
  background-color: var(--dark);
  display: block;
  border-radius: 100%;
}