@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,200&display=swap');

:root{
  --orange: #0000ff;
  --pale-orange: #ff0000;
  --dark-orange: #00ff00;
  --peach-pink: #ffffff;
  }

body{
  background: #ffdbd3;
  font-family: 'Poppins', sans-serif;
  padding-bottom: 20px;
  padding-right: 15em;
  padding-top: 10px;
  padding-left: 50px;
  }
  
.box{
  background: #ff886c;
  border: 2px solid #dd2e44;
  border-radius: 3px;
  padding-right: 15px;
  width: fit-content;
  }

a {
  color:  #dd2e44;
  text-decoration: none;
  }
  
a:hover{
  color:  #9b2030;
  text-decoration: underline dashed;
  }
  
::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    background: #ff886c;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 12px;
    border: 1px solid #dd2e44;
}

::-webkit-scrollbar-thumb {
    background: #dd2e44;
}

::-webkit-scrollbar-thumb:hover {
    background: #77b255;
}

.warning{
  list-style: "⚠ ";
}

.warning::after{
  content: " ⚠"
}

h1::after{
  content:" 🍑";
}

h2{
  font-size: 1.17em;
}

#index ul{
  list-style: "🍑 ";
}

::selection {
  color:#77b255;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #ffdbd3;
  font-weight: bold;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ff886c;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #ffdbd3;
  
}

button{
  font-family: 'Poppins', sans-serif;
}

.faq{  
  border: 2px solid #dd2e44;
  border-radius: 3px;
}