@import url("https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap");

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%; overflow-y: scroll;}
body{margin:0;

  background: rgb(42,7,93);
  background: linear-gradient(0deg, rgba(42,7,93,1) 0%, rgba(86,9,121,1) 35%, rgba(158,0,255,1) 100%);    min-height: 100%;
    background-position: center;
    background-size: cover;
  }
.header {
    width: 100%;
    padding-top: calc(.5rem + .5vw);
    text-align: center;
  }
  
  .header img {
    height: auto;
    width: calc(3rem + 7vw);
    margin-left: 20px;
  }  
  
.container {
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
width: 80%;
} 


.display-position{position:absolute}

.padd {
  padding: calc(1rem + 5vh) calc(1rem + 5vw);
}

p {font-size: clamp(0.875rem, 0.5984rem + 1.1803vw, 2rem);
font-family: 'Arial', sans-serif; 
color: #FFF;
text-align:center;}

h1{font-size: clamp(1.625rem, 0.918rem + 3.0164vw, 4.5rem); font-family: 'Oxygen', sans-serif; font-weight:700; text-align:center!important; margin:0; padding: 0; color: #fff}

.center{text-align:center!important}

hr{border:0;border-top:1px solid #fff}

.overlay {
    z-index: 9999;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.5); 
}

.explore {
    text-align: center;
    margin-top: 10px;
}
.explore .btn-lg, 
.explore .btn-lg {
  font-family: 'Arial', sans-serif;
    padding: calc(.5rem + 1vh) calc(.5rem + .5vw);
    font-size: clamp(1rem, 0.8500rem + 0.6667vw, 1.6rem); 
    font-weight: 500;
    letter-spacing: .2rem;
    width:55%;
    background-image: none;
    background-color: rgba(0, 0, 0, 0.0);
    border: 2px solid #FFF;
    border-radius: 500px;
    color: #FFF;
    text-align:center;
    transition: all 0.2s ease-in-out;
    }
    
.btn:hover {
  background-color: #FFF;
  color: #000;
}

.btn:focus {
  outline: 5px solid rgb(255, 251, 0);
}

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

.container {
width: 100%;
} 
.padd {
  padding: calc(1rem + 1vh) calc(1rem + 1vw);
}
}

@media screen and (orientation:landscape) and (max-device-width: 914px) {
.container {
position:absolute;
top:55%;left:50%;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
width: 100%;} 
}

@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) {

.container {
position:absolute;
top:55%;left:50%;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
width: 100%;
}
}