/* Stylesheet for Main Page */

/* Classes */

.title2{
  display: flex;
  justify-content: center;
  text-align: center;

  color: var(--colorWhite);

  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;

  padding-top: 50px;
}

.tit2{
  display: inline;

  padding: 12px;

  min-width: 0;
  flex-shrink: 1;

  font-size: clamp(1rem, 4vh, 4rem);
}

.textVertical{
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  color: var(--colorWhite);

  text-align: center;

  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  font-size: clamp(1rem, 2vh, 2rem);
}

.textHorizontal{
  display: flex;

  align-items: center;
  justify-content: center;

  color: var(--colorWhite);

  text-align: justify;

  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  font-size: clamp(1rem, 2vh, 2rem);
}

.accentText{
  color: var(--accent);
}

.emphasisedText{
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;

  background: linear-gradient(90deg, var(--gradientStart) 0%, var(--gradientMid) 50%, var(--gradientEnd) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* For Firefox */
  background-clip: text;
  color: transparent;
}

.containedText{
  text-align: justify;
  font-size: clamp(0.8rem, 2vh, 2rem);
}

.image{
  display: flex;

  align-items: center;
  justify-content: center;
}

.imgProp{
  display: flex;
  position: absolute;

  transform: translateY(20%);

  filter: blur(10px);
  
  min-width: none;
  max-width: 50vw;

  z-index: -1;

  transition: ease 2s;
}

.linkFlavour{
  display: flex;

  justify-content: center;
  align-items: center;

  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  font-size: clamp(1rem, 1.5vw, 2rem);

  padding-top: 12px;
}

.p1{
  color: var(--colorWhite);

  padding: 12px;

  flex-shrink: 1;
  min-width: none;

  text-align: center;
}

.quickLinkP{
  display: flex;
  gap: 20px;

  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;

  text-align: center;

  justify-content: center;
  align-items: center;

  flex-wrap: wrap;
}

.quickLinkC{
  display: flex;
  justify-content: center;
  align-items: center;

  color: var(--colorWhite);
  background-color: var(--accent);
  background-color: var(--colorBlack);

  border-radius: 20px;
  padding: 18px;

  overflow: hidden;
  font-size: clamp(0.9rem, 0.9vw, 1.7rem);

  height: 40px;
  width: 130px;
  
  transition: ease 0.3s;
}

.containerGen{
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: flex-start;
  text-align: justify;

  padding: 20px;
  width: 69vw;
}

.container1{
  display: flex;
  flex-direction: column;

  background-color: var(--colorBlack);

  border-radius: 20px;

  padding: 20px;
  width: 69vw;
}

.container2{
  display: flex;
  flex-direction: column;

  background-color: var(--colorBlack);

  border: 1px solid var(--accent);
  border-radius: 20px;

  padding: 20px;
  width: 69vw;
}

.video{
  align-items: center;
  justify-content: center;
}

.videoC{
  align-items: center;
  justify-content: center;

  width: 69vw;
  aspect-ratio: 16 / 9;

  border-radius: 10px;
}

.embedNav{
  color: var(--color1);
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  transition: ease 0.2s;
}

.embedNav:hover{
  color:  var(--accent);
  text-decoration: 2px underline double var(--underline);
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;

  transition: ease 0.2s;
}

/* IDs */

#Spotify:hover{
  color: var(--colorWhite);
  background-color: var(--spotify);

  border-radius: 20px;
  padding: 23px;

  transition: ease 0.3s;
}

#Podcasts:hover{
  color: var(--colorWhite);
  background-color: var(--podcasts);

  border-radius: 20px;
  padding: 23px;

  transition: ease 0.3s;
}

#Youtube:hover{
  color: var(--colorWhite);
  background-color: var(--youtube);

  border-radius: 20px;
  padding: 23px;

  transition: ease 0.3s;
}

/* Nav Logic */

#nav1{
  color: var(--accent);
  text-decoration: 2px underline double var(--underline);
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: large;

  transition: ease 0.2s;
}

#nav5{
  margin-right: auto;
}