#first
{
    /*background-color: lightblue;*/
    background: linear-gradient(45deg, blue, 40%, red);
    /*background-image: url("https://i.pinimg.com/originals/1c/6a/c0/1c6ac0ad1ad24c828988b6ab6e5cec81.jpg");*/
    background-image: url("https://static.vecteezy.com/system/resources/previews/002/202/110/original/futuristic-technology-background-free-vector.jpg");
    background-size: 100% 100%;
    width: 25%;
    height: 100%;
    position: absolute;
    left: 0%;
    bottom: 0%;
    overflow: scroll;
}

#last
{
    /*background-color: lightyellow;*/
    background: linear-gradient(-45deg, cyan, 40%, purple);
    background-image: url("https://wallpaperaccess.com/full/234990.jpg");
    background-size: 100% 100%;
    width: 75%;
    height: 100%;
    position: absolute;
    left: 25%;
    bottom: 0%;
}

h1
{
    text-align: center;
    color: white;
}

p
{
    color: white;
}

h3
{
    color: cyan;
}

label
{
    color: white;
}

li
{
    font-size: 50;
}

#end
{
    text-align: center;
    position: absolute;
    bottom: 0%;
    left: 30%;
}

#text
{
    margin: 0 0 0 0;
}

a
{
    background-color: cyan;
    color: black;
    transition: all 0.5s ease-out;
}

a:hover,a:focus
{
    background-color: black;
    color: cyan;
}

.laboite
{
    background-color: orange;
    color: green;
    width: 10%;
    height: 10%;
    transition: all 0.5s;
}

.laboite:hover
{
    background-color: green;
    color: orange;
    transform: scale(1.1);
}

#boite
{
    position: absolute;
    left: 40%;
    top: 50%;
}

#boite2
{
    position: absolute;
    left: 55%;
    top: 50%;
}

#boite3
{
    position: absolute;
    left: 40%;
    top: 65%;
}