/* 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." */
@import url('https://fonts.googleapis.com/css2?family=Sono:wght@200..800&display=swap');
@font-face {
  font-family: 'PARALELISMO ML';
  src: url('https://noramedia.neocities.org/fonts/PARALELISMOML.otf')format('opentype');
}
@font-face {
  font-family: 'Schlomo Stam';
  src: url('https://noramedia.neocities.org/fonts/ShlomoStam.ttf')format('truetype');
}

body {
  background-color: black;
  color: white;
  font-family: 'Sono', monospace;
}

footer {font-family: 'Shlomo Stam', monospace;
        font-size: 20px;
        text-align: center
}

h1 {
  font-family: 'PARALELISMO ML', 'Shlomo Stam', monospace;
  font-size: 50px;
}

h2 {font-family: 'PARALELISMO ML', 'Shlomo Stam', monospace;
  font-size: 40px
}

 /* unvisited link */
a:link {
  color: white;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: lightgrey;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: deeppink;
  text-decoration: none;
}

/* selected link */
a:active {
  color: darkgray;
  text-decoration: none;
} 

 /* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 100%;
  padding: 25px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: block;
} 
 /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 500px;
  }
} 

.border-button {
  box-shadow: 0px 0px 0px 0px deeppink;
  transition: box-shadow 0.6s linear;
  margin: 0.5em; /* Increased margin since the box-shado expands outside the element, like outline */
}

.border-button:hover { box-shadow: 0px 0px 0px 10px deeppink; }