*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lobster', sans-serif;
}

html {
  --s: 82px; /* control the size */
  --c1: #b2b2b2;
  --c2: #ffffff;
  --c3: #d9d9d9;
  
  --_g: var(--c3) 0 120deg,#0000 0;
  background:
    conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
    conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
    conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
    conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
    linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
                          var(--c1) 0 calc(500%/6),var(--c2) 0);
  background-size: calc(1.732*var(--s)) var(--s);
}

/* 
  html{
    background: rgb(255,0,0);
background: linear-gradient(125deg, rgba(255,0,0,1) 0%, rgba(84,75,255,1) 100%);
height: 100%;
  } */
  html,body{
    height: 100%;
    width: 100%;
  }
  
/* Chromium & Safari*/
input[type="number"]::-webkit-inner-spin-button{
    display: none;
}
/* Firefox */
input[type=number]{
    -moz-appearance: textfield;
}

.head{
    background-color: #1095c1;
    position: relative;
    height: 30%;
    width: 100%;
}
h1{

    text-align: center;
    font-size: 3rem;
    width: 100%;
    font-family: 'Anton', sans-serif;
    letter-spacing: .3rem;
    word-spacing: 0.7rem;
    position: absolute;
    top: 50%;
    left: 0;
    /* left: 50%; */
    transform: translateY(-50%);
}

h1::before{
  text-align: center;
  width: 100%;
  /* display: block; */
    content:"GuessGame By Ajayy";
    position: absolute;
    top: -10px;
    left: -10px;
    color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: white;
    z-index: -1;
    transition: all 0.3s;

}
h1:hover::before{
    top: 0;
    left: 0;
    text-decoration: underline black double 5px;
}


.main{
    width: 60%;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 2rem;
    font-weight: 600;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

input{
  height: 4rem;
  padding: 1.2rem;
  width: 65%;
  border-radius: 1rem;
  font-size: 1.3rem;
  border: 2px solid black;
  margin-bottom: 0.7rem;
}
input:hover{
  border: 2px solid #1095c1;
}
button{
  width: 30%;
  height: 4rem;
  border-radius: 1rem;
  font-size: 1.3rem;
  border: 2px solid black;
  background-color: white;
  transition: all 4s;
}

button:active{
  border: 2px solid  #1095c1;
  color: #1095c1;
}
button:hover{
  font-size: 1.7rem;
  background-color: blueviolet;
}


.game{
  display: none;
}


.answer{
  text-align: center;
  font-size: 1.5rem;
  background-color: greenyellow;
  width: 100%;
  margin-top: 1rem;
  /* border: 2px solid #1095c1; */
  /* -webkit-text-stroke-color: black;
  -webkit-text-stroke-width: 1px; */
}


.time{
  width: 20%;
  margin: 2rem auto;
  border: 4px solid blueviolet;
  text-align: center;
  font-size: 3rem;
}

@media(width<=600px){
  input{
    width: 100%;
  }
  button{
    width: 70%;
    height: 3rem;
  }
}
@media(width<=355px){
  input{
    font-size: 1rem;
    padding: 0.7rem;
  }
  button{
    font-size: 1rem;
  }
}