/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #3B004F;
  color: black;
  font-family: Verdana;
}

.genericbox {
  font-family: Comic Sans Ms;
  justify-content: center;
  background-color: #7B009E;
  color: white;
  margin: 40px;
  text-align: center;
  border-radius: 1%;
}

.genericbox a:link {
  color: #FFF700;
}

.genericbox a:visited {
  color: #B5AE00;
}

.grid-container {
  display: grid;                               /* Activates the grid layout */
  grid-template-columns: repeat(3, 1fr);       /* Creates 3 columns of equal fraction width */
  gap: 15px;                                   /* Sets space between rows and columns */
  padding: 10px;
}

.grid-item {
  background-color: #FFF600;
  color: #000000;
  border: 1px solid #949000;
  padding: 20px;
  text-align: center;
  border-radius: 5%;
}

.grid-item a:link {
  color: #1100FF;
}

.grid-item a:link img {
  border: 3px solid #1100FF;
}

.grid-item a:visited {
  color: #96008C;
}

.grid-item a:visited img{
  border: 3px solid #96008C;
}

#EMC {
  color: #FF0000;
  background-color: #260000;
  border: 8px solid #0D0000;
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.icon {
  height: 50px;
}

.interactable {
  transition: all 0.3s ease;  
}

.interactable:hover {
  transform: translateY(-10px) scale(1.05);  
}