p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

div {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

body {
   min-height: 100vh;
}
b {
   color: var(--BoldColour, #ffffff);
   font-weight: 500;
}
hr {
  margin-top: 8px;
  margin-bottom: 8px;
}

.ErrorText {
    font-size: 6vw;
    stroke-width: 12px;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    text-align: center; 
    background-color: rgb(243, 73, 31);
    margin-left: 10%;
    margin-right: 10%;
    padding: 1.25%;
    border-radius: 2vw;
}
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    justify-items: center;
     transition-duration: 1s;
}

@media only screen and (max-width: 1200px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
     transition-duration: 1s;
  }
}

@media only screen and (max-width: 700px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
     transition-duration: 1s;
  }
}

  @media (pointer:none), (pointer:coarse) {

  .container {
    grid-template-columns: repeat(1, 1fr);
     transition-duration: 1s;
     padding: 10%;
  }
    }

.SelectionBox {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: clamp( 0.2vh, 0.3vh, 10vh) solid black;
    border-radius: 1vw;
    cursor: pointer;
    transition: transform 0.5s ease, box-shadow 0.5s ease, border 0.5s ease; /* transition goes here */
    margin: 2vh;
}



.BackgroundImage {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

/* Optional zoom on hover */
.SelectionBox:hover .BackgroundImage {
    transform: scale(1.05);
}

.Logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(100px, 30vh, 300px);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

/* Show logo on hover */
.SelectionBox:hover .Logo {
    opacity: 1;
    filter: drop-shadow(5px 5px 5px #ffffff);
}

.SelectionBox:hover .BackgroundImage{
     filter: blur(0.1vw);
}

.SelectionBox:hover {
    transform: translateY(-5px); /* makes it lift slightly */
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); /* better shadow syntax */
    border: clamp(0.2vh, 0.3vh, 10vh) solid  var(--BoldColour);
}



/* egg salad */

body {
  margin: 0;
  min-height: 100vh;

  
  background-blend-mode: screen;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: repeat;
  font-family: 'Inter', sans-serif;
  background: var(--BgndClr, radial-gradient(at top left, #343434, transparent 80%),
            radial-gradient(at top right, #343434, transparent 80%),
            radial-gradient(at bottom left, #343434, transparent 80%),
            radial-gradient(at bottom right, #343434, transparent 80%));
background-blend-mode: screen;
overflow-x: hidden;

}

/* Transparent icon grid overlay */
body::before {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("../Img/Rotation.png");
  transform: rotate(45deg);
  background-repeat: repeat;
  background-size: 8vw 8vw;
  opacity: 0.15;
  /*animation: drift 2s linear infinite;  you probably meant 200s not 200 */
  pointer-events: none;
  z-index: -1;
}

  @media (pointer:none), (pointer:coarse) {
body::before {
  content: "";
  position: fixed;
  top: -100%;
  left: -100%;
  width: 400%;
  height: 400%;
  background-image: url("../Img/Rotation.png");
  transform: rotate(45deg);
  background-repeat: repeat;
  background-size: 8vw 8vw;
  opacity: 0.15;
  /*animation: drift 2s linear infinite;  you probably meant 200s not 200 */
  pointer-events: none;
  z-index: -1;
}

.Logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(300px, 17.5vh, 600px);
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
     filter: 
        drop-shadow( 2px  0px 4px white) 
        drop-shadow(-2px  0px 4px white)
        drop-shadow( 0px  2px 4px white) 
        drop-shadow( 0px -2px 4px white);
}
}


.LogInBG {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("../Img/Rotation.png");
  transform: rotate(45deg);
  background-repeat: repeat;
  background-size: 8vw 8vw;
  opacity: 0.15;
  /*animation: drift 200s linear infinite; /* you probably meant 200s not 200 */
  pointer-events: none;
  z-index: -2;
}


@keyframes drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, -100%); }
}

.page {/* Keeps the footer at bay */
  display: flex;
    flex-direction: column;
    min-height: 100vh; 
}


/* Border Title*/

.TitleDivDrop {
    width: 100%;
    background-color: var(--BlockColour, #343434);
    height: fit-content;
     /*display: flex;*/
    align-items: center;
    margin-top: clamp(1vh, 1vw, 20px);
     box-shadow: 0px 0.25vw 0px rgba(0, 0, 0, 0.5); /* better shadow syntax */
    animation: slideDown 0.6s ease;

}

@keyframes slideDown {
    from { transform: translateY(-15px); opacity: 0.2; }
    to   { transform: translateY(0);    opacity: 1; }
}


.TitleDivDropText {
  padding: 3vw;
  align-self: center;
  font-family: 'Inter', sans-serif;
  font-weight:900;
  letter-spacing: 1px;
  color: var(--MainTextColour, #ffffff);
  text-align: left;
  font-size: clamp(1.6vh, 2vw, 4.5rem);
  margin-left: 5%;
  filter: drop-shadow(3px 3px 0px #000000);
}

.TitleDivDropSmall {
    width: 100%;
    background-color: var(--BlockColour, #343434);
    height:auto;
    align-items: center;
    margin-top: 20px;
      box-shadow: 0px 0.25vw 0px rgba(0, 0, 0, 0.5);
}

.TitleDivDropBody {
  font-family: 'Inter', sans-serif;
  font-weight:300;
  letter-spacing: 1px;
 color: var(--MainTextColour, #ffffff);
  text-align: left;
  font-size: clamp(1.2vh, 16px, 2vw);
margin-left: 2%;
margin-right: 2%;
  padding-top: 20px;
  padding-bottom: 20px;
 


}

.TitleDivDropBody img{
  transition-duration: 0.6s;
  object-fit: cover;
}

.TitleDivDropBody img:Hover {
  transition-duration: 0.6s;
  transform: scale(1.05);
  animation: scale 2 linear infinite;
}

.PDFViewer {
  margin-left: 20%;
    margin-right: 20%;
  width: 60%;
  height: clamp(60vh, 120vh, 800px);;
align-items: center;
 filter: drop-shadow(4px 4px 0px #000000);
 border: 2px solid hsla(0, 0%, 0%, 0.40);


border-radius: 4px;

}

.SideBorder {
   border-left: 6px solid var(--BoldColour, #ffffff);
   
}