html{scroll-behavior: smooth;}

body{
   margin: 0;
   padding: 0;
   color: var(--color);
   background: var(--background);
   text-align: center;
   font-family: "open sans", sans-serif;
   scroll-behavior: smooth;
   --maincolor: #181818;
   --secondcolor: var(--maincolor);
   --background: #f6f6f6;
   --color: #181818;
   overflow: hidden;
   }

   #content{
     margin: 0;
     padding: 10px;
     width: 100%;
     user-select: none;
   }

   #navbar{
     width: 100%;
     height: 56px;
     margin: 0;
     position: fixed;
     top: 0;
     left: 0;
     text-align: center;
     font-size: 18px;
     opacity: 0.7;
     -webkit-backdrop-filter: blur(4px);
     backdrop-filter: blur(4px);
     z-index: 999;
   }

   #navbar-placeholder{
     width: 100%;
     height: 56px;
     margin: 0;
     position: static;
     top: 0;
     left: 0;
     background: transparent;
     z-index: 1;
   }

   #urlContainer{
     text-align: center;
     justify-content: center;
     align-content: center;
     margin-top: calc(35vh - 20px);
   }

   #urlContainer input{
     width: 80%;
     max-width: 200px;
     height: auto;
     margin: 10px;
     font-size: 14px;
     background: var(--color);
     color: var(--background);
     border: 2px solid transparent;
     border-radius: 8px;
     outline: none;
     font-size: 14px;
     padding: 4px;
     font-family: "open sans", sans-serif;
   }

   .creatorButton{
     border: none;
     background: transparent;
     outline: none;
     font-size: 26px;
     display: inline-flex;
     margin: 5px;
     transition: .4s ease;
     color: var(--color);
   }

   .creatorButton:hover{
     transform: rotate(270deg);
   }

   #copyAlert{
     width: 80%;
     height: auto;
     font-size: 14px;
     text-align: center;
     background: var(--color);
     color: var(--background);
     border: 2px solid transparent;
     border-radius: 8px;
     margin-left: 10%;
     position: fixed;
     bottom: 40px;
     transition: .2s linear;
     display: none;
   }

   #copyAlert:hover{
     background: var(--background);
     color: var(--color);
     border: 2px solid;
     border-color: var(--color);
   }

   .disableSelection{
     user-select: none;
     -moz-user-select: none;
     -khtml-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
   }


  ::selection {background: var(--maincolor); color: #ffffff; border-radius: 12px;}
  ::-moz-selection {background: var(--maincolor); color: #ffffff; border-radius: 12px;}