@import url(font-claro.css);
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: rgba(224, 231, 246, 0.32);
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #2C2C2C;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-bluegreen: #0097A9;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

:root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --section-gap: 60px;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);
    
    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
} 
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  min-height: 100vh;

  background: var(--color-background);
  transition: color 0.5s, background-color 0.5s;
  line-height: 1.6;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1{
    font-size: 64px;
    line-height: 1.1;
    font-weight: bold;
    font-family: "AMX Bold", "Roboto", sans-serif;
    color: var(--vt-c-black-soft);
}
h4{
    font-family: "AMX Medium", "Roboto", sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
    color: var(--vt-c-black-soft);
}
h5{
    font-family: "AMX Medium", "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 48px;
    color: var(--vt-c-black-soft);
}
hr{
    margin: 30px 0 50px 0;
}
.container{
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: auto;
    padding: 15px;
}
.thankyou {
    padding: 100px 20px;
    text-align: center;
    background: var(--color-background-soft);
    border-radius: 24px;
    color: var(--vt-c-black-soft);
    width: 100%;
}
.flex-center {
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}
.content {
    margin: auto;
    max-width: 800px;
    text-align: center;
}
.volver a{
    text-decoration: underline;
    font-family: "AMX Bold", "Roboto", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: var(--vt-c-bluegreen);
}
.volver {
    position: relative;
    margin-top: 80px;
}
.m-md {
    margin-top: var(--section-gap);
    margin-bottom: var(--section-gap);
}
@media (max-width: 768px) {
    h1{
        font-size: 40px;
    }
    h4{
        font-size: 24px;
        line-height: 30px;
    }
    .thankyou {
        padding: 60px 30px;
    }
    .volver a{
        font-size: 20px;
        line-height: 30px;
    }
    
}