/* Vars */

:root{
    --background: #131313;
    --color1: #614fb0;
    --color2: #332e97;
    --accent: #2265c0;
    --underline: #2ec967;
    --arrow: #e09749;

    --colorWhite: #e4e4e4;
    --colorBlack: #080808;

    --spotify: #1db954;
    --podcasts: #b150e2;
    --youtube: #ff0033;

    --gradientStart: #965dec;
    --gradientMid: #3c77da;
    --gradientEnd: #42bae2;
}

/* Text Formatting */

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

.quicksand-text {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.comingSoon{
  display: flex;

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

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

  color: var(--accent);

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

/* Main Components */

html{ 
  height: 100%; 
}

body{
  display: flex;
  flex-direction: column;
  
  margin-top: 100px;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;

  background-color: var(--background);

  height: 100%; 
}

a{
  text-decoration: none;
  color: var(--color1);
}

/* First Title of Page */

.title{
  display: flex;

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

  color: var(--colorWhite);

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

  padding-top: 20px;
}

.tit1{
  padding: 12px;

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

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

  filter: drop-shadow(0px 0px 15px var(--colorBlack));

  width: 90%;
}

/* Gradient Text */

#PDEText{
  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;

  text-decoration: 1px underline double var(--underline);

  transition: ease 2s;
}

/* Nav Bar */

.navBarContainer{
  position: fixed;

  width: 100%;

  top: 0;
  left: 0;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;

  flex-wrap: wrap;
  z-index: 999;
  background-color: var(--background);

  gap: 20px;
  
  padding-bottom: 20px;
  padding-top: 20px;

  border-image: linear-gradient(to right, var(--gradientStart) 0%, var(--gradientMid) 50%, var(--gradientEnd) 100%) 1;
  border-style: none none solid none;
  border-width: 0.5px;
}

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

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

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

  flex-shrink: 1;
  flex-grow: 1;

  padding: 20px;

  transition: ease 0.2s;
}

.navItem:hover{
  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;
}

.navItem:active{
  color: var(--underline);
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

#navLogo{
  align-content: center;
  width: clamp(5rem, 7vw, 7rem);
  margin-right: auto;
  transition: ease 0.2s;
  padding-left: 20px;
}

#navLogo:hover{
  width: clamp(6rem, 7.5vw, 8rem);
  transition: ease 0.2s;
}

/* Footer */

.footer{
  display: flex;

  background-color: var(--colorBlack);

  padding-top: 30px;
  padding-bottom: 30px;

  gap: 40px;

  padding-left: 40px;
  padding-right: 40px;

  flex-wrap: wrap;
}

.footerItem{
  display: flex;
  text-align: justify;
  flex-direction: column;
  gap: 10px;
}

.footerTitle{
  color: var(--accent);

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

  font-size: clamp(0.8rem, 1.2vw, 1.1rem);
}

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

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

  font-size: clamp(0.7rem, 1vw, 1rem);
}

#footerHoverable{
  text-decoration: none;

  transition: ease 0.2s;
}

#footerHoverable:hover{
  color: var(--color1);
  text-decoration: underline double var(--underline);

  font-size: clamp(1rem, 1.25vh, 1.45rem);

  transition: ease 0.2s;
}