The-entire-site/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
html{
	font-size:62.5%;
}
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
header{
	position:fixed;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:0.3vw;
	margin-top:0;
	background-color:pink;
	width:100vw;
	z-index:3;
}

.menu{
	list-style:none;
	display:flex;
	margin-left:45vw;
	font-size:1.5rem;
}
.list{ 
    position:relative;
	text-decoration:none;
	margin-left:100px;
	display:flex;
	align-items:center;
	color:black;
	padding:10px;
	border-radius:20%;
}
.list:hover{
	background-color:#FF9EAA;
}
img{
	width:40px;
	height:auto;
	max-width:100%;
}
.logo{
	font-size:2rem;
}
.logoimg{
	display:flex;
	justify-content:center;
	align-items:center;	
}


.header{
	position:relative;
	background-image:linear-gradient( transparent, pink);
	max-width:100%;
	height:50vh;
	background-size: cover;
  background-position: center;
  margin-bottom:5vh;
display:flex;
overflow:hidden;
justify-content:center;
 
}

 .mySlides {
           display: none;
			z-index:-1;
			position:absolute;
			width:100%;
	         height:100%;
			}

        

     
        #slideshow-container {
            width: 100%;
            position: absolute;
            height: 100%;
			
        }

     
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            
            border-radius: 0 3px 3px 0;
          
        }
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }
        .prev:hover,
        .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        .dot {
			width:1.5rem;
			height:1.5rem;
            cursor: pointer;
          font-size:5rem;
           display:flex;
            background-color: #bbb;
            border-radius: 50%;
            z-index:3
         
        }
		.doot{
			margin-top:10vh;
			display:flex;
			z-index:1;
		}
.prev{
	left:10px;
}
.next{
	right:10px
}
        .active,
        .dot:hover {
            background-color: #717171;
        }

        @media only screen and (max-width: 300px) {

            .prev,
            .next,
            .text {
                font-size: 11px
            }
        }
.hair{
	position:absolute;
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
	margin-top:0;
	padding-top:10vh;
	z-index:1;
	
}
.hair p{
	font-size:2rem;
	margin-bottom:2vh;
}
.stu{
	font-size:6rem;
	font-family:cursive;
	margin-bottom:3vh;
}
.btn{
	background:none;
	padding-right:2vw;
	padding-left:2vw;
	padding-top:0.5vh;
	padding-bottom:0.5vh;
	margin:0.2vw;
	z-index:3;
}
.btn:hover{
	background-color:#FF9EAA;
}
.logomain{
	display:flex;
	flex-direction:column;
	align-items:center;
	padding-top:2vw;
}
.choose{
	margin-top:0.5rem;
	font-size:3rem;
	margin-bottom:5vw;
}
.divmain{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	justify-content:space-around;
	margin-bottom:5vw;
	
}
.imgmain{
	width:20rem;
	height:25rem;
	border-radius:20px;
	background-image:linear-gradient( transparent, pink), url(hair.jpg);
	background-repeat: no-repeat;
}
.subone{
	display:flex;
	align-items:flex-start;
	flex-wrap:wrap;
	margin-top:1vw;
	margin-bottom:2vw;
}
.subone p{
	font-size:1.5rem;
	width:50vw;
}
.tik{
	width:2vw;
	height:auto;
}
h3{
	color:#000000;
}
.better{
	background-color:#d9d7d7;
}
.work{
	display:flex;
	align-items:center;
	justify-content:space-evenly;
	flex-wrap:wrap;
}
.workimg{
	width:33vw;
	height:20vw;
	margin-bottom:2vw;
	border-radius:10px;
}
.clients{
	display:flex;
	align-items:center;
	justify-content:space-around;
	flex-direction:row;
	font-size:1.5rem;
}
.client{
	display:flex;
	flex-direction:column;
	box-shadow:3px 3px 10px #FF9EAA;
	padding:1vw;
	height:24vh;
}
.clientes{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}
.lorm p{
	width:12rem;
}
.imgtwitter{
	width:1vw;
	height:1.5vw;
}
.username{
	font-size:1.5rem;
	margin-left:1vw;
	margin-right:1vw;
}
.div-username{
	width:50%
}
.div-username1{
	width:25%
}
.imgclient{
	width:2vw;
	height:auto;
}
footer{
	margin-top:10vw;
	background-color:#d9d7d7;
	font-size:1.5rem;
}
.time{
	width:1.5vw;
	height:1.5vw;
}
.week{
	display:flex;
	margin-top:1vw;
}


.footer{
	display:flex;
	align-items:center;
	justify-content:space-around;
}
.icon{
	display:flex;
	justify-content:center;
	margin-top:3vw;
	
}
.icons{
	width:2vw;
	height:auto;
	margin-left:0.5vw;
	margin-right:0.5vw;
	border:2px solid black;
	padding:0.2vw;
	
}
.copyright{
	display:flex;
	justify-content:center;
	margin-top:2vw;
	font-size:0.8rem;
	padding-bottom:1vw;
}
.but{
	display:none;
	margin-left:45vw;
	font-size:20px;
	background-color:#F09EAA;
	border:0;
	padding:0.4vw 0.6vw 0.4vw 0.6vw;
}
#check{
  z-index: 3;
  display: none;
}
	.meenu{
		display:none;
	}
 @media (max-width: 1203px){
	.menu{
		display:none;
		width:21vw;
	}
	header{
		display:flex;
		justify-content:space-around;
	}
.meenu{
		display:flex;
		align-items:center;
	}
	
	label{
    display: flex;
	align-items:center;
	justify-content:space-between;
    font-size: 25px;
    cursor: pointer;
    transition: 0.3s;
    transition-property: color;
	
  }
   label:hover{
    color: #fff;
  }
  label .close-btn{
    display: none;
  }
  #check:checked ~ header .menu{
    z-index: 2;
    position: fixed;
    top: 3vh;
    right: 0;
    background: pink;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	width:54vw;
	
  }
 #check:checked ~  header .menu a{
    font-weight: 700;
    margin-right: 0;
    margin-bottom: 50px;
    letter-spacing: 2px;
  }

  #check:checked ~ header label .close-btn{
    z-index: 2;
    position: fixed;
    display: block;
  }

  #check:checked ~ header label .menu-btn{
    display: none;
  }

  label .menu-btn{
    position: absolute;
  }
	
	
 }
@media (max-width: 960px){
	html{
		font-size:50%;
	}

 
}
  @media (max-width: 700px){
	html{
		font-size:35%;
	}
  }
   @media (max-width: 415px){
	html{
		font-size:25%;
	}
  }
	  @media (max-width: 280px){
	html{
		font-size:20%;
	}
	  }
	  .modal {
  display: none; 
  position: fixed; 
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100vh; 
  background-color: rgba(0,0,0,0.4); 
}


.modal-content {
  background-color: #fefefe;
  margin: 5% auto ;
margin-bottom:50px;  
  padding: 20px;
  border: 1px solid #888;
  width: 60%; 
  height:75%;
  
}
.lorem {
	width:20vw;
	height:10vh;
	overflow:hidden;
	margin-top:1vw;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.cli-img{
	width:5vw;
	height:10vh;
	border-radius:100%;
	margin-left:1vw;

	
}
.cliimg{
	background:pink;
	padding:1vh 0 1vh 0;
	
}
.user-font{
	font-size:2rem;
	margin-left:1vw;
}

.eslah-div{
	display:flex;
	align-items:center;
	justify-content:center;
	background:pink;
	padding:1vh 0 1vh 0;
	
	
}
.eslah1{
	margin-left:2vw;
	padding:1vh 2.5vw 1vh 2.5vw;
	}
.eslah2{
	margin-right:2vw;
	padding:1vh 2.5vw 1vh 2.5vw;
}
#container {
  width: 100%;
  padding: 10px;
}

#edit {
  padding: 5px;
  outline: none;
}

.edit-button {
  width: 80px;
  padding: 5px;
  margin: 0 3px;
  background-color: #ff7e00;
  outline: none;
  border: 1px solid #ff7e00;
  box-shadow: 2px 2px 2px #3f3f3f;
}

.edit-button:hover {
  box-shadow: 2px 2px 3px ;
}

.edit-button:active {
  box-shadow: 1px 1px 3px ;
}
#close-btn,#close-btn2,#close-btn3{
	display:none;
}
#end-editing,#end-editing2,#end-editing3{
	display:none;
}

.text-box{
	border:none;
	width:100%;
	display:none;
	height:51vh;
	overflow-x:hidden;
}
.paragraph{
	width:50px;
	display:none;
}
#lorem1{
	height:51vh;
}
.user-box{
	display:none;
	height:2vw;
	
}
#myfile{
	display:none;
	z-index:0;
    width: 5vw;
    height: 10vh;
    border-radius: 100%;
    margin-left: 1vw;
	font-size:0;
}

.showModal{
	display: block;
}
.cli-img:hover + .myfile{
	position:relative;
display:block;
	z-index:10;
	background-color:rgba(0,0,0,0.4)
}