/* This is a CSS comment */

html, body {
    height: 100%;
    margin: 0;
}

.page-container {display: flex;
                 flex-direction: column;
                 width: 100vw;
                 height: 100vh;
}

.content-wrap {
flex-grow: 1;
max-width: 100%;
margin: 2% auto 4%;
padding-bottom: 20px;
box-sizing: border-box;
text-align: center;
height: 50%;
  align-content: center;
  width: auto;
}

header {
background-color: #fff;
padding: 15px;
text-align: center;
}

header > img {margin: 15px auto;}

footer {
    background-color: #fff;
    color: white;
    padding: 15px;
    text-align: center;
    margin-top: auto;
}

/* Selects all elements */

h1, h2, h3, h4, h5, h6, p, a{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

h1 {
  color: #000;
  font-size: 2em;
  line-height: 1.2em;
  font-weight: 400
}

h2 {
  color: #000;
  font-size: 1.5em;
  margin-bottom: 20px;
  font-weight: 200
}

p{text-align: center;
 font-family: sans-serif;
 line-height: 0.9em;
margin: 5% auto;}

hr {color: #b14125}

/* Selects a link when the mouse hovers over it */
a {color: #b24226; font-weight: bold; line-height: 1.5em; font-size: 1.05em}
a:hover {
  text-decoration: underline; /* Underlines the text */
  color: red; /* Changes the text color to red */
}

/*image responsice*/
img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.SRE {max-width: 30%}

/*cornice*/

#adv-round-rectangle{
border-width: 0px 12px 0px 12px;
border-style: double;
border-color: #b24226;
border-radius:40px 40px 60px 60px;
-moz-border-radius:40px 40px 60px 60px;
-webkit-border-radius:40px 40px 60px 60px;
padding: 2px 20px;
 }

 /*link styles*/
 .link {
     cursor: pointer;
     font-size: 18px;
     position: relative;
     white-space: nowrap;
     color: var(--color-text);
 }

 .link::before,
 .link::after {
     position: absolute;
     width: 100%;
     height: 1px;
     background: currentColor;
     top: 100%;
     left: 0;
     pointer-events: none;
 }

 .link::before {
     content: '';
     /* show by default */
 }


 .link--thebe {
     font-family: angie-sans, sans-serif;
     text-transform: uppercase;
 }

 .link--thebe::before {
     transform-origin: 100% 50%;
     transform: scale3d(0, 1, 1);
     transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
 }

 .link--thebe:hover::before {
     transform-origin: 0% 50%;
     transform: scale3d(1, 2, 1);
     transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
 }

 .link--thebe::after {
     content: '';
     top: calc(100% + 4px);
     transform-origin: 100% 50%;
     transform: scale3d(0, 1, 1);
     transition: transform 0.4s 0.1s cubic-bezier(0.2, 1, 0.8, 1);
 }

 .link--thebe:hover::after {
     transform-origin: 0% 50%;
     transform: scale3d(1, 1, 1);
     transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
 }


/*responsive*/
@media screen and (max-width: 600px) {
  /* Stili applicati solo a schermi con larghezza di almeno 768px */
  h1 {font-size: 1.2em}
}

/*animation*/