* {
  box-sizing: border-box;
}
body{
		background: linear-gradient(30deg, #2BB5FF, #333fff);
        background-position: center;
        background-size: 100%;
}
.logo{
		width: 20%;
		cursor: pointer;
        float: left;
		animation: movedown 1s linear 1;
		animation-delay: 1s;
		visibility: hidden;
		animation-fill-mode: forwards;
}
@keyframes movedown{
        0%{
		transform: translateY(-100px);
		visibility: visible;
        }
        100%{
		transform: translateY(0);
		visibility: visible;
	}
}
.titlu {
  float: left;
  width: 80%;
  padding: 0.5%;
  text-align: center;
  font-family: Arial;
  color: #edfffb;
}
.titlu_logo{
  float: left;
  width: 20%;
  text-align: center;
  color: #ffffff;
}
.titlu_dreapta{
  float: left;
  width: 80%;
  text-align: center;
  font-family: Verdana;
  color: #333fff;
}
.menu {
      float: left;
      width: 15%;
      text-align: center;
}
.menu a{
  background: linear-gradient(30deg, #ffffff, #2BB5FF);
  padding: 3%;
  margin-top: 1%;
  display: block;
  width: 100%;
  border-bottom-style:groove;
  text-decoration: none;
  color: black;
}
.main {
      float: left;
      width: 100%;
      text-align: center;
      font-family: Times New Roman;
      color: #e5e5e5;
      animation: moveright 1s linear 1;
      animation-delay: 3s;
      visibility: hidden;
      animation-fill-mode: forwards;
}
@keyframes moveright{
        0%{
		transform: translateX(-100px);
		visibility: visible;
        }
        100%{
		transform: translateX(0);
		visibility: visible;
	}
}
.right {
       float: right;
       width: 80%;
       text-align: center;
       animation: moveleft 1s linear 1;
       animation-delay: 2s;
       visibility: hidden;
       animation-fill-mode: forwards;
}
@keyframes moveleft{
        0%{
		transform: translateX(100px);
		visibility: visible;
        }
        100%{
		transform: translateX(0);
		visibility: visible;
	}
}
.foto{
		max-width: 100%;
        height: auto;
        align: center;
        animation: moveup 1s linear 1;
		animation-delay: 4s;
		visibility: hidden;
		animation-fill-mode: forwards;
}
@keyframes moveup{
        0%{
		transform: translateY(100px);
		visibility: visible;
        }
        100%{
		transform: translateY(0);
		visibility: visible;
	}
}
.right a{
  background: linear-gradient(30deg, #2BB5FF, #ffffff, #2BB5FF);
  width: 100%;
  padding: 1.5%;
  border-bottom-style:groove;
  border-radius: 8px;
  text-decoration: none;
  color: black;
  font-size: smaller; 
}
.right a:hover{
               color: #333fff;
}
.pagina_jos{
          float: left;
          width: 100%;
          text-align: center;
          font-family: Times New Roman;
          color: #800000;
          font-size: smaller;          
}
.pagina_jos a{
        margin-top: 1%;
        width: 100%;
        text-align: center;
        text-decoration: none;
        font-family: Times New Roman;
        color: #80476C;
}
@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .main, .right, .titlu, .titlu_logo, .pagina_jos{
    width: 100%;
  }
}