@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

body{
    background-image: url('sky.png')
}
*{
letter-spacing: 4px;
text-decoration: inherit;
}
.button-container {
    width: 600px;

}

.button-container > a {
    width: 300px;
    height: 100px;
    float: left; 
    margin: 15px;
    display: table;
}
.btn-1 {
    align-items: center;
    width: 500px;
    height: 300px;
    border: none;
    background-color: #F8EAF7;
    box-shadow: inset 0 0 0 0 #C5E8F2;
    transition: ease-out 0.2s;
    font-size: 4rem;
    outline: none;
}

.btn-1:hover {
    box-shadow: inset 500px 0 0 0 #C5E8F2;
    cursor: pointer;
    color: #C5E8F2;
}
.btn-2 {
    width: 300px;
    height: 100px;
    border: none;
    background-color: #F8EAF7;
    box-shadow: inset 0 0 0 0 #C5E8F2;
    transition: ease-out 0.3s;
    font-size: 2rem;
    outline: none;
}

.btn-2:hover {
    box-shadow: inset 300px 0 0 0 #C5E8F2;
    cursor: pointer;
    color: #C5E8F2;
}
.btn-3 {
    width: 300px;
    height: 100px;
    border: none;
    background-color: #F8EAF7;
    box-shadow: inset 0 0 0 0 #C5E8F2;
    transition: ease-out 0.3s;
    font-size: 2rem;
    outline: none;
}

.btn-3:hover {
    box-shadow: inset 300px 0 0 0 #C5E8F2;
    cursor: pointer;
    color: #C5E8F2;
}
.btn-4 {
    width: 300px;
    height: 100px;
    border: none;
    background-color: #F8EAF7;
    box-shadow: inset 0 0 0 0 #C5E8F2;
    transition: ease-out 0.3s;
    font-size: 2rem;
    outline: none;
}

.btn-4:hover {
    box-shadow: inset 300px 0 0 0 #C5E8F2;
    cursor: pointer;
    color: #C5E8F2;
}
.btn-5 {
    width: 300px;
    height: 100px;
    border: none;
    background-color: #F8EAF7;
    box-shadow: inset 0 0 0 0 #C5E8F2;
    transition: ease-out 0.3s;
    font-size: 2rem;
    outline: none;
}

.btn-5:hover {
    box-shadow: inset 300px 0 0 0 #C5E8F2;
    cursor: pointer;
    color: #C5E8F2;
}
.btn-6 {
    width: 300px;
    height: 100px;
    border: none;
    background-color: #F8EAF7;
    box-shadow: inset 0 0 0 0 #C5E8F2;
    transition: ease-out 0.3s;
    font-size: 2rem;
    outline: none;
}

.btn-6:hover {
    box-shadow: inset 300px 0 0 0 #C5E8F2;
    cursor: pointer;
    color: #C5E8F2;
}
.btn-7 {
    width: 300px;
    height: 100px;
    border: none;
    background-color: #F8EAF7;
    box-shadow: inset 0 0 0 0 #C5E8F2;
    transition: ease-out 0.3s;
    font-size: 2 rem;
    outline: none;
}

.btn-7:hover {
    box-shadow: inset 300px 0 0 0 #C5E8F2;
    cursor: pointer;
    color: #C5E8F2;
}
.btn-8 {
    width: 300px;
    height: 100px;
    border: none;
    background-color: #F8EAF7;
    box-shadow: inset 0 0 0 0 #C5E8F2;
    transition: ease-out 0.3s;
    font-size: 2 rem;
    outline: none;
}

.btn-8:hover {
    box-shadow: inset 300px 0 0 0 #C5E8F2;
    cursor: pointer;
    color: #C5E8F2;
}
.btn-9 {
    width: 300px;
    height: 100px;
    border: none;
    background-color: #F8EAF7;
    box-shadow: inset 0 0 0 0 #C5E8F2;
    transition: ease-out 0.3s;
    font-size: 3 rem;
    outline: none;
}

.btn-9:hover {
    box-shadow: inset 300px 0 0 0 #C5E8F2;
    cursor: pointer;
    color: #C5E8F2;
}
a{
    font-family: 'Abril Fatface', cursive;
    text-decoration:inherit;
}