html, body {
    height: auto;
    font-family: fantasy;
    background-color: rgb(72, 1, 88);
    margin:0;
    margin: bottom 3%;
    display:grid;
    align-items: center;
    justify-items: center;
}

@keyframes fade-in {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

#wrapper {
    animation:fade-in ease 1s;
    width:60%;
    height:100%;
    margin:0 auto;
}

#nav {
    width:100%;
    height: 80px;
    background-color: rgb(62, 0, 57);
    
}

#content {
    width: 100%;
    background-color:rgb(54, 0, 51);
}

img {
    width: 100%;
}

h1 {
    font-size:35px;
    color:rgb(255, 0, 242);
    margin:0;
    text-align:center;
}

p {
    font-size: 18px;
    color:rgb(255, 0, 242);
    margin:0;
    text-align: justify;
}

a {
    font-size: 16px;
    font-weight:bold;
    display:inline-block;
    width:28%;
    padding:6px;
    margin-top:15px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
}

#nav a:link, #nav a:visited {
    color:rgb(225, 0, 255);
    background-color: rgb(39, 0, 54);
}

#nav a:active, #nav a:hover {
    color: rgb(56, 0, 84);
    background-color: rgb(136, 0, 255);
}