:root{
  font-size: 1vw;
  --card-color: #a76f53ff;
  --numberfontsize: 37px;
  --font-color: #fff;
  --text-bg-color: #567d7c;
  --border-radius: 10px;
  font-family: League Spartan;
  scrollbar-color: #a76f53 #fff;
  scrollbar-width: thin;
  
}
::-webkit-scrollbar-track, ::-webkit-scrollbar {
	background-color: #fff;} 

::-webkit-scrollbar-thumb {
    background-color: #a76f53;
    border-radius: 7px;
	}

@font-face {
  font-family: League Spartan;
  src: url(League_Spartan/LeagueSpartan-VariableFont_wght.ttf);
}
@font-face {
  font-family: Stalemate;
  src: url(Stalemate/Stalemate-Regular.ttf);
}

  .background {
    background-image: url(Background\ Image.png);
    top: 0;
    left:0;
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: -10;
  }

.intro {
  margin-top: 7vh;
  display: flex;
  justify-content: center;
  
  
}

.heading {
  background-color: var(--text-bg-color);
  color: var(--font-color);
  padding: 1vh 1vw 1vh 1vw;
  width: fit-content;
  border: 3px dashed white;
  border-radius: var(--border-radius); 
  box-shadow: 6px 6px 0 var(--text-bg-color), 0 -6px 0 var(--text-bg-color), 6px -6px 0 var(--text-bg-color), -6px 0 var(--text-bg-color), 0px 6px var(--text-bg-color);;
  margin-bottom: 0;
  margin-top: -3vh;
  min-height: 30vh;

}



.subheading {
font-family: Stalemate;
text-align: right;
font-size: 2.5rem;
margin-bottom: 0;
margin-top: -10%;
}

.instalink img {
max-width: 5rem;
transition: all 0.3s ease-in-out;
margin-top: 5%;
}
.instalink img:hover {
  transform: scale(1.3);
  }

  .container {
    list-style: none;
    column-gap: 1vw;
    padding: 0;
    column-count: 5;
    margin: 5vh 10vw 10vh 10vw;
    
  }

  @media (orientation: portrait) {
    .container{
    column-count: 3;}
  }
  @media (max-width: 500px) {
    .container{
    column-count: 2;}
  }