body {
	text-align: center;
	margin: 0;
	padding: 0;
    color: #1f1f1f;
	overflow: hidden; 
	height:100vh;
	width:100vw;
	font-family: 'Montserrat', sans-serif;
	background-color:#1f1f1f;
}

h1 {
    font-weight:900;
    text-transform:uppercase;
}

.bodycontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 50px;
}

.main {
    box-shadow: 0px 0px 1007px purple;
    border-radius: 50px;
}

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
background-size: 12px;
background-position: 206px 17px;
padding-left: 12px;
background-repeat: no-repeat;
outline: none;
}
select:-moz-focusring {
transition-duration: 0s;
color: transparent;
text-shadow: 0 0 0 #fff;
}

option {
background-color: #fff;
color: var(--c-f);
}
  

.btn {
outline: none;
cursor: pointer;
padding: 8px;
margin: 10px;
width: 230px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 25px;
background-color: #0aa1e7;
color: white;
border: 0 none;
border-radius: 25px;
}

img {
}

@keyframes fi {
from { opacity: 0; }
to   { opacity: 1; }
}

.main {
animation: fi 1.5s .7s both;
}

a {
color: #8d0d70;
cursor: pointer;
text-decoration: underline;
font-weight: bold;
}

ol {
margin: auto;
text-align: left;
display: inline-block;
}

li::marker {
text-decoration: bold;
color: #09f;
}

li {
margin: 5px;
}

.container {
max-width: 710px;
margin: auto;
border-radius: 5px;
overflow: hidden;
z-index: 1;
background:#fff;
border-radius: 50px;
}


  /* Apply custom styles to the select element */
  select {
    width: 200px;
    padding: 10px;
    font-size: 16px;
    color: rgb(255, 255, 255);
    border: 2px solid green;
    border-radius: 10px; /* Rounded edges */
    background-color: rgb(6, 166, 230);
    appearance: none; /* Remove default arrow */
    background-image: url("arrow.png"); /* Add custom arrow */
    background-repeat: no-repeat;
    background-position: right center;
	background-size: 30px;
  }

  /* Apply styles to the dropdown options */
  option {
    font-size: 14px;
    color: black;
  }
  /* Apply styles to the option groups */
  optgroup {
    font-weight: bold;
    color: rgb(204, 0, 255);
    padding: 5px;
  }
  /* Apply styles to the dropdown options */
  option {
    font-size: 14px;
    color: black;
  }
.inst-button {
padding: 5px 0;
}

@media (prefers-color-scheme: dark) {
ewt-install-dialog {
/*--mdc-theme-primary: #ffa000; /*buttons*/
--mdc-theme-surface: #f700ff;
--mdc-dialog-heading-ink-color: #fff;
--mdc-dialog-content-ink-color: #ddd;
--mdc-text-field-fill-color: #ddd;
}
}
  /* Define button animation */
  @keyframes buttonAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }

  /* Apply the animation to the button */
  #inst button {
    animation: buttonAnimation 6s infinite;
  }
  /* Change the background color on hover */
  #inst button:hover {
    background-color: rgb(255, 0, 200);
  }