body {
            font-family: sans-serif;
            line-height: 1.6;
            margin: 20px;
            background-color: #f4f4f4;
        }

        h2 {
            margin-top: 40px;
            color: #333;
            border-bottom: 2px solid #ddd;
            padding-bottom: 10px;
        }

       
        .cartao-basico {
            width: 250px;
            height: 150px;
            border: 2px solid blue;
            padding: 15px;
            background-color: #fff;
        }

       
        .botao-flutuante {
            display: inline-block; 
            border-radius: 8px;
            padding: 10px 20px; 
            box-shadow: 2px 2px 5px gray;
            background-color: #007BFF;
            color: white;
            text-decoration: none; /* Caso seja um <a> */
            cursor: pointer;
            margin-top: 10px;
        }

       
        .container-centralizado {
            width: 80%;
            min-height: 300px;
            margin: 0 auto; 
            border: 1px dashed black;
            background-color: #fff;
            padding: 10px;
        }

      
        .moldura-irregular {
            /* top right bottom left */
            margin: 10px 20px 30px 40px;
            /* top-left top-right bottom-right bottom-left */
            border-radius: 5px 50px 5px 50px;
            border: 1px solid #ccc;
            padding: 15px;
            background-color: #fff;
            display: inline-block;
        }

      
        .bloco-sombra-3d {
            width: 200px;
            height: 200px;
            border: 5px double black;
            /* horizontal vertical blur spread color */
            box-shadow: 8px 8px 0px #000;
            background-color: #ffcc00;
            margin-top: 10px;
        }

     
        .resetado p, .resetado ul {
            padding: 0;
            margin: 0;
            border: none; 
        }

        .resetado p {
            width: 400px;
            background-color: #eee;
        }

        .resetado ul {
            margin-top: 10px; 
            list-style-type: disc;
            margin-left: 20px;
        }

       
        .circulo-perfeito {
            width: 100px;
            height: 100px;
            border-radius: 50%; 
            margin: 20px; 
            background-color: orange;
        }

      
        .borda-4x {
            border-left: 5px solid black;
            border-bottom: 2px dotted black;
            border-top: none;
            border-right: none;
            padding-left: 15px; 
            background-color: #fff;
            padding-top: 5px;
            padding-bottom: 5px;
        }

       
        .card-sombra-interna {
            width: 200px;
            height: 100px;
            border-radius: 10px;
            /* Inset cria a sombra para dentro */
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
            margin-top: 50px; 
            background-color: #e0e0e0;
            padding: 15px;
        }

        
        .layout-colunas::after {
            content: "";
            display: table;
            clear: both; 
        }

        .coluna {
            float: left; 
            height: 400px;
            padding: 10px;
            border: 1px solid #ccc;
            
            box-sizing: border-box;
            background-color: #fff;
        }

        .coluna-1 {
            width: 30%;
        }

        .coluna-2 {
            width: 70%;
        }