@charset "UTF-8";
/* CSS Document */
/* THIS IS WHERE YOU CALL YOUR GOOGLE FONTS */
@import url(https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Quattrocento:wght@400;700&display=swap);
/* -- DECLARING COLOUR & TEXT VARIABLES FOR USE THROUGHOUT THE CSS -- */
/* -- SEE https://www.w3schools.com/css/css3_variables.asp FOR EXPLANATION OF VARIABLES -- */
:root {
  --bgc: rgba(255, 253, 249, 1);
  --textc: rgba(44, 43, 51, 1);
  --textsm: rgba(44, 43, 51, .5);
  --titlesm: rgba(44, 43, 51, 1);
  --bodyfont: "Quattrocento", serif;
  --leaderfont: "Fira Sans Condensed", sans-serif;
  --titlefont:"Playfair Display SC", serif;
  --smfont:"Lora", serif;
}

body {
  margin: 0;
  font-family: var(--bodyfont);
  color: var(--textc);
  font-weight: 300;
  font-style: normal;
  font-size: 1rem;
  background-color: rgb(237, 145, 145);
}
a img:hover {
  opacity: 0.75;
  rotate: 5deg;
}
/* -- HEADER -- */
.topnav {
  font-family: var(--titlefont);
  background-color: rgb(237, 145, 145);
  box-shadow: 1px 1px 4px 0 purple;
  position: fixed;
  width: 100%;
  z-index: 3;
  /*font-size: 1.74rem;*/
  padding: 0 10px;
}
.topnav #title {
  max-width: 1400px;
  margin: 0 auto;
}
/*-- MULTI-COLUMN CONTAINER AND ITEMS --*/
.item-container {
  max-width: 1400px;
  margin: 0 auto;
  /* -- THIS NEXT LINE LETS THE BODY SITS BELOW THE HEADER -- */
  padding: 220px 20px 0;
  /* -- THIS NEXT LINE MAKES THE BODY FULL HEIGHT MINUS THE HEADER PADDING -- */
  height: calc(100vh - 160px);
}
.item {
  box-sizing: border-box;  
  padding: 20px;
  /*margin-bottom: 20px;*/
}
.small{
  font-family: var(--smfont);
  font-size: 1rem;
  color: var(--textsm); 
  margin-bottom: 20px;
}
.titlesmall{
  font-family: var(--smfont);
  font-size: .75rem;
  color: var(--titlesm); 
  margin-bottom: 10px;
}
hr {
  width: 100%;
  /* note - no colour added, but you can using "border-top" -- */
  /* border-top: 1px dotted red; */
}
.subtitle {
  font-family: var(--titlefont);
  font-weight: 700;
  font-size: 2.25rem;
}
.leader {
  font-family: var(--leaderfont);
  font-weight: 300;
    font-size: 1.5rem;
}

#backbutton {
  color: white;
  text-decoration: none;
  padding: 26px;
}

.holographic-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
}

.holographic-card {
width: 100px;
height: 55px;
background: #111;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border-radius: 15px;
transition: all 0.5s ease;
}

.holographic-card h2 {
color: #0ff;
font-size: 2rem;
position: relative;
z-index: 2;
}

.holographic-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
  0deg, 
  transparent, 
  transparent 30%, 
  purple
);
transform: rotate(-45deg);
transition: all 0.5s ease;
opacity: 0;
}

.holographic-card:hover {
transform: scale(1.05);
box-shadow: 0 0 20px purple;
}

.holographic-card:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
}

/* -- MEDIA QUERY -- */
/* 48em = 768px */
@media (min-width: 48em) {
  /*-- GRID STYLING FOR BODY CONTENT --*/
  .item-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 0px;

  }
}