* { margin: 0px; }
* { padding: 0px; }

 body{
    background-color: #eaf9f3;
    background-image: url(./pictures_main/sky_stars.jpg);
    background-size: cover;
 }

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5em;
    font-weight: 700;
    color: yellow;
    text-shadow: -1px 1px 1px darkred;
    width: 7em;
    height: 7em;
    border: 2px solid darkred;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;                                                    /* отступить сверху 10% от ширины */
    background-image: radial-gradient(white, blue);
    border-radius: 50% 50%;
    box-shadow: inset 0 0 100px 50px orange,                          /* внутренняя и наружняя тени */
                0 0 100px 50px yellow;               
    transition: text-shadow, color, transform, font-size, box-shadow, ease-in 1.5s;
}


.main:hover {                                                       
    font-size: 4.5em;                                                   /* все размеры класса .main, заданные в em изменяются пропорционально изменению автоматом (было 5 стало 5.5 = 10%), тоже самое с шириной и высотой */
    box-shadow: none;
    border: 2px solid darkblue;
    transform: scale(1.1) perspective(400px) rotateX(-15deg);
    box-shadow: inset 0 0 100px 50px DarkSlateBlue, 0 0 100px 50px lightblue;
    color: lightblue;
    text-shadow: -1px 1px 1px darkblue;
}

.css-templates{                                                         /* настроим ссылку */
    text-decoration: none;
    color: black;
}

.css-templates:active{                                                  /* цвет ссылки при нажатии */
    color: red;
}

.bs {                                                                   /* планета bootstrap*/
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background-image: url(./pictures_main/earth.png);
    background-size: 100% auto;
    position: relative;
    left: 60%;
    transition: transform, ease-in-out 1.5s;
    font-size: 2.1em;
    font-weight: 700;
    color: darkblue;
    position: relative;
    top: 100px;
}

.bs:hover {
    transform: scale(1.5) perspective(400px) rotateX(30deg) rotateY(-20deg);
}

.mz {                                                                   /* планета materialize*/
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background-image: url(./pictures_main/alien_planet.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    left: 35%;
    margin-top: -7.5%;
    transition: transform, ease-in-out 1.5s;
    font-size: 2.1em;
    font-weight: 700;
    color: white;
    transform: scale(1.05);
    position: relative;
    top: -50px;
}

.mz:hover {
    transform: scale(1.5) perspective(300px) rotateX(30deg) rotateY(20deg);;
}