body {
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    aspect-ratio: 4/3;
    background-image: url('./images/P1020623_Original.jpg');
    background-size: 60%;
    font-family: Arial;
}

header {
    
    display:flex;
    justify-content: left;
    position: fixed;
    left: 8%;
    top: 15%;
    align-items: left;
}

h1 {

    font-family: Arial, Helvetica, sans-serif; 
    font-weight: 400;
    font-style: normal;
    -webkit-text-stroke-width: .5px; 
    -webkit-text-stroke-color: yellowgreen;
    color: black;
    background-color: greenyellow;
    font-size: 15pt;
    text-align: left;
    white-space: nowrap;
}

/* List with links */

.listbox {

    width: 50%;
    position: fixed;
    left: 12%;
    top: 40%;
   

}

.listitem {

    width: 275px;
    height: auto;
    display: flex;
    color: black;

}

.listicon {
    width: 1.5rem;
    height: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Button styles*/

.snake {
    width: 100%;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	padding:2px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
    text-align: center;
}
.snake:hover {
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	background-color:#e9e9e9;
}
.snake:active {
	position:relative;
	top:1px;
}

.vanishing {
	width: 100%;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	padding:2px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
    text-align: center;
}    
.vanishing:hover {
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	background-color:#e9e9e9;
}
.vanishing:active {
	position:relative;
	top:1px;
}

 /* Image*/       

.adameve {
    position: fixed;
    width: 150px;
    height: auto;
    left: 75%;
    top: 60%;
}

/* Resize for phone */

@media only screen and (max-width:600px)   {
    .adameve {
        width: 100px;
        left: 60%;
    }


}

@media only screen and (max-width:600px)    {
    .listbox {
        width: 50%;
        position: fixed;
        left: 12%;
        top: 30%;
    }
}