@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 5%;
  background: url(../images/giphy.gif) fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#filters {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  height: 0;
  overflow: hidden;
  border: none;
  transition: all 0.2s linear;
}

#filters.active {
  height: 4.5vh;
}

.show-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 5% 10%;
  gap: 10px;
}

.container {
  min-width: 20vh;
  max-width: 38vh;
  max-height: 60vh;
  min-height: 30vh;
  background: url(../images/123234.jpeg);
  flex-direction: column;
  display: flex;
  overflow: hidden;
  border: 1px solid;
  padding: 5px;
  gap: 4px;
  transition: all 0.2s linear;
}

.container:hover {
  max-width: 40vh;
  max-height: 65vh;
}

.image {
  min-height: 20vh;
  max-height: 41vh;
  max-width: 41vh;
  min-width: 20vh;
}

.info {
  color: white;
}

.heading {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  background: rgba(132, 156, 190, 0.589);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  max-height: 7vh;
  min-height: 3vh;
  padding: 2%;
  align-items: center;
}

#name {
  font-family: "Audiowide", cursive;
  color: white;
  font-size: 7vh;
}

.profile-btn {
  background: none;
  border: none;
  color: white;
  font-size: 25px;
  cursor: pointer;
  font-family: 'Audiowide', cursive;
}

.link {
  text-decoration-line: none;
  color: white;
}

.foot {
  background-color: white;
  padding: 10px;
}

.items {
  height: 4vh;
  width: 15vh;
  border: 1px solid black;
  border-radius: 50px;
  background: linear-gradient(145deg, #4fcca9, #43ac8e);
  transition: all 0.2s linear;
  cursor: pointer;
}

.items:active {
  background: linear-gradient(145deg, #43ac8e, #4fcca9);
  box-shadow: inset 32px 32px 35px #3fa286, inset -32px -32px 35px #55dcb6;
}

.opening {
  display: flex;
  justify-content: center;
  align-items: center;
}

#greeting {
  color: white;
}


.btn {
  border: 1px solid white;
  background: linear-gradient(145deg, #ff0000, #e60000);
  cursor: pointer;
}

.btn:active {
  background: #ff0000;
  box-shadow: inset 20px 20px 60px #d90000, inset -20px -20px 60px #ff0000;
}

.btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.log{
  background: none;
  border: none;
  color: white;
  font-size: 4vh;
  transition: all 0.3s linear;
  cursor: pointer;
}

.log:hover{
  color: black;
}

.back {
  position: fixed;
  top: 10;
  left: 1;
  right: 10px;
  bottom: 10px;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px;
  gap: 10px;
}

.created {
  display: flex;
  justify-content: center;
  align-items: center;
}

.foot-info {
  color: blue;
  text-decoration-line: underline;
  font-family: "Audiowide", cursive;
}

#profile {
  position: fixed;
  top: 52px;
  left: 73%;
  right: 0;
  bottom: 0;
  transition: all 0.2s linear;
  background: #004cff;
  box-shadow: inset 20px 20px 60px #0041d9, inset -20px -20px 60px #0057ff;
  padding: 20px;
  height: 0;
  visibility: hidden;
}

#profile.active{
    visibility: visible;
    height: 40vh;
}

.pro {
  color: white;
  font-family: "Audiowide", cursive;
  font-size: 3vh;

}

.data {
  font-family: none;
  text-decoration-line: none;
  font-size: 3vh;
}

#profile1 {
  color: white;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 20px;
  overflow: hidden;
  visibility: hidden;
  height: 0;
  transition: all 0.2s linear;
}

#profile1.active{
visibility: visible;
height: 35vh;
}


@media screen and (max-width: 1280px) {
  .items{
    font-size: 2vh;

  }
}

@media screen and (max-width: 1185px){
#profile{
left:71%;  
}

#profile.active{
  height: 45vh;
  padding:25px ;
  
}

#profile1.active{
  height: 37vh;
}
    
}

@media screen and (max-width: 1132px){
#profile{
  top: 44px;
  left:70%
}
  
}

@media screen and (max-width: 1100px){
  #profile{
    left:69%
  }
    
  }

  @media screen and (max-width: 1065px){
    #profile{
      left:68%;
    }
      
  }

  @media screen and (max-width: 1030px){
    #profile{
      top: 42px;
      left:67%;
    }
      
  }
  @media screen and (max-width: 1000px){
    #profile{
      left:66%;
    }
      
  }
  @media screen and (max-width: 970px){
    #profile{
      left:63%;
    }
      
  }

  @media screen and (max-width: 890px){
    #profile{
      left:60%;
    }
      
  }

  @media screen and (max-width: 825px){
    #profile{
      left:58%;
    }
      
  }

@media screen and (max-width: 800px){
#filters{
  margin-top: 5px;
}
}

@media screen and (max-width: 785px){
  #profile{
    left:55%;
  }
    
}

@media screen and (max-width: 790px){
#name{
  font-size: 6.5vh;
}
.btns{
  gap: 17px;
}

}

@media screen and (max-width: 775px){
#filters{
  margin-top: 10px;
}
  
}



@media screen and (max-width: 740px){
  #name{
    font-size: 6vh;
  }
  .btns{
    gap: 15px;
  }
  
  }

@media screen and (max-width: 730px){
  #profile{
      left:50%;
  }
      
}

@media screen and (max-width: 740px){
  #filters{
margin-top: 17px;
  }
}

@media screen and (max-width: 700px){
  #greeting{
    display: none;
  }
    
}

  @media screen and (max-width: 660px){
    #profile{
      left:47%;
    }
      
  }
@media screen and (max-width: 625px){
    #profile{
      top: 40px;
      left:45%;
    }
      
  }
  @media screen and (max-width: 600px){
    #profile{
      left:43%;
    }
      
  }

  @media screen and (max-width: 580px){
    #profile{
      left: 41%;
    }
      
  }

  @media screen and (max-width: 560px){
    #profile{
      left:40%;
    }
      
  }

  @media screen and (max-width: 550px){
    #profile{
      left:38%;
    }
      
  }

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

  #filters{
    margin-top: 20px;
  }
  #filters.active{
    height: 10vh;
  }
    
}

@media screen and (max-width: 530px){
  #profile{
    left:34%;
  }
    
}

@media screen and (max-width: 500px){
  #profile{
    left:31%;
  }
    
}

@media screen and (max-width: 480px){
  #profile{
    left:28%;
  }
    
}
  
@media screen and (max-width: 460px){
  #name{
    font-size: 5vh;
  }
  .btns{
    gap: 13px;
  }

  #profile{
    left:27%
  }

  .profile-btn{
    font-size: 20px;
  }
    
}

@media screen and (max-width: 450px){
  #profile{
    left:25%;
  }
    
}

@media screen and (max-width: 440px){
  #profile{
    left:20%;
  }
    
}
@media screen and (max-width: 415px){
  #name{
    font-size: 4.5vh;
  }
  #profile{
    left:17%;
  }
    
}
  
@media screen and (max-width: 400px){
#filters{
  margin-top: 25px;
}

#profile{
    left:12%;
  }
    
}

@media screen and (max-width: 384px){
  #name{
    font-size: 3.5vh;
  }
  #profile{
    left:10%;
  }
    
}

@media screen and (max-width: 380px){
  .btns{
    gap: 10px;
  }
    
}

@media screen and (max-width: 375px){
  #name{
    font-size: 3.5vh;
  }
  #profile{
    left:10%;
  }
    
}

@media screen and (max-width: 365px){
  #profile.active{
    left:8%;
  }
    
}

@media screen and (max-width: 357px){
  #profile{
    left:0%;
    right: 2%;
  }
    
}

@media screen and (max-width: 345px){
  #name{
    font-size: 4.5vh;
  }

  .profile-btn{
    font-size: 17px;
  }

  #profile{
    left:0%;
    right: 3%;
  }
    
}

@media screen and (max-width:337px) {
  #name{
    font-size: 4vh;
  }
  .log{
    font-size: 3vh;
}
}

@media screen and (max-width: 330px){
.heading{
  flex-direction: column;
  max-height: 12vh;
}

#filters{
  margin-top: 55px;
}   

}

@media screen and (max-width: 268px){
  #filters.active{
    height: 15vh;
  }
}