@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;1,300&display=swap");

/*******************
  GLOBAL EDITS
*******************/
html,
body {
  height: 100%;
  width: 100%;
  font-family: "Nunito", sans-serif;
  background: rgb(4, 4, 4);
}

h1 {
  text-align: center;
}


p,
h1,
h2,
h3,
h5,
li {
  color: white;
}

section {
  width: 100%;
}

@media screen and (min-width: 1200px) {
  section {
    height: 100%
  }
}

hr {
  color: purple;
}

footer {
  color: white;
  padding: 40px;
  background-color: black;
}

section {
  overflow-x: hidden;
}

.purple-bui {
  color: purple;
}

/*******************
  LANDING PAGE
*******************/

.landing-page {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 05)), url(../Images/buildings.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-color: black;
  height: 100vh;
}


.dash {
  display: block;
  width: 100px;
  height: 2.3px;
  background-color: rgba(128, 0, 128, 0.87);
  margin-bottom: 3px;
}

/*******************
  SKILLS PAGE
*******************/

.skills-page {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 05)), url(../Images/geometric-shapes.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-color: black;
}

.skill-category {
  text-align: center;
  background-color: rgba(7, 7, 7, 0.849);
  margin: 10px;
}

/* Borders of each card */
.languages-card {
  border: solid 2px rgb(255, 77, 0);
}

.webdev-card {
  border: solid 2px rgb(255, 0, 179);
}

.ml-card {
  border: solid 2px rgb(0, 255, 242);
}

.other-techs-card {
  border: solid 2px rgb(255, 238, 0);
}

.skill-icon {
  height: 45px;
  width: 45px;
}


.languages-card, ul.languages-cloud a {
  color: rgb(255, 77, 0);
}

.webdev-card, ul.webdev-cloud a {
  color:rgb(255, 0, 179);
}

.ml-card, ul.ml-cloud a {
  color: rgb(0, 255, 242);
}

.other-techs-card, ul.other-techs-cloud a {
  color:rgb(255, 238, 0)
}

/********************************TAG CLOUD**************************/
ul.cloud {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 2.5rem;
}

ul.cloud a {
  display: block;
  font-size: 1.5rem;
  padding: 0.125rem 0.25rem;
  text-decoration: none;
  position: relative;
}

ul.cloud a {
  --size: attr(data-weight number, 2); 
  font-size: calc(var(--size) * 1rem);
}

ul.cloud a[data-weight="1"] { --size: 1; }
ul.cloud a[data-weight="2"] { --size: 2; }
ul.cloud a[data-weight="3"] { --size: 3; }
ul.cloud a[data-weight="4"] { --size: 4; }
ul.cloud a[data-weight="5"] { --size: 5; }
ul.cloud a[data-weight="6"] { --size: 6; }
ul.cloud a[data-weight="7"] { --size: 7; }
ul.cloud a[data-weight="8"] { --size: 8; }
ul.cloud a[data-weight="9"] { --size: 9; }


ul.cloud a {
  --size: 4;
  font-size: calc(var(--size) * 0.25rem + 0.5rem);
  /* ... */
}

ul.cloud[data-show-value] a::after {
  content: " (" attr(data-weight) ")";
  font-size: 1rem;
}

ul.cloud a {
  opacity: calc((15 - (9 - var(--size))) / 15); 
}

/**********************************************************/

/*******************
  PROJECTS PAGE
*******************/


.project-card {
  margin: 30px;
}

/*******************
  EXPERIENCE PAGE
*******************/

.experience-page {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 05)), url(/Images/black-leaves.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-color: black;
}

.experience-card {
  background-color: black;
}


/*******************
  CONTACT PAGE
*******************/
.contacts-page {
  background-color: black;
  overflow-x: hidden;
  color: white;
}

.contact-icon {
  height: 30px;
  width: 30px;
}

.gmail,
.phone,
.location,
.other-links {
  display: flex;
}

.linkedin-icon,
.github-icon {
  display: inline-block;
  transition: 0.3s;
  position: absolute;
}

.linkedin-icon:hover,
.github-icon:hover {
  height: 37px;
  width: 37px;
}

.copyright-div {
  background-color: black;
}