/* STYLING */
:root {
  /* change colors and fonts here */
  --main-text-color: rgb(253, 250, 250);
  --fontsize-h1: 3.5rem;
  --fontsize-h2: 1.4rem;
  --fontsize-h3: 1.3rem;
  --fontsize-p: 1.2rem;
  --link-color: rgb(107, 0, 168);
  --link-visitedcolor: rgb(49, 211, 0);
  --border-color: rgb(107, 0, 168);	
  --text-shadow: 1px 1px 2px rgb(147, 146, 146);
  --update-fontsize: .7rem;
}

a, a img {
  cursor: url(../images/favicons-pixels/googlyeyes.gif), auto;
}

* {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    outline: 0;
    scrollbar-color: rgb(107, 0, 168) black;
    font-family: "Jersey 25", sans-serif;
    cursor: url(../images/favicons-pixels/fishingrod.gif), auto;
}
/* STYLING END */
 
body {
    height: 100vh;
    background-color: black;
    place-items: center;
    align-content: center;
    text-shadow: var(--text-shadow);
    letter-spacing: .1;
}

/* Grid for page layout */
.main-grid-box {
  display: grid; 
  grid-template: 
    "header main"
    / 170px 1fr;
    padding: 5rem;
}

header {
  grid-area: header;
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: whitesmoke;
  border: 3px solid var(--border-color);
  border-radius: 20px;
  height: 10vh;
  margin-top: 1rem;
  overflow: hidden;
  font-family: "Jersey 25", sans-serif;
  text-transform: uppercase;
}

main p {
  grid-area: main;
  color: var(--main-text-color);
}

.main-info {
    display: flex;
    justify-content: center;
    margin: .5rem 1rem .5rem 1rem;
    text-align: center;
}

.main-list {
    display: grid;
    justify-content: center;
    border: dashed 3px var(--border-color);
    padding: 1rem;
    background-color: whitesmoke;
    border-radius: 20px;
}

.main-list p {
    color: black;
}

h1 {
    font-size: var(--fontsize-h1);
    font-weight: bold;
    text-transform: uppercase;
}

h2 {
    color: whitesmoke;
    font-size: var(--fontsize-h2);
}

h3 {
    font-size: var(--fontsize-h3);
    text-transform: uppercase;

}

p {
    font-size: var(--fontsize-p);
}

ul {
    display: grid;
    justify-self: left;
    padding-inline-start: 25px;
    padding-block-start: 5px;
    padding-block-end: 5px;
    line-height: 2rem;
}

ul, li {
    overflow-y: hidden;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 10vh;
    overflow: hidden;
}

footer > img {
    display: grid;
    align-content: center;
    scale: 110%;
}

.update {
  display: flex;
  justify-content: center;
  font-size: var(--update-fontsize);
  font-weight: lighter;
  margin: 0 0 5px 0;
}

a:link {
  color: var(--link-color);
}

a:visited {
  color: var(--link-visitedcolor);
}

ul a:hover {
    font-size: 1.6rem;
    transform: scale(1.1);
    filter: drop-shadow(1px 1px 1px rgb(162, 1, 255)) brightness(105%);
}

a img:hover {
    transform: scale(1.2);
    filter: drop-shadow(2px 2px 2px rgb(162, 1, 255)) brightness(105%);
}

.results {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}

@media (max-width: 768px) {
    
    header {
        margin: 1rem;
    }
    
    .main-list {
        margin: 1rem;
    }



}