@font-face {
  font-family: 'Scruffish';
  src: url('webfontkit/Scruffish.ttf');
  font-weight: normal;
  font-style: normal;

}

body {
  background-color: black;
}
  
#title-image {
  display: block;
  margin: auto;
  padding: 0vw;
  max-width: 48%;
  z-index: -12;
  position: relative;
}
  
#link-holder{
  display: flex;
  justify-content: center;
  margin: 0vw 0vw;
  padding: 0px;
}

.top-links:link,
.top-links:visited{
  font-size: 1.7vw;
  text-decoration: none;
  font-family: "Rubik Mono One", sans-serif;
  color: black;
  background-color: white;
  padding: 0vw 2vw;
  margin: 0.5vw 0.2vw;
  line-height: 4vw;
  border-radius: 100px;
  transition: color 0.2s;
  box-shadow: 2px 2px slategrey;
  position: relative;
}
  
.top-links:hover {
  color: lightslategrey;
}

.link-icon-holder{
  display: inline-block;
  margin: 0.25vw 0.0vw 2.0vw 0.0vw;
  padding: 0vw;
}

.icon-link{
  width: 5vw;
  height:5vw;
  border-radius: 4vw;
  background-color: white;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 2px 2px slategrey;
  filter: opacity(100%);
}

.icon-link:after{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 5vw; height: 5vw;
  border-radius: 4vw;
  background-color: rgba(112, 128, 144, 0);
  mix-blend-mode: screen;
  transition: background-color, 0.2s;
}

.icon-link:hover:after{
  background-color: slategrey;
}

.youtube{
  background-image: url("assets/YouTube.png");
}

.twitter{
  background-image: url("assets/Twitter.png");
}

.bandcamp{
  background-image: url("assets/BandCamp.png");
}

.patreon{
  background-image: url("assets/Patreon.png");
}

  
.bg-shape1 {
  display: inline-block;
  width: 500px;
  height: 500px;
  border-radius: 500px;
  position: fixed;
  top: 300px;
  right: 0;
  z-index: -1;
  border: 2px slategrey dashed;
}
.bg-shape2 {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 500px;
  position: fixed;
  top: 100px;
  left: 16px;
  z-index: -1;
  border: 2px slategrey dashed;
}
  
h2 {
  text-decoration: none;
  font-family: "Rubik Mono One", sans-serif;
  color: white;
  pointer-events: none;
}

.container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  position: relative;
}
  
.button {
  display: block;
  width: 30%;
  margin: auto auto 1%;
  padding: 2% 1% 18% 1%;
  height: 2vw;
  overflow: hidden;
  text-align: center;
  font-size: 4vw;
  backdrop-filter: brightness(0.5) hue-rotate(60deg) saturate(5.0);
  border: 2px white solid;
  border-radius: 4vw;
  text-shadow: 0px 0px 25px slategrey;
  transition: text-shadow, border, margin,
  background-color, 0.5s;
}

.button h2 {
  transform: rotate(-360deg);
  transition: 0.5s;
}
    
.button:hover {
  cursor: default;
  text-shadow: 0px 0px 50px white;
  border: 2px solid lightslategrey;
  background-color: slategrey;
}

.button:hover h2 {
  transform: rotate(360deg);
  transition: 0.5s;
}

.normal-link {
  cursor: pointer;
  margin: -100%;
  text-decoration: none;
  background-color: #00000000;
  font-family: "Scruffish", "Rubik", sans-serif;
  color: white;
  font-size: 2.75vw;
  letter-spacing: 0.25vw;
  line-height: 4vw;
  padding: 100% 100%;
  text-shadow: black 2px 2px 5px;
}

.latest-video {
  background-color: #525375ff;
  background-color: rgb(38, 50, 104);
  background-image: url("/assets/brackets\ gradient.png");
  background-size: 57vw;
  background-position: center;
  background-position-x: -12.5vw;
  background-position-y: -4.6vw;
  background-blend-mode: soft-light;
}

.trivia-padding {
  text-shadow: black 2px 2px 5px;
}

.soundtrack-news {
  background-color: #00000099;
  background-image: url("assets/GaryTheDuckTitle.png");
  background-size: cover;
  background-position: center;
  background-blend-mode: screen;
}

.temp-music-news {
  background-image: url("assets/ACTRCover.png");
  background-size: 40vw;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  opacity: 1.0;
}

.temp-right-mid {
  background-color: #00000063;
  background-image: url("assets/SkyColor1.png");
  background-size: cover;
  background-blend-mode: overlay;
}

.temp-pint-film {
  background-color: #00458863;
  background-image: url("assets/Abzu.png");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}

.botw-video {
  background-color: #00458863;
  background-image: url("assets/BOTWBackground.png");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}

.bottom-line {
  display: flex;
  width: 84%;
  border: 2px lightslategrey dashed;
  margin: auto;
  justify-content: center;
}