body {
    background-color: #eeeeee;
    font-family: Arial;
    text-align: center;
}

h1 {
    color: darkblue;
}

.ruta1 {
    width: 300px;
    margin: 30px auto;
    padding: 20px;
    background-color: lightblue;
    border-radius: 20px;
    box-shadow: 5px 5px 10px black;
}

.ruta2 {
    width: 300px;
    margin: 30px auto;
    padding: 20px;
    background: rgba(255, 0, 0, 0.5);
    border-radius: 15px;
}

.ruta3 {
    width: 250px;
    margin: 50px auto;
    padding: 20px;
    background-color: yellow;
    transform: rotate(5deg);
    box-shadow: 5px 5px 5px gray;
}

.ruta4 {
    width: 250px;
    margin: 50px auto;
    padding: 20px;
    background-color: lightgreen;
    transform: skew(10deg, 5deg);
}

.ruta5 {
    width: 300px;
    height: 120px;
    margin: 30px auto;
    padding: 15px;
    background-color: white;
    border-radius: 20px;
    overflow: auto;
    text-align: justify;
    word-wrap: break-word;
    box-shadow: 3px 3px 8px gray;
}

.ruta6 {
    width: 300px;
    margin: 40px auto;
    padding: 20px;
    background-color: #66cc66;
    border-radius: 20px;
    box-shadow:
    inset 5px 5px 5px rgba(255,255,255,0.7),
    inset -5px -5px 5px rgba(0,0,0,0.4),
    5px 5px 10px rgba(0,0,0,0.5);
}

.ruta7 {
    width: 300px;
    margin: 90px auto;
    padding: 20px;
    background-color: red;
    box-shadow: 40px 30px 50px red, -40px -30px 50px blue;
    transform: skew(30deg,20deg);
    border-radius: 40px;
}