#container {max-width:1220px;
            min-width:720px;
            padding: 15px;
            margin: 10px auto 10px auto;
        ;
}

li {display: inline;
    margin:0px 5px;}

h1 {font-family:"Dynapuff", system-ui;
    text-align: center;
    color:#BFB48F;
    text-shadow:#200303 1px 1px;
    text-transform: uppercase;}

p {font-family:"Comic Relief", system-ui;
    color: #564E58;}
    

h2 {font-family:"Dynapuff", system-ui;
    color: #BFB48F;
    padding-left: 10px;
    }
a {color: #33050a;
   font-family:"Comic Relief", system-ui;
}

a:hover {color:#BFB48F;
         background-color:#904E55;}

#box {width:570px;
      padding:15px;
      margin:0px auto 0px auto;
      border:5px solid #904E55;
      text-align:center;
      background-color: #a77161;}

#red {color:#421f23;
      text-transform:uppercase;
      text-decoration: none;
      padding:6px 10px 6px 10px;}

#project {color: #38181b;
   font-family:"Comic Relief", system-ui;
}

#blue {color:#29332b;
   text-transform:lowercase;
   text-decoration:none;
   display: block;}

#persona {height:350px;
          width: auto;
          }

.color {
    height:500px;
    width:auto;
    display: block;
    margin: 0px auto;
}

.theme-btn {
  margin-top: 20px;
  padding: 8px 16px;
  border: none;
  background: #485741;
  color: white;
  cursor: pointer;
  border-radius: 6px;
}

body.dark {
  background-color: #492323;
  color: #eee;
}

body.dark a {
  color: rgb(148, 161, 123);
}

.footer {
  text-align: center;
  padding: 20px;
  background-color: #d6dbd0;
  color: white;
  margin-top: 20px;
}