@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

body {
  color: white;
  background: linear-gradient( #313536, #222323);
  width:100%;
}

.logo-stamp {
  position:absolute;
  top:0;
  left:0;
  background:linear-gradient(45deg, #1a1b1c, black);
  height:110px;
  width:200px;
  padding-left:20px;
  border-bottom-right-radius:150px;
}

#principles {
  max-width:600px;
  margin:auto;
  display:block;
}

h1, h2 {
  font-family:'Roboto';
  font-weight:700;
  font-size:2rem;
  margin-bottom:10px;
  transition-duration: 0.25s;
  color:#fcbe7e;
}
h2:hover {
  color:#f7b23a;
}

h1 {
  font-size:3rem;
}

.card {
  background:linear-gradient(45deg, #1a1b1c, black);
  border-radius:30px;
  cursor:pointer;
  display:block;
  padding:20px;
  padding-top:1px;
  transition-duration:0.25s;
  margin-bottom:20px;
  position:relative;
  list-style-type:decimal;

  box-shadow:0px 10px 20px rgba(0,0,0,0.4);
}

.card ul {
  display:none;
}

li {
  list-style:none;
  font-family: 'roboto';
  font-weight:400;
  font-size:1.2rem;
  position:relative;
  color:#e0e0e0;
  transition-duration:0.25s;
  margin-bottom: 20px;
}
li:hover {
  color:#ffffff;
}

li:before {
  content: "\2B24";
  color:#fbec5f;
  font-size:1rem;
  position:absolute;
  left:-32px;
  top:1px;
}


.card h2 {
  margin-left:40px;

  position: relative;
}
.card-number {

  position:absolute;
  left:-110px;
  font-size:80px;
  font-family:'Roboto';
  top:10px;
  font-weight:900;
  color:rgba(255,255,255,0.1);
  text-align:right;
  width:90px;
  display:inline-block;

}
.card h2:before {
  font-family: 'Material Icons';
  font-style: normal;
  color:#fcbe7e;

  font-weight: 700;
  font-size:2.5rem;
  position:absolute;
  top:-0px;
  left:-40px;
  content:"chevron_right";
}
.card.expanded h2:before {
  content:"expand_more";
}

.card.expanded ul {
  display:block;
}