:root{
    --back-color: #082237;
    --card-color: #7756c8;
    --code: #0B0C38;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  background-color: var(--back-color);
}

.card {
    background: var(--card-color);;
    padding: 3rem 4rem;
    border-radius: 1rem;
    font-family: system-ui;
    max-width: 90vw;

    @media (width < 600px){
        padding: 1.5rem 2rem;
    }

    & h1{
        margin-bottom: 2rem;
        margin-top: 0;
        font-size: 3rem;
        color: var(--back-color);

        @media (width < 600px){
            font-size: 2rem
        }
    }

    & .codigo{
        background-color: var(--code);
        padding: 0.5rem 1.5rem;
        border-radius: 1rem;
        
        @media (width < 600px){
            padding: 0.5rem 1rem;
        }

        & p{
            color: white;
            font-family: monospace;
            font-size: 2rem;
            word-break: break-all;

            @media (width < 600px){
                font-size: 1.25rem
            }

            &::selection {
                background: var(--card-color);
            }
            
            /* Firefox */
            &::-moz-selection {
                background: var(--card-color);

            }
        }
    }
}