body {
  background-color: gray;
}

  .store{
 margin: 0 auto ;
 display:block;
 color:black;
 }
 
 .aboutbutton {
  margin: 0 auto;
  display: block;
  background: -webkit-linear-gradient(90deg, #03ff00,#1cfcff,#e40032,#9a283d,#653662);                      
  }
  
 


.iphone14 {
border: 1px;

}

.search {

position:relative;

width: 50px; height: 50px;

border-radius: 50%;

padding: 10px;

transition-duration: 500ms; cursor: pointer;

font-family: 'Inter', sans-serif; font-family: 'Lato', sans-serif;

font-family: 'Noto Sans' , sans-serif;

font-size: 15px; border: 1px solid black;

overflow: hidden;

background-image: url(search.png);

background-repeat: no-repeat; background-size: 40px;

background-position: 45% 50%;
}

.search:hover {
  border: 1px solid red;
}

.search:focus {

width: 200px; cursor: text;

padding-left: 40px;

color: white; outline: none;

 background-color: transparent; border: 1px solid #FF9950;
 background-position: 10px 50%;

background: url(IMG.JPG) no-repeat;
background-size: 22px;
}

/*
/*@import url("https://fonts.googleapis.com/css?family=Raleway:400");

* {
	box-sizing: border-box;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}

@property --gradX {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}
body {
	font-family: Raleway, sans-serif;
	text-align: center;
	margin: 0;
	padding: 1rem;
	background-color: rgba(10, 12, 18, 1);
	color: white;
	min-height: 100vh;
	display: flex;
	flex-wrap: wrap;
	
}

:root {
	--d: 2500ms;
	--angle: 90deg;
	--gradX: 100%;
	--gradY: 50%;
	--c1: rgba(168, 239, 255, 1);
	--c2: rgba(168, 239, 255, 0.1);
}

.wrapper {
	min-width: min(40rem, 100%);
}

.box {
  
  width: 100px;
  height: 50px;
	font-size: 30px;
/*	margin: max(1rem, 3vw);
	border: 0.35rem solid;
	padding: 3vw; 
	border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
	animation: borderRotate var(--d) linear infinite forwards;
}

.box:nth-child(2) {
	border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
	animation: borderRadial var(--d) linear infinite forwards;
}

@keyframes borderRotate {
	100% {
		--angle: 420deg;
	}
}

@keyframes borderRadial {
	20% {
		--gradX: 100%;
		--gradY: 50%;
	}
	40% {
		--gradX: 100%;
		--gradY: 100%;
	}
	60% {
		--gradX: 50%;
		--gradY: 100%;
	}
	80% {
		--gradX: 0%;
		--gradY: 50%;
	}
	100% {
		--gradX: 50%;
		--gradY: 0%;
	}
}

.bbbb {
   width: 100px;
  height: 50px;
	font-size: 30px;
	margin: max(1rem, 3vw);
	border: 0.35rem solid;
	padding: 3vw;
	background-color: black;
  
}
*/

.animated-border-button {
  background-color: #263059;
  float:left;
  margin: 0 10px;
  display: inline-block;
    
  border: none;
  color: #ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}

.animated-border-button::before,
.animated-border-button::after {
    
  border: 0 solid transparent;
  transition: all 0.3s;
  content: '';
  height: 0;
  position: absolute;
  width: 24px;
}

.animated-border-button::before {
  border-top: 2px solid #263059;
  right: 0;
  top: -4px;
}

.animated-border-button::after {
  border-bottom: 20px solid #263059;
  bottom: -4px;
  left: 0;
}

.animated-border-button:hover::before,
.animated-border-button:hover::after {
  width: 100%;
}
@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}
@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}



@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh7USSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 latin 
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.gradient-border {
  --border-width: 3px;

  position: relative;
      
  
  display: flex;
 justify-content: center;
  align-items: center;
  width: 150px;
  height: 100px;
  font-family: Lato, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  color: white;
  background: #222;
  border-radius: var(-border-width);
} 
  :after {
    
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(60deg,
      hsl(224, 85%, 66%),
      hsl(269, 85%, 66%),
      hsl(314, 85%, 66%),
      hsl(359, 85%, 66%),
      hsl(44, 85%, 66%),
      hsl(89, 85%, 66%),
      hsl(134, 85%, 66%),
      hsl(179, 85%, 66%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width));
    animation: moveGradient 4s alternate infinite;
  }


@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}
.main {
  background-color: black;
}

.mm {
  position: absolute;
  float: left;
  margin: 0 10px;
  
}






.animated-border-button1 {
  background-color: #263059;
  border: none;
  color: #ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}

.animated-border-button1::before,
.animated-border-button1::after {
  border: 0 solid transparent;
  transition: all 0.3s;
  content: '';
  height: 0;
  position: absolute;
  width: 24px;
}

.animated-border-button1::before {
  border-top: 2px solid #263059;
  right: 0;
  top: -4px;
}

.animated-border-button1::after {
  border-bottom: 2px solid #263059;
  bottom: -4px;
  left: 0;
}

.animated-border-button1:hover::before,
.animated-border-button1:hover::after {
  width: 100%;
}



.animated-border-button1,
.animated-border-button {
  float: left;
  margin: 0 10px;
}