@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
  --color--bg: #fafafa;
  --primary: #FA4450;
  --primary--dark: #E53E49;
  --secundary: #887589;
  --black: #1c1c1c;
  --color--font: #1c1c1c;
  --white: #ffffff;
  --gray: #dddddd;
  --gray--transparent: #dddddd30;
  --shadow--card: 0px 0px 5px 2px rgb(0 0 0 / 10%);
}

:root.--dark--mode {
  --color--bg: black;

}

* {
  padding: 0;
  margin: 0;
  vertical-align: baseline;
  list-style: none;
  border: 0;
  box-sizing: border-box;
}
html
{
  scroll-behavior: smooth;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color--font);
  margin-top: 72px;
  font-family: 'Roboto', sans-serif;
  background-color:var(--color--bg);
}

h1,
a {
  font-family: 'Ubuntu Mono', monospace;
  text-decoration: none;
}

.--container>h1 {
  text-align: center;
  margin-bottom: 64px;
  padding-top: 32px;
}

h2 {
  color: var(--secundary);
}

.--container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* preload */

.--preload
{
  display: none;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items:center;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--white);
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
}

.--loading
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.--loading img
{
  animation: spinner 1s infinite linear;
}

@keyframes spinner {
  100%
{
  transform: rotate(360deg);
}
}

/* navbar */

nav {
  position: fixed;
  top: 0;
  background-color: var(--black);
  color: var(--white);
  width: 100%;
  z-index: 1;
  padding: 16px 24px;
}

.--content--nav {
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.--content--nav img {
  width: 40px;
  height: 40px;
  border-radius: 24px;

}

.--link {
  color: var(--white);
  margin-right: 24px;
  padding: 8px 0;
  font-weight: bold;
  position: relative;

}

.--link::after {
  content: " ";
  position: absolute;
  left: 0;
  margin-bottom: 4px;
  width: 0%;
  height: 3px;
  bottom: 0;
  margin: 0 auto;
  background-color: var(--primary);
  transform-origin: left;
  transition: all .3s linear;
}

.--link:hover::after {
  width: 100%;
}

@media (max-width:500px)
{
  .--link {
    display: none;
  
  }
  
}

/* sociais */

.--sociais {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  gap: 20px;
  z-index: 1;
  border-radius: 0 8px 8px 0;
  box-shadow: var(--shadow--card);
  background-color: var(--black);
}

.--sociais i {
  font-size: 24px;
  padding: 8px;
  border-radius: 8px;
  color: var(--gray);
}


.--sociais i:hover {
  background-color: var(--gray--transparent);
  transform: scale(1.1);
  color: var(--white);
  cursor: pointer;
}

@media (max-width:500px)
{
  .--sociais i {
    font-size: 20px;
    
  }
 
  
}


#--btn-contact,
#--btn--cv,
#--emai--about {
  padding: 12px 24px;
  border-radius: 24px;
  color: var(--white);
  font-weight: bold;
  background-color: var(--primary);
}

#--btn-contact:hover,
#--btn--cv:hover,
#--emai--about:hover 
{
  transition: all .2s;
  background-color: var(--primary--dark);
}

/* home */

#--content--home 
{
  display: flex;
  align-items: center;
  gap: 64px;
}

.--content--text 
{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap:48px;
}

@media (max-width:850px)
{
  #--content--home 
  {
  flex-direction: column-reverse;
  align-items: center;
  }

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

}


/* about */
#--content--about {
  display: flex;
  align-items: center;
  gap: 48px;
}

#--content--about h2 {
  margin-bottom: 16px;
  margin-top: 24px;
  margin-left: 16px;
}

.--title
{
  font-size: 24px;
}

.--skill .--icon--skill {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 24px;
  margin-bottom: 8px;
}

.--icon--skill i {
  width: 30px;
  font-size: 30px;
  margin-bottom: 8px;
}

.--icon--skill span {
  font-weight: bold;
}

.fa-react {
  color: #61DBFB;
}

.fa-bootstrap {
  color: #6E2DC9;
}

.fa-figma {
  width: 30px;
}

.--card {
  background-color: var(--white);
  padding: 32px;
  border-radius: 7px;
  box-shadow: var(--shadow--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--white);
}

.--card img {
  width: 200px;
}

.--card ul {
  margin-top: 32px;
  margin-bottom: 32px;
}

.--card ul li {
  margin-bottom: 8px;
  font-weight: bold;
}

@media (max-width:600px)
{
  #--content--about 
  {
    flex-direction: column;
  }

  .--skills 
  {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 64px;
    
  }

  .--icons--skill
  {
    display: flex;
    flex-direction: column;
    column-gap: 32px;
  }

  .--skill .--icon--skill
  {
    margin-left: 0;
  }

  #--content--about h2
  {
    text-align: center;
    margin-left: 0;
  }

}

/* projects */
#--section--3
{
  background-color: var(--black);
  padding-bottom: 64px;
}

#--section--3 #--title--projects
{
  color: var(--white);
}

.--projects 
{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  padding: 0 32px;
}


.--project 
{
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  box-shadow: var(--shadow--card);
  background-color: var(--white);
  transition: all .2s;
} 

.--project:hover
{
  transform: translateY(-5px);
} 

.--project img 
{
 width: 100%;
 object-fit: cover;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
}



.--project h1
{
padding: 32px 0 16px 0;
} 

.--project p
{
padding: 0px 0 32px 0;
font-weight: bold;
}