body {background-color: black; color: white; font-family: Verdana, sans-serif; font-size: 2rem; text-align: center; margin: 0rem;}

h1 {font-size: 2.7rem; margin: 0;}
h2 {font-size: 2.3rem; margin: 1rem 0 1rem 0;}
h3 {font-size: 1.8rem; margin: 1rem 0 0.4rem 0;}
p {font-size: 1.5rem; margin: 0;}

a:link {color: white; text-decoration: underline dotted;}
a:visited {color: white; text-decoration: underline dotted;}
a:hover {color: white; text-decoration: underline dotted;}
a:active {color: white; text-decoration: underline dotted;}

img {width: 85%; margin-top: 0%; margin-bottom: 0%;}

.grid1 {width: 85%; margin: auto;}
.grid1 img {width: 100%; display: none; object-fit: contain;}
.grid1 img.active {display: block; animation: simpleFade 0.4s ease-in;}
@keyframes simpleFade {from { opacity: 0; }
  to { opacity: 1; }}

.brands { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
}
.brands > div {background-color: white; display: flex; justify-content: center; align-items: center; height: 14.5vh; height: 14.5svh; min-height: 100px; overflow: hidden; padding: 2%;
}
.brands img {max-width: 90%; max-height: 90%;  object-fit: contain; width: 100%; height: 100%;
}