/* Estilização de elementos comunus em toda a página */
:root {
  --color-blue: #072831;
  --color-dark-blue: #0728319f;
  --color-soft-blue: #66a3d2;
  --color-dark-gray: #333;
  --color-dark-pink: #c96567;
  --color-white: #fff;
  --color-blue-usa: #1a1361;
  --color-fern-green: #005e10;
  --color-bright-white: rgb(241, 242, 241);
  --color-flame-scarlet: #d90023;
  --color-yellow: #f9ff00;
  font-size: 62.5%;
  --gradiente: linear-gradient(to bottom right, #004d4d, #da0051);

  /* ]
  background: linear-gradient(to top, #ffcc33, #ff9966, #ff6699, #cc6699, #663399);

  to bottom right, #6A706E, #640125
  to bottom right, #3F826D, #da0050
  to bottom right, #041f1ed8, #640125
  to bottom right, #004d4d, #da0051

  to bottom right, #002626, #da0051

  to bottom right, #002626, #580023, #da0051

  linear-gradient(to bottom right, #114B5F,  #640126)

  linear-gradient(to bottom right, rgba(0, 38, 38, 1), rgba(218, 0, 81, 0.8))
  */
}

body {
  background: var(--gradiente); 
  color: #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


a {
  color: var(--color-white);
  cursor: pointer;
  text-decoration: none;
}

section {
  padding: 0 6%;
}

.base-social--address{
  
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 3rem;
}
.social__media--link {
  transition: all 0.7s;
}

.social__media--link:hover {
  transform: scale(1.5);
}

/* SCROLLBAR *********************************************************************  */

::-webkit-scrollbar {
  width: 12px;
  /* border: 5px solid white; */
}

::-webkit-scrollbar-thumb {
  background: var(--gradiente);
  background-clip: padding-box;
  /* border: 0.05em solid #eeeeee; */
  border-radius: 10%;
}

::-webkit-scrollbar-track {
  background: #e6e3e3;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #e6e3e3;
  display: block;
  border-style: solid;
  height: 13px;
  width: 12px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 6px 6px 6px; /* metade do width do single-button*/
  border-color: transparent transparent var(--color-blue) transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent var(--color-dark-pink) transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 6px 6px 0 6px; /* metade do width do single-button*/
  border-color: var(--color-blue) transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: var(--color-dark-pink) transparent transparent transparent;
}

/* ***************MEDIAS QUERIES ************************************************************ */
@media screen and (min-width: 0) {
  .about,
  .projects,.contact {
    margin-top: 3rem;
  }

  .base-paragraph{
    font-size: 1.4rem;
    padding: 1.2rem;
    text-align: justify;
    text-indent: 1.6rem;
  }

  .social__media--link{
    font-size: 2.8rem;
  }
}

@media screen and (min-width: 768px) {
  .about,
  .projects,
  .contact {
    margin-top: 7rem;
  }
}

@media (min-width: 1024px) {
  .base-paragraph {
    font-size: 1.9rem;
    padding: 1.7rem;
    text-indent: 1.9rem;
  }
    
  .social__media--link{
    font-size: 4.4rem;
  }
}