@charset "UTF-8";
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

:root {
  /*variaveis css*/
  --color-primary-light: rgba(102,153,153,1);
  --color-primary-dark: rgba( 13, 77, 77,1);
  --color-secondary: rgb(25,163,200);
  --gradient-image: linear-gradient(to right bottom,           
                    rgba(102,153,153, 0.817),
                    rgba( 64,127,127, 0.892));
  --gradient-background:linear-gradient(to right bottom, 
                            /* var(--color-primary-dark), */
                            var(--color-primary-light),
                            var(--color-primary-dark) 100%);
  --gradient-background-gold: radial-gradient(ellipse farthest-corner at right bottom, 
    #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top,
     #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); }

/*variáveis scss*/
html,
body {
  color: #FFF;
  font-family: 'Lato', sans-serif;
  font-size: 62.5%;
  /* 1rem = 10px*/
  font-weight: 100;
  text-rendering: optimizeLegibility;
  text-shadow: 5px 2px 8px rgba(25, 23, 23, 0.38); }

h1,
h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  text-align: center; }

h1 {
  font-size: 8rem;
  line-height: 8.5rem; }

h2 {
  font-size: 4rem;
  line-height: 4.5rem; }

p,
li {
  font-weight: 300;
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 1rem;
  text-align: justify;
  /* hyphens: auto; */ }

p {
  text-align: left;
  margin-bottom: 3rem; }

footer {
  font-size: .7rem; }

.paragraph-shout {
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: 3rem;
  text-align: center;
  transform: rotate(-0.5deg); }

.scratched {
  text-decoration: line-through; }

.header--handwritten {
  font-family: 'Caveat', cursive;
  font-size: 5rem;
  color: #FfF;
  text-align: center; }

.form--success {
  color: green;
  font-size: 2rem; }

.form--error {
  color: red;
  font-size: 2rem; }

/*
0-600px : phone
600 - 900px : tablet portrait;
900-1200 :tablet landscape
1200- 1800px where our styles apply
1800px+ big desktop;

*/
/*
- phone
- tab-port
- tab-land
- big-desktop
1 em = 16px
*/
.header {
  background-image: var(--gradient-image), url(/images/ivo_costa_08-2020PB.png);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  height: 90vh;
  padding: 5rem 1rem;
  position: relative;
  margin: auto; }
  .header--textbox {
    font-weight: 100;
    font-size: 9rem;
    text-align: center;
    position: absolute; }
    @media (max-width: 75em) {
      .header--textbox {
        left: 50%;
        transform: translateX(-50%);
        margin: auto; } }
  .header--hi {
    width: 50rem;
    text-align: left;
    margin: 10rem; }

html,
body {
  background: var(--gradient-background);
  background-size: cover; }

section {
  padding: 5rem 1rem;
  position: relative; }

footer {
  background-color: rgba(0, 0, 0, 0.35);
  padding: 10px;
  font-size: 1rem;
  text-align: center; }

h1, h2 {
  max-width: 35em; }

h1 {
  margin-top: 0;
  margin-bottom: 5rem; }

h2 {
  margin-top: 10%;
  margin-bottom: 5%; }

li {
  list-style: none; }

p a {
  text-decoration: none;
  color: #E1B12C;
  font-weight: 400;
  font-size: 110%; }

p a:hover {
  color: #fecf4d;
  font-size: 115%; }

.long_text {
  max-width: 172ch; }
  @media (max-width: 75em) {
    .long_text {
      margin: auto 0; } }

.center-txt {
  text-align: center; }

.section-about {
  background-image: var(--gradient-background);
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4);
  z-index: 2; }

.section-about h1 {
  margin-bottom: 12rem; }

.section-cv {
  background-image: var(--gradient-image), url(/images/ivo_costa.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center; }

.section-education {
  background-color: #407f7f;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4);
  text-align: center; }

.section-contact {
  text-align: center; }

.row {
  margin: 0 auto;
  text-align: center; }

.handwritten {
  font-family: 'Caveat', cursive;
  font-size: 50%; }

.observation {
  font-size: 1.5rem; }

.section-contact {
  display: block;
  text-align: center;
  margin: auto; }

.form {
  display: block;
  font-size: 2rem;
  text-align: center;
  margin: 0 50%;
  transform: translate(-50%, 0);
  width: 30%; }
  @media only screen and (max-width: 37.5em) {
    .form {
      margin: auto 0;
      transform: translate(0, 0);
      width: 100vw;
      font-size: 8rem; } }

input,
textarea {
  color: #797878;
  display: block;
  font-family: inherit;
  text-align: center;
  margin: auto;
  font-size: 2rem;
  width: 300px;
  border-radius: 5px;
  border: 1px solid rgba(38, 39, 39, 0.82);
  border-style: outset;
  border-width: 2px 0 0 1px; }
  input:focus,
  textarea:focus {
    outline: none;
    border: 3px solid #aa8439;
    text-align: left; }
  @media only screen and (max-width: 37.5em) {
    input,
    textarea {
      width: 90vw; } }

input {
  height: 50px; }

textarea {
  height: 150px; }

input[type=submit] {
  background-color: #aa8439;
  border-color: #bc921c;
  border-width: 0px 2px 3px 0px;
  box-shadow: 3px 1px 4px rgba(25, 23, 23, 0.38);
  color: #FFF;
  font-family: 'Poiret One', cursive;
  font-size: 3rem;
  height: 4.5rem;
  margin-top: 10px; }
  input[type=submit]:hover {
    background-color: #d4b16a;
    border-width: 0px 3px 5px 0px;
    transform: translateY(-3px);
    border-radius: 8px; }
  input[type=submit]:active {
    border-width: 0px 0px 0px 0px;
    color: #DB8;
    transform: translateY(3px); }
  @media only screen and (max-width: 37.5em) {
    input[type=submit] {
      width: 25vw;
      height: 6rem; } }

.card {
  background-color: rgba(102, 153, 153, 0.8);
  box-shadow: 2px 4px 8px rgba(0, 50, 100, 0.6);
  border-radius: 20px;
  width: 70%;
  margin: 10px auto 0 auto;
  padding: 2rem 5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center; }
  @media (max-width: 75em) {
    .card {
      width: 80%; } }
  @media (max-width: 56.25em) {
    .card {
      width: 90%; } }
  @media only screen and (max-width: 37.5em) {
    .card {
      width: 100%; } }

.card-2 {
  width: 70%;
  margin: 10px auto 0 auto;
  padding: 2rem 5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center; }
  @media (max-width: 75em) {
    .card-2 {
      width: 80%; } }
  @media (max-width: 56.25em) {
    .card-2 {
      width: 90%; } }
  @media only screen and (max-width: 37.5em) {
    .card-2 {
      width: 100%; } }

.card-content {
  display: flex;
  flex-wrap: wrap;
  align-content: center; }

/*Setup*/