:root {
  --color--primary--1: #36ADA3FF;
  --color--primary--2: #139CC0FF;
  --color--second--1: #26316FFF;
  --color--second--2: #2E7093FF;
  --color--complement--1: #686868FF;
  --color--neutral--black: #111224FF;
  --color--neutral--white: #FFFFFFFF;

  --base-metric: 4px;

  --metric-x1: calc(var(--base-metric) * 1);
  --metric-x2: calc(var(--base-metric) * 2);
  --metric-x3: calc(var(--base-metric) * 3);
  --metric-x4: calc(var(--base-metric) * 4);
  --metric-x5: calc(var(--base-metric) * 5);
  --metric-x6: calc(var(--base-metric) * 6);
  --metric-x7: calc(var(--base-metric) * 7);
  --metric-x8: calc(var(--base-metric) * 8);
  --metric-x9: calc(var(--base-metric) * 9);
  --metric-x10: calc(var(--base-metric) * 10);
  --metric-x11: calc(var(--base-metric) * 11);
  --metric-x12: calc(var(--base-metric) * 12);
  --metric-x13: calc(var(--base-metric) * 13);
  --metric-x14: calc(var(--base-metric) * 14);
  --metric-x15: calc(var(--base-metric) * 15);
  --metric-x16: calc(var(--base-metric) * 16);
  --metric-x17: calc(var(--base-metric) * 17);
  --metric-x18: calc(var(--base-metric) * 18);
  --metric-x19: calc(var(--base-metric) * 19);
  --metric-x20: calc(var(--base-metric) * 20);

  --rounded-x1: var(var(--metric-x1));
  --rounded-x2: calc(var(--metric-x1) * 2);
  --rounded-x3: calc(var(--metric-x1) * 4);
  --rounded-pill: 200px
}

body{
    font-family: "Roboto", sans-serif;
    background-image: url(../img/bg/bg-std.png);
    background-position: center left;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
header,
main,
footer{
    width: 100%;
    padding-top: var(--metric-x5) 0;
}

header img{
    width: 100%;
    max-width: 400px;
    height: auto;
}

/*
===================
Card 
===================
*/
.card-std{
    background-color: var(--color--neutral--white);
    border-radius: var(--rounded-x3);
    padding: var(--metric-x10) var(--metric-x8);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-std h1{
    color: var(--color--second--1);
    line-height: 1;
    font-weight: 900;
}

.card-std .subtitle{
    color: var(--color--neutral--white);
    background-color: var(--color--primary--2);
    display: inline-block;
    line-height: 1;
    padding: var(--metric-x3) var(--metric-x4);
    border-radius: var(--rounded-pill);
    margin-bottom: var(--metric-x1);
    font-weight: 500;
}

.card-std .description{
    color: var(--color--complement--1);
    font-size: 20px;
}

.card-std .data{
    color: var(--color--neutral--black);
    display: flex;
    flex-direction: column;
}

.card-std .data p{
    display: inline-block;
    margin-bottom: var(--metric-x3);
    padding-bottom: var(--metric-x3);
    border-bottom: 1px solid var(--color--complement--1);
}

.card-std .data img{
    width: var(--metric-x9);
}

.card-std .data a{
    text-decoration: none;
    
    color: var(--color--neutral--black);
}

/*
===================
Card 
===================
*/

/*
===================
Clock 
===================
*/

.clock {
    display: flex;
    justify-content: center;
    background-color: var(--color--second--2);
    padding: var(--metric-x4);
    width: 100%;
    max-width: 512px;
    position: relative;
    z-index: 10;
    border-radius: var(--rounded-x2);
    margin-bottom: var(--metric-x8);
}

.containerspans {
    display: flex
}

.clock span {
    color: var(--color--neutral--white);
    font-size: 50px;
    padding: 0 10px;
    font-display: optional;
    font-optical-sizing: auto;
    font-weight: 700;
    text-align: center
}

.clock span .small {
    font-size: 14px;
    margin: 0;
    font-display: optional;
    font-optical-sizing: auto;
    font-weight: 300;
}

.clock .puntos {
    position: relative
}

/*
===================
Clock 
===================
*/

/*
===================
Clock 
===================
*/

footer p{
text-align: center;
color: var(--color--neutral--white);
margin-bottom: var(--metric-x1);
    display: inline-block;
    width: 100%;
}

footer a{
    color: var(--color--neutral--white);
    text-decoration: none;
    display: inline-block;
}

footer img{
    vertical-align:middle;
    /* height: var(--metric-x5); */
}

/*
===================
Clock 
===================
*/

@media screen and (max-width:768px) {
    
    .clock,
    .clock-ms {
        justify-content: center
    }

    .clock span {
        font-size: 24px;
        padding: 0 10px
    }

    .clock span .small {
        font-size: 12px
    }

    .card-std{
        padding-left: var(--metric-x2);
        padding-right: var(--metric-x2);
    }
}

@media screen and (max-width:500px) {
    

    header img{
        width: 100%;
        max-width: 240px;
        height: auto;
    }
}

@media (max-width: 399px) {

    .clock,
    .clock-ms {
        flex-wrap: wrap
    }
}