/* Contact Page Style Sheet */

:root{
  --instagram: #833AB4;
}

/* Classes */

.text{
  text-align: center;

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

  color: var(--colorWhite);

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

  padding: 0px 20px 0px 20px;
}

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

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

  color: var(--colorWhite);
  font-size: clamp(1rem, 1.3vw, 1.4rem);
}

.containerC{
  padding: 20px;
  background-color: var(--colorBlack);

  border-radius: 20px;
  color: var(--colorWhite);

  transition: ease 0.3s;
}

.containerC:hover{
  padding: 22px;
  background-color: var(--accent);
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);

  border-radius: 20px;
  color: var(--colorWhite);

  transition: ease 0.3s;
}

.containerCInsta{
  padding: 20px;
  background-color: var(--colorBlack);

  border-radius: 20px;
  color: var(--colorWhite);

  transition: ease 0.3s;
}

.containerCInsta:hover{
  padding: 22px;
  background-color: var(--instagram);
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);

  border-radius: 20px;
  color: var(--colorWhite);

  transition: ease 0.3s;
}

.containerCM{
  display: none;
}

.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;
}

@media (max-width: 399px) {
  .containerC{
    display: none;
  }

  .containerCM{
    display: flex;

    padding: 20px;
    background-color: var(--colorBlack);

    font-size: clamp(0.9rem, 1.2vw, 1.3rem);

    border-radius: 20px;
    color: var(--colorWhite);

    transition: ease 0.3s;
  }

  .containerCM:hover{
    padding: 22px;
    background-color: var(--accent);
    font-size: clamp(1rem, 1.3vw, 1.4rem);

    border-radius: 20px;
    color: var(--colorWhite);

    transition: ease 0.3s;
  }
}

/* IDs */



/* Nav Logic */

#nav5{
  margin-right: auto;

  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;
}