@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=REM:wght@200;300&display=swap");

/* Default styles for light theme */

body {
  font-family: "Poppins", sans-serif;
  font-family: "REM", sans-serif;

  background-color: #000000;
  color: #ffffff;
  max-height: 100vh;
}

.container {
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.subContainer {
  padding: 12px;
  height: max-content;
  width: max-content;
  /* border: 2px solid #f39c12; */
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* box-shadow: 5px 5px 5px 5px #888888; */
  box-shadow: 0px 0px 5px 5px #c0bfbf;
  /* height: 30vh;
  width: 40vw; */
}

button {
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

/* Dark theme */
body.dark-theme {
  background-color: #ffffff;
  color: #000000;
}

button.dark-theme {
  background-color: #2ecc71;
}

/* Additional styling for radio buttons */
.radio-buttons {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.radio-buttons label {
  margin-right: 10px;
}

/* Styling for the theme toggle button */
#themeToggle {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #f39c12;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.footer {
  text-align: center;
}

.radio-buttons input[type="radio"] + label {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid #ccc;
  border-radius: 50px;
  cursor: pointer;
}

/* Change styles when the custom radio button is focused */
.radio-buttons input[type="radio"]:focus + label {
  border-color: orange;
  box-shadow: 0 0 5px orange;
}

/* Change styles for checked custom radio button */
.radio-buttons input[type="radio"]:checked + label {
  border-color: orange;
  background-color: orange;
  color: white;
}

.radio-buttons input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.pc{
  width: 100%;
}
#searchBtnPc{
  width: 100%;
}

#pcBtn{
  width: 45px;
  text-align: center;
}

@media screen and (max-width: 450px) and (min-width: 300px) {
  
  p{
    font-size: 20px;
    margin-bottom: 30px; 
  }
}