@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Open+Sans&family=Raleway&family=Roboto&display=swap" rel="stylesheet');

* {
  box-sizing: border-box;
}


body {
  background-image: url("images/brush_strokeX2.png");
  background-repeat: no-repeat;
  font-family: 'Raleway', sans-serif;
  width: auto;
  align-items: left;
  justify-content: left;
  overflow: scroll;
  overflow-x: hidden;
  margin: 0;
}

.positioning {
    top: -820px;
    position: relative;
    text-align: center;
    justify-content: left;
    display: inline-block;
    margin-bottom: 0;
}

.big-wrap {
  height: auto;
  width: auto;
  position: relative;
  justify-content: left;
  align-items: center;
}

h1 {
  font-family: Dancing Script;
  font-size: 3.75em;
  color: #ffcc66;
  /*padding: 0;
  margin-bottom: 0px;*/
  margin-top: 1.125em;
  justify-content: center;
}

h2 {
  font-family: Dancing Script;
  font-size: 3.75rem;
  position: absolute;
  color: #fff;
  text-align: center;
}

h3, p{
  margin:0;
  }
h3 {
  font-family: Dancing Script;
  font-size: 2.8rem;
  text-align: left;
  color: #ffcc66;
  padding: 0px;
  font-weight: lighter;
  white-space: nowrap;
}

pre {
  display: block;
  font-family: Raleway;
  font-size: 1.5em;
  /*white-space: pre;*/
  margin: 0 ;
}
 
hr {
  justify-content: center;
  align-items: center;
  border: 18px dotted #1ca7ec;
  border-bottom: none; 
  width: 9.35em;;
  margin:-2.5em auto 3em 15.6em;
  opacity: 15%;
}

#musca2 {
  width: min(13.75em, 100%);
  height: auto;
  position: relative;
  margin: -9.35em auto auto 25em;
}

.myspan, .myspan2 {
  font-family: Dancing Script;
  font-size: 2.85em;
  color: #ffcc66;
}

.ramele {
  position: relative;
}

.rama1 {
  width: 100%;
  max-width: 350px;
  height: 100%;
  max-height: 560px;
  border: 0.62em solid #ffcc66;
  border-radius: 40px;
  position: absolute;
  left: 13.75em;
  top: 80px;
  z-index: 9;
  animation: mymove 5s infinite;
} 

.rama2 {
  width: 100%;
  max-width: 350px;
  height: 100%;
  max-height: 600px;
  border: 14px solid #ffcc66;
  border-radius: 40px;
  position: absolute;
  left: 11.25em;
  top: 70px;
  z-index: 9;
  animation: mymove 7s infinite;
}

@keyframes mymove {
  50% {transform: rotate(180deg);}
}

.content {
    position: relative;
    justify-content: center;
    display: inline-block;
}

.myphoto {
    position: relative;
    top: 100px;
    left: 10em;
    z-index: 2;
    display: flex;
    transform: rotate(-4deg);
    width: 100%;
    max-width: 380px;
    height: auto;
}

.resume {
  font-family: 'Raleway';
  font-size: 1.5em;
}

#Follow {
  font-family: Dancing Script;
  font-size: 2.8rem;
  text-align: left;
  color: #ffcc66;
  padding: 0px;
  font-weight: lighter;
  margin-top: 0.1em;
}

.resume {
  font-family: 'Raleway';
  font-size: 24px;
}

.CV {
  position: relative;
  left: 7.5em;
  z-index: 1;
  font-family: 'Raleway';
  width: min(16.25em, 100%);
  height: min(12.5em, 100%);
  background: #dfe6e9;
  border-radius: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.62em 0px;
  overflow: hidden;
  cursor: pointer;
  transition: .3s linear;
}
.CV:hover{
  transform: scale(1.1);
}
.CV span{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #993300;
  color: #f1f1f1;
  text-align: center;
  line-height: 70px;
  z-index: 999;
  transition: .6s linear;
  border-radius: 2.5em; 
}
.CV:hover span{
  transform: translateX(-100%);
  transition-delay: .3s;
}
.CV a {
  flex: 1;
  font-size: 1.37em;
  margin-right: 1em;
  color: #2d3436;
  text-align: center;
  transform: translateX(-100%);
  opacity: 0;
  transition: .3s linear;
  text-decoration: none;
}
.CV:hover a {
  opacity: 1;
  transform: translateX(0);
}

a:hover {
  cursor: pointer;
  color: #1ca7ec;
  text-decoration: underline;
}

.CV a:nth-of-type(1){
  transition-delay: 1s;
}
.CV a:nth-of-type(2){
  transition-delay: .8s;
}
.CV a:nth-of-type(3){
  transition-delay: .6s;
}

.buttons3{
    position: absolute;
    margin: -4.5em auto auto 4.5em;
    z-index: 2;
    filter: drop-shadow(3px 10px 15px rgba(0, 0, 0, 0.45));
    }
    
      .buttons3 button{

        background: linear-gradient(to bottom, #ffd662, #1ca7ec);
        font-weight: bold;
        color: white;
        font-size: 1.2rem;
        border: none;
        margin: -1.5px; 
        padding: 12px 26px;
        text-decoration: none;
      }
      .buttons3 :nth-child(1){
        border-radius: 20px 0 0 20px;
      }
      .buttons3 :nth-child(3){
        border-radius: 0 20px 20px 0;
      }
      button:hover{
        cursor: pointer;
        filter: drop-shadow(3px 5px 5px rgba(0, 0, 0, 0.45));
      }
      button:active{
        filter: none;
        transform: scale(.95);
      }


  .rows:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .grid1, .grid2 {
    float: left;
    width: 45%;
    padding: 0.75em;
    min-height: 300px;
    display: block;
    flex-basis: 100%;
  }

.grid2 {
  padding: 9.37em;
}

/*Musca se introduce*/
.muscaGI {
  position: absolute;
  top: 1100px;
  left: 28.1em;
  text-align: center;
  justify-content: center;
}

#muska1 {
  height: auto;
  width: min(300px, 90%);
  border-radius: 50%;
  box-shadow: 4px 4px 4px 4px grey;
  justify-content: center;
  position: absolute;
  margin-top: -18.75em;
  margin-left: 12.5em;
}

/* text musca introducere */
.intro {
  display: block;
  text-align: center;
  justify-content: center;
}

/* design static images - carousel */
.DSG {
  position: absolute;
  text-align: center;
  justify-content: center;
  display: block;
  margin-left: 21.87em;
  top: 1560px;
  
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: absolute;
  width: 43.75em;
  height: 43.75em;
  margin-left: 28.12em;
  top: 1750px;
}

/* Hide the images by default */
.mySlides {
  margin: auto;
  display: none;
  height: 37.5em;
  width: 37.5em;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 1em;
  
  color: #1ca7ec;
  font-weight: bold;
  font-size: 1.25em;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/10 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 0.75em;
  padding: 0.5em 0.75em;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #5ac5fa;
  padding: 2px 16px;
  color: white;
  border-radius: 20px;
}

.row:after {
  content: "";
  display: flex;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 9%;
}

/* Add a transparency effect for thumbnail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}


/*butonu My Portfolio*/
.MYportfolio {
  font-family: 'Raleway';
  font-size: 1.5em;
}

.portfolio {
  position: absolute;
  top: 800px;
  left: 12.5em;
  z-index: 1;
  font-family: 'Raleway';
  width: min (100%, 17.5em);
  height: min (100%, 5em);
  background: #dfe6e9;
  border-radius: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.62em 1.87em;
  overflow: hidden;
  cursor: pointer;
  transition: .3s linear;
}
.portfolio:hover{
  transform: scale(1.1);
}
.portfolio span{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #993300;
  color: #f1f1f1;
  text-align: center;
  line-height: 4.4rem;
  z-index: 999;
  transition: .6s linear;
  border-radius: 2.5rem; 
}
.portfolio:hover span{
  transform: translateX(-100%);
  transition-delay: .3s;
}
.portfolio a {
  flex: 1;
  font-size: 1.37em;
  margin-right: 1.25em;
  color: #2d3436;
  text-align: center;
  transform: translateX(-100%);
  opacity: 0;
  transition: .3s linear;
  text-decoration: none;
}
.portfolio:hover a {
  opacity: 1;
  transform: translateX(0);
}

a:hover {
  cursor: pointer;
  color: #1ca7ec;
  text-decoration: underline;
}

.CV a:nth-of-type(1){
  transition-delay: 1s;
}
.CV a:nth-of-type(2){
  transition-delay: .8s;
}
.CV a:nth-of-type(3){
  transition-delay: .6s;
}

.AF {
  position: relative;
  top: 2750px;
  text-align: center;
  justify-content: center;
  display: inline-block;
}

#muscaAnim {
  height: 18.75em;
  width: 18.75em;
  text-align: center;
  justify-content: center;
  transition: transform .2s;
  position: relative;
  left: 31.25em;
}

.vidosiki {
  display: flex;
  align-items: center;
  justify-content: center;
  /*flex-wrap: wrap;*/
  margin-top: -5.60em;
  margin-left: 14em;
  
}

.vidosiki .video {
  margin: 2rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border-radius: 1rem;
}

.vidosiki .video video {
  outline: none;
  border: none;
  cursor: pointer;
}

.vidosiki .video video:hover {
  transition: .2s linear;
  transform: scale(1.1);
}

.vidosiki .video .active {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  width: 40%;
  box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.vidosiki .video .active:hover {
  transition: none;
  transform: translate(-50%, -50%) scale(1);
}

/*Picturi*/
.paintings {
  width: min(90%, 75em);
  height: min(90%, 50em);
  position: absolute;
  top: 3660px;
  margin-left: 15.62em;
}

.musca-painter {
  width: 33.75em;
  height: 25em;
  position: absolute;
}

.musca-painter:hover {
  transform: scale(1.5);
}

.swiper-container {
  width: 100%;
  padding-top: 3.12em;
  padding-bottom: 3.12em;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 21.87em;
  height: 21.87em;
}

/*Contact me form*/
.acontacter {
position: absolute;
align-items: center;
justify-content: center;
top: 4550px;
width: 100%;
}

.stroke4 {
  position: absolute;
  justify-content: center;
  align-items: center;
  left: 26em;
}

.contactme {
  position: relative;
  justify-content: center;
  text-align: center;
  left: 3.12em;
}

.form-container {
width: 90%;
margin: 12.5em auto;
text-align: center;
}

.contact-left, .contact-right {
  float: left;
  width: 45%;
  padding: 0.75em;
  min-height: 12.5em;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: grid;
}

.form-container:after {
  content: "";
  display: table;
  clear: both;
}

form {
  width: 50%;
}

form label{
  font-size: 1.2rem;
}

input, textarea {
  width: 100%;
  padding: 1em;
  border: 3px solid #ffcc66;
  border-radius: 1.25em;
  outline: 0;
  font-size: 0.87em;
  color: black;
  margin-bottom: 1.25em;
}

textarea {
  height: 10em;
  font-family: Raleway;
}

input[type="submit"] {
  position: relative;
  display: block;
  left: -8.12em;
  font-family: Raleway;
  font-size: 1.2em;
  background: #993300;
  color: #f1f1f1;
  text-align: center;
  transition: .6s linear;
  border-radius: 2.5em; 
  line-height: 0.6em;
  width: 9em;
  height: 3em;
  margin: 1.87em auto auto 15em;
  border: none;
}

form { min-width:26.25em; margin:3.12em auto 0 12.5em; }

#twolines {
margin-top: 4.37em;
font-family: Raleway;
font-size: 1.25em;
justify-content: center;
}

#feelfree {
margin: 0.3em;
justify-content: center;
}

#muskabow {
  z-index: 2; 
  width: 18.12em; 
}

.cinci {
  width: 9.37em;
  margin: 1.87em auto 0 6.87em;
}

.finish {
  position: absolute;
  justify-content: center;
  display: block;
  top: 150px;
}

#fin{
  position: relative;
  justify-content: center;
  font-family: Dancing Script; 
  font-size: 2.75em; 
  color: white;
  top: 580px;
  left: 12.37em;
}

.copyright {
  position: relative;
  color: black;
  justify-content: center;
  top: 770px;
  left: 34.37em;
}

.culoare {
  position: absolute;
  z-index: -2;
  top: 300px;
  left: 18.75em;
}

@media only screen and (max-width: 600px) {
  body {
    background-size: contain;
    justify-content: center;
    align-items: center;
  }

  .big-wrap {
    align-items: center;
    justify-content: center;
    width: auto;
  }

  .buttons3 {
      position: absolute;
      margin: -15px auto auto 130px;
  }

  .buttons3 button {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    justify-content: center;
    align-items: center;
  }
  
  .grid1, .grid2 {
    width: 100%;
  }

  .grid2 {
    margin-top: 6.25em;
    margin-left: 10.62em;
  }

  .contact-left, .contact-right {
    width: 100%;
  }

  .positioning {
    margin-left: -12.5em;
    width: auto;
  }

  .contactme {
    justify-content: center;
    text-align: center;
    left: 10.62em;
  }

  .finish {
    top: 620px;
    left: 6.25em;
  }

}