/* Site-PaulaPrieto */
:root{
  /* Mode 1 */
  /* color */
  --bg-color: #ffffff;
  --card-bg: #adadad;
  --text-color: #000000;}

  body.dark{

  --bg-color: #1b1b1b;
  --card-bg: #434343;
  --text-color: #f6f6f6;}

 

body{

    background-color:var(--bg-color);
    color: var(--text-color);
    font-family: Arial;}

.contenedor{

    width: 1440px;
    margin: auto;}

h1 {

    font-size: 130px;
    text-align: center;
    font-family: "Barriecito", system-ui;}

 .card{

    width: 20%;
    margin: 2%;
    height: 300px;
    background-color: var(--card-bg);
    float: left;}

@media (max-width:1024px){

.contenedor{

    width: 100%;}

 h1{

    font-size: 60px; }

.card {

    width: 100%;
    margin: 20px 0 50px 0;}}

#toggle {

   background-color: #0176DE;
   color: #ffffff;
   font-weight: bold;
   padding: 12px 24px;
   border: none;
   border-radius: 4px;
   font-size: 16px;
   display: block;
   cursor: pointer;
   transition: background-color 0.3s, transform 0.3s;}
   
#toggle:hover{

    background-color: #034b8a;
    transform: scale(1.05);}