* {
    margin: 0;
    padding: 0;
  }
  
  :root {
    --label-icon: url("https://caelum-online-public.s3.amazonaws.com/1369-alura-mais-dark-mode/lua.png");
    --trono-img: url("https://caelum-online-public.s3.amazonaws.com/1369-alura-mais-dark-mode/trono-preto.png"); 
  }
  
  .dark-mode {
    --bg-cor: black;
    --fonte-cor: #ffffff;
    --label-icon: url("https://caelum-online-public.s3.amazonaws.com/1369-alura-mais-dark-mode/sol.png");
    --trono-img: url("https://caelum-online-public.s3.amazonaws.com/1369-alura-mais-dark-mode/trono-branco.png");
  }
  
  body {
    background: var(--bg-cor);
    color: var(--fonte-cor);
    font-family: 'Cinzel', serif;
    font-size: 38px;
    user-select: none; 
    transition: 2s;
    user-select: none;
  }
  
  .container {
    height: 90vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .mudar-tema {
    position: absolute;
    top: 4%;
    left: 2%;
    background-image: var(--label-icon); 
    background-repeat: no-repeat;
    padding: 67px;
    cursor: pointer; 
  }
  
  #btn {
    display: none;
  }
  
  .trono {
    background-image: var(--trono-img);
    background-size: cover;
    background-position: center;
    width: 450px;
    height: 350px;
    margin-bottom: 10px;
    position:relative;
    padding: 0.1em;
  }