index.css

html, body {
    margin: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

::placeholder {
    font-family: 'Bree Serif';
    color: white;
    font-size: 30px;
}

textarea:focus, input:focus{
    outline: none;
}

.container {

    position: relative;
    height: 100%;
    background-color: #1A3F43;

    /* background-image: url('assets/preview.png'); */

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#lake {
    position: absolute;
    left: 0;
    top: -35%;
    width: 80%;
}

#skull {
    position: absolute;
    left: 55%;
    top: 72%;
    width: 10%;
    transform: rotate(-60deg);
}


#rock {
    position: absolute;
    left: 1%;
    top: 25%;
    width: 20%;
} 

#gold {
    position: absolute;
    left: 55%;
    top: 45%;
    width: 20%;
}

#cactus1 {
    position: absolute;
    top: 65%;
    width: 18%;
    left: 70%;
}

#hyena {
    position: absolute;
    width: 10%;
    left: 15%;
    top: 60%;
    transform: rotate(120deg);
}

#cactus2 {
    position: absolute;
    width: 18%;
    left: 90%;
    top: -5%;
}
#scorpion {
    position: absolute;
    left: 85%;
    top: 30%;
    width: 10%;
    transform: rotate(-130deg);
}

.menu {
    position: absolute;
    top: 20%;
    width: 50%;
    left: 25%;
}

#glowcenter {
	position: absolute;
	width: 100%;
	top: 40%;
	background-color: black;
	box-shadow: -10px -10px 1000px 45px #FFE594;
}

#title {
    display: block;
    width: 100%;
    margin-bottom: 5%;
}

input {
    position: absolute;

    height: 10%;
	
    width: 40%;
    left: 25%;

    text-align: center;
    font-family: 'Bree Serif';
	
    border: 8px solid #FFE594;
	
	
    font-size: 30px;
    padding: 2%;

    margin: 2%;
    /* background-color: #FEE499; */
    background: transparent;
	font-weight: bold;
	letter-spacing: 1.5px;

    color: white;
    border-radius: 32px;
    cursor: pointer;
    /* background-image: linear-gradient(#c7b085, #7a6338); */
	
	background-color: rgb(255, 229, 148, 0.25);
			
}

button {
    position: absolute;
    margin-top: 15%;
    height: 30%;
    font-size: 25px;
    font-family: 'Bree Serif';
    width: 20%;
    left: 27%;
    text-align: center;
    text-decoration: none;
    color: white;
    font-weight: bold;
    /* background-color: #FEE499; */
    background-color: #ddbe6e;
	border-radius: 32px;
	border: 6px solid rgb(190, 144, 1);
    cursor: pointer;
	letter-spacing: 1.5px ;
    /* background-image: linear-gradient(#c7b085, #7a6338); */
	box-shadow: -10px -9px 116px -30px rgba(255,229,148,1);
	outline: none;
	max-height: 60px;
}

#triangle:before {
	/* alternative \25bc */
    content: "\25be";			
    color: white;
}

#selection {
	width: 25%;
    background-color: #A26437;
	border-radius: 32px;
	border: 6px solid #734728;
	left: 49%;	
}

#elem {
	font-size: 25px;
	font-family: 'Bree Serif';
	background-color: #ddbe6e;
	font-weight: bold;
	border-radius: 32px;
	color: white;
	text-align: center;
	width: 20%;
	cursor: pointer;
	border: 1px solid #734728;
	padding: 1px;
	margin: 1px;
}

.options {
	position: absolute;
	visibility: hidden;
	left: 50%;
	top: 85%;
	width: 100%;
	
}



.fields {
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: #E6CE8B; */
    border-radius: 12px;
}