/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/


/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

/* Our default values set as CSS variables */
:root {
/*   --color-bg: #2e1700; */
  --color-bg: hsl(40, 100%, 9%);
  --color-bg-highlight: hsl(40, 100%, 70%);
  --color-highlight: hsl(249, 98%, 49%);
  --color-text-main: #cdfae0;
  --color-primary: #cdfae0;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "neue-machina-inktrap-ultrabold";
  --font-family-header: "HK Grotesk";
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */


@font-face {
  font-family: 'black-han-sans';
  src: url('https://cdn.glitch.global/49ade6d5-7d48-45dd-b0cc-a67402182c49/BlackHanSans-Regular.ttf?v=1667577433112') 
}

@font-face {
  font-family: 'neue-machina-inktrap-light';
  src: url('https://cdn.glitch.global/49ade6d5-7d48-45dd-b0cc-a67402182c49/PPNeueMachina-InktrapLight.otf?v=1667577670714') 
}

@font-face {
  font-family: 'neue-machina-inktrap-light-italic';
  src: url('https://cdn.glitch.global/49ade6d5-7d48-45dd-b0cc-a67402182c49/PPNeueMachina-InktrapLightItalic.otf?v=1667577676795') 
}

@font-face {
  font-family: 'neue-machina-inktrap-regular';
  src: url('https://cdn.glitch.global/49ade6d5-7d48-45dd-b0cc-a67402182c49/PPNeueMachina-InktrapRegular.otf?v=1667577682115') 
}

@font-face {
  font-family: 'neue-machina-inktrap-regular-italic';
  src: url('https://cdn.glitch.global/49ade6d5-7d48-45dd-b0cc-a67402182c49/PPNeueMachina-InktrapRegularItalic.otf?v=1667577685924') 
}

@font-face {
  font-family: 'neue-machina-inktrap-ultrabold';
  src: url('https://cdn.glitch.global/49ade6d5-7d48-45dd-b0cc-a67402182c49/PPNeueMachina-InktrapUltrabold.otf?v=1667577690076') 
}

@font-face {
  font-family: 'neue-machina-inktrap-ultrabold-italic';
  src: url('https://cdn.glitch.global/49ade6d5-7d48-45dd-b0cc-a67402182c49/PPNeueMachina-InktrapUltraboldItalic.otf?v=1667577695021') 
}

.divider {
  padding: 0 1rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
/*   font-family: HK Grotesk; */
  font-family: ofelia-display,sans-serif;
font-weight: 300;
font-style: normal;
/*   background-color: var(--color-bg); */
/*     background: radial-gradient(ellipse at 20%, var(--color-bg), hsl(40, 100%, 7%)), url(https://cdn.glitch.global/61f94b2e-8ba9-432e-ad52-93010177cd02/testbg2-01-01.svg?v=1672411071391); */
    background: radial-gradient(
      circle at 50% 50%,
      hsl(40, 10%, 2%),
      var(--color-bg)
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  color: var(--color-bg-highlight);
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
/*   margin: 0 1rem; */
/*   width:80%; */
  
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {
  .content {
  display: flex;
/*   flex-direction: column; */
  flex-direction: column;
  align-self: center;
/*   align-items: start; */
  justify-content: center;
  padding: 20px;
  width:90vw;
}
  .info{
  min-width: 100%;
    display: flex;
  flex-direction: column;
  justify-content: space-between;
/*   padding:20px; */
/*   margin: 20px; */
}
.title_info{
    min-width: 90%;
    display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}
  button,
input {
  font-family: var(--font-family);
/*   color: #fff; */
  color: var(--color-bg-highlight);
    box-sizing: border-box;
  appearance: none;
/*   background-color: transparent; */
  border-radius: 0.6em;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 0.75rem;
  font-weight: 400;
/*   line-height: 1; */
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
}
  h1{
    font-family: 'neue-machina-inktrap-light';
  color: var(--color-bg-highlight);
  font-size: 1.5em;
/*   background-color: rgba(255, 255, 255, 0.2e5); */
}
  .text_chunk{
    max-width:100%;
  font-size: 1.1em;
    display: block;/* or inline-block */
  text-overflow: ellipsis;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-y: scroll;
/*   max-height: 15.0em; */
  padding: 10px;
}
  #player1{
  position:relative
  display: table;
    width: auto;
  height: auto;
  padding:20px;
  margin: 0;
    max-width: 500px;
/*   background: var(--color-bg); */
  background: #fff;
/* border-radius: 10% 20% 10% 20% / 10% 0% 10% 0%; */
  border-radius: 10% 10% 20% 20% / 10% 10% 0% 0%;
      box-shadow:
    0 0 15px 15px #fff,
    0 0 40px 30px var(--color-highlight),
    0 0 50px 45px #0ff;
}
  .search-content{
  padding: 5px;
  z-index: 1;
}
}

/* ============================================== */
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .content {
  display: flex;
/*   flex-direction: column; */
  flex-direction: column;
  align-self: center;
/*   align-items: start; */
  justify-content: center;
/*   max-height: 80vh; */
  padding: 20px;
  width:80%;
}
.info{
  min-width: 90%;
    display: flex;
  flex-direction: row;
  justify-content: space-between;
/*   padding:20px; */
/*   margin: 20px; */
}
  .title_info{
    min-width: 90%;
    display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}
  button,
input {
  font-family: var(--font-family);
/*   color: #fff; */
  color: var(--color-bg-highlight);
    box-sizing: border-box;
  appearance: none;
/*   background-color: transparent; */
  border-radius: 0.6em;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
/*   line-height: 1; */
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
}
  h1{
    font-family: 'neue-machina-inktrap-light';
  color: var(--color-bg-highlight);
  font-size: 3em;
/*   background-color: rgba(255, 255, 255, 0.2e5); */
}
  
  .text_chunk{
    max-width:50%;
  font-size: 1.1em;
    display: block;/* or inline-block */
  text-overflow: ellipsis;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-y: scroll;
  max-height: 15.0em;
  padding: 20px;
}
  #player1{
  position:relative
  display: table;
    width: auto;
  height: auto;
  padding:40px;
  margin: 0;
/*   background: var(--color-bg); */
  background: #fff;
/* border-radius: 10% 20% 10% 20% / 10% 0% 10% 0%; */
  border-radius: 10% 10% 20% 20% / 10% 10% 0% 0%;
      box-shadow:
    0 0 30px 30px #fff,
    0 0 80px 60px var(--color-highlight),
    0 0 100px 90px #0ff;
}
  .search-content{
  padding: 20px;
  z-index: 1;
}
}
/* ===================================== */
/* end of media query */


#tags{
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.bigsearch{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 50%;
  width: 90%;

}
.homepage{
  display: flex;
/*   flex-direction: column; */
  flex-direction: row;
  align-items: space-between;
  justify-content: space-evenly;
  min-width: 50%;
  width: 90%;
}
.search{
  display: flex;
/*   flex-direction: column; */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-width: 50%;
/*   width: 90%; */
}


/* Instructions */
.instructions {
  margin: 1rem auto 0;
}

.result{
  justify-content: center;
  flex-direction: row;
  min-width: 40vw;
  min-height: 20vh;
  display: flex;
  width: auto;
  height: auto;
  align-items:center;


} 








input{
  border-color: transparent;
/*   -webkit-appearance: none; */
color: white !important;
}
input:focus{
  border-color: var(--color-bg-highlight) !important;
  box-shadow: 0 0 10px 0 var(--color-bg-highlight) inset, 0 0 10px 4px var(--color-bg-highlight) !important;
  background-color: transparent !important;
}
@media (hover: hover) {
  button:hover{
    color: var(--color-bg-highlight);
      outline: 0;
  }
}


.main_button{
  border-width:0;
  color: var(--color-bg);
  background-color: var(--color-bg-highlight);
  box-shadow: 0 0 15px 6px var(--color-bg-highlight), 0 0 15px 4px var(--color-bg) inset;
  transition: all 250ms ease-in-out;
/*   border:white; */

}
@media (hover: hover) {
/*     background-color: blue; */
  
.main_button:hover{
border-radius: 10% 20% 10% 20% / 10% 0% 10% 0%;
/*   border-color: var(--color-bg-highlight); */
  background-color: transparent;
  box-shadow: 0 0 10px 0 var(--color-bg-highlight) inset, 0 0 10px 4px var(--color-bg-highlight);
/*         box-shadow:
    0 0 18px 15px #fff inset,
    0 0 10px 11px var(--color-highlight),
    0 0 15px 14px #0ff; */
  }
  }


iframe{
  align-content:center;
  display:block;
/*   width:80%; */
}
/* Subheading */
h2 {
  font-family: 'neue-machina-inktrap-light';
  color: var(--color-highlight);
}

h1 a{
  text-decoration: none;
  color: var(--color-bg-highlight);
}
p {
  font-family: 'neue-machina-inktrap-light';
/*   color: #2800FF; */
}

.bg_text{
  font-size:18em;
/*   color: var(--color-bg-highlight); */
  color: hsl(40, 100%, 20%);
  filter: blur(10px);
  z-index: -1;
     position: absolute;
   top: 10vh;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}



/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}


#cropperimage{
    display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;
}
.cropping_container{
  max-width: 400px;
}

  .flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*               border-radius: 1px; */
    /*               border-color: #bbe7ed; */
    /*               border-style: solid; */
  }
  .flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: flex-end;
  }
  .overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    transition: 0.75s;
    display: none;
  }

  .overlay-content {
    position: relative;
/*         top: 25%; */
/*         width: 100%; */
    text-align: center;
    margin-top: 30px;
    height:80vh;
    justify-content:center;
  }

  .overlay a {
    padding: 8px;
    text-decoration: none;
/*         font-size: 36px; */
    cursor: pointer;
    color: #818181;
    display: block;
    transition: 0.3s;
  }

  .overlay a:hover,
  .overlay a:focus {
    color: var(--color-bg-highlight);
  }

  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    padding:10px 20px;
    z-index: 1
  }

  @media screen and (max-height: 450px) {
    .overlay a {
      font-size: 20px;
    }
    .overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
    }
  }