* {
    transition: 0.1s ease;
    padding: 0px;
    margin: 0px;
    font-family: 'Arima Madurai', cursive;
    color: white;
}

body {
    height: 100%;
}

#container {
    background-attachment: fixed;
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(1, 1, 1, 0.3)), url(index-alldragons.jpg);
    background-size: cover;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

div#container div {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 7px 10px;
    border-radius: 7px;
    position: absolute;
    text-align: center;
    left: 18vw;
    top: 30vh;
    color: white;
    font-size: 3.5em;
    font-family: 'Ubuntu', sans-serif;
}

div#container p {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 7px 10px;
    border-radius: 12px;
    position: absolute;
    text-align: center;
    left: 12vw;
    top: 42vh;
    color: white;
    font-size: 2em;
    font-family: 'Ubuntu', sans-serif;
}

#to-rules {
    position: absolute;
    background: rgb(1, 196, 255);
    color: black;
    border: 1px solid black;
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    border-radius: 12px;
    left: 43vw;
    bottom: 30vh;
    height: auto;
    width: auto;
    padding: 13px 20px;
    font-size: 2em;
}

#to-rules:hover {
    text-decoration: underline;
    border: 3px white;
}