@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Briem+Hand:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

:root {
   --fonte-destaque: 'Briem Hand', cursive;
   --fonte-padrao: Arial, Helvetica, sans-serif;
   --fonte-2: 'Crimson Text', Static;

   --cor0: #c5ebd6;
   --cor1: #83e1ad;
   --cor2: #2ddc84;
   --cor3: #2fa866;
   --cor4: #1a5c37;
   --cor5: #063d1e;
}

* {
   margin: 0px;
   padding: 0px;
}

body{
   background-color: var(--cor0);
   font-family: var(--fonte-padrao);
}

header {
   text-align: center;
   padding: 12px;
   color: white;
   background-image: linear-gradient(to top, var(--cor5), var(--cor4));
}

header h1 {
   font-family: var(--fonte-destaque);
   font-size: 35px;
   font-weight: normal;
   text-shadow: 3px 6px 8px black;
}

header p {
   text-shadow: 3px 6px 8px black;
   font-weight: bold;
}

nav {
   background-color: var(--cor5);
   padding: 8px;
   box-shadow: 0px 10px 7px rgba(0, 0, 0, 0.192);
   text-align: center;
}

nav a{
   color: var(--cor2);
   text-decoration: none;
   padding: 10px;
   border-radius: 5px;
   font-weight: bold;
   font-size: 0.9em;
}

nav a:hover {
   text-decoration: underline;
   color: var(--cor3);
}

main {
   background-color: white;
   min-width: 300px;
   max-width: 900px;
   margin: auto;
   margin-bottom: 20px;
   padding: 25px;
   box-shadow: 0px 2px 8px black;
}

main h1{
   background-image: linear-gradient(to right, var(--cor1), transparent);
   font-size: 1.6em;
   text-indent: 10px;
   padding: 2px;
   font-family: var(--fonte-2);
   border-radius: 6px 0px 0px 6px;
}

main h2 {
   background-image: linear-gradient(to right, var(--cor1), transparent);
   font-size: 1.6em;
   text-indent: 10px;
   padding: 2px;
   font-family: var(--fonte-2);
   border-radius: 6px 0px 0px 6px;
}

main p {
   padding: 15px;
   text-indent: 20px;
   text-align: justify;
   margin: 10px 0px;    
}

main img {
   padding: 5px;
   width: 300px;
   height: 400px;
   display: block;
   margin: auto;
   outline: 8px solid var(--cor5);
   background-color: var(--cor3);
}

.foto {
   text-align: center;
   padding: 40px;
}

footer {
   background-color: var(--cor5);
   color: white;
   padding: 10px;
   text-align: center;
   bottom: 0;
}