/* Font Imports */  
@font-face {
  font-family: 'Grandstander';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/grandstander/v20/ga6fawtA-GpSsTWrnNHPCSIMZhhKpFjyNZIQD1--P3_ctw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* */
@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/comicneue/v9/4UaHrEJDsxBrF37olUeD96rp5w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Global Variables */  
:root {
  --bg-color: #1c0033;
  --bg-two: #160029;
  --secondary: #470024;
  --third-darkest: #5B1865;
  --primary-color: #f9f6e0;
  --header-color: #fff8c0;
}


/* Main CSS Themes*/  

body {
  background-color: var(--bg-color);
  color: var(--primary-color);
  font-family: 'Comic Neue';
  letter-spacing: 1px;
} 
.container {
  display: flex;
  margin: auto;
  position: relative;
  max-width: 1000px;
  min-width: 26em;
  flex-direction: row-reverse;
  z-index: 2;
  gap: 1rem;
}

main {
  margin: auto;
  min-width: 0;
  flex: 1;
  background-color:var(--bg-two);
  box-shadow: 0 0 1rem var(--secondary);
  border-radius:.5em;
  min-height: 100vh;
}
header {
  justify-content: center;
  a:link {
    text-decoration:none;
    color: var(--header-color)
  }
  a:hover{
    background-color: var(--third-darkest);
  }
}

h1 {
  display:flex;
  font-family: 'Grandstander';
  font-size: clamp(.5em, 5vw, 3em);
  justify-content: center;
}
h2 {
  display:flex;
  font-family: 'Grandstander';
  justify-content: center;

}
p {
  display:grid;
  justify-content: center;
  padding:1em
}

/*Grids w/ images 4 links*/
.photo-links {
  /*
  display:grid
  grid-template-columns: auto auto;
  */
  display:flex;
  flex-wrap: wrap;

  text-decoration: none;
  padding:0.1em;
  a:link {
    text-decoration:none;
  }

  img {
    flex:1 1 24em;
    border-radius: 1em;
    padding: .3em;
    width: 24em;
    transition: transform 0.3s ease;
  }
  img:hover {
    transform-origin: center;
    transform: scale(1.05);
  }

  justify-content: center;
}


/*Grids w/ images 4 links*/
.photo-cards{
  display:flex;
  flex-wrap: wrap;


  img {
    flex:50%;
    border-radius: 1em;
    padding: .3em;
    max-width:24em;
    height:100%;
    transition: transform 0.3s ease;
  }

  img:hover {
    transform: scale(1.5);
    box-shadow: 0 0 1em #160029;
    padding: 0em
  }

  justify-content: center;
}

.socials {
  justify-content: center;
}