:root{
    --text-color: white
    --border-radius: 5px
}

.btn{
    padding: 2rem 4rem;
    background: transparent;
    font-size: 2em;
    border-radius: var(--border-radius);
    border: 2px solid var(--color, white);
    text-align: center;
    color: aliceblue;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.btn:hover {
    cursor: pointer;
    background: var(--color,black);
    color: var(--text-color);
}

.btn.red {
    --color: red;
}

.btn.yellow {
    --color: yellow;
}

.btn.green {
    --color: green;
}

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

nav ul li{
    display: inline-block;
}

nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: black;
}



nav ul li a:hover{
    background-color:black
}

nav {
    margin-bottom: 20px;
}

p {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
}

h1 {
    color: gray;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    display: inline-block;
    border: 2px black;
    padding: 4px;
}
 
img {
    border-color: black;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}