@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');


@font-face{
  font-family: "ComforterBrush-Regular";
    src: url('../fonts/ComforterBrush-Regular.ttf'),
    url('../fonts/ComforterBrush-Regular.ttf');
}
@font-face{
    font-family: "Audiowide-Regular";
    src: url('../fonts/Audiowide-Regular.ttf'),
    url('../fonts/Audiowide-Regular.ttf');
}

@font-face{
  font-family: "Orbitron-Medium";
  src: url('fonts/Orbitron-Medium.ttf'),
  url('fonts/Orbitron-Medium.ttf');
}

* ,
*::before,
*::after {
    margin:0;
    padding:0;
}
:root {
  --light: white;
  --gold:rgba(255, 238, 0, 0.828);
  --blue: #2eb1c2;
  --green: #04a126;
  --purple:#8c27eb;
  --orange:#ed490e;
  --red:#e51106;
  --dark:black;
}
  .success, .error {
    color: white;
    padding: 5px;
    margin: 5px 0 15px 0;
    left:50%;
  }
 .open-book{
  position: relative;
  left:30%;
  translate: transform(-50%, -50%);
 }
  .success {
    background: green;
  }
#nerd{
position: relative;
}
  .error {
    background: red;
    box-shadow: 2px 2px 2px black;
    font-family: "Orbitron-Medium", "Poppins", sans-serif;
  }
  #title {
    font-family: "Orbitron-Medium", "Poppins", sans-serif;
    font-size:2rem;
    letter-spacing: 2px;
  }
  #author {
    font-family: "ComforterBrush-Regular";
    font-size:2rem;
    letter-spacing: 2px;
  }
  #isbn {
    font-family: "Audiowide-Regular";
    font-size:2rem;
    letter-spacing: 2px;
  }
  .title {
    font-family: "Orbitron-Medium", "Poppins", sans-serif;
    font-size:2rem;
    letter-spacing: 2px;
  }
  .author {
    font-family: "ComforterBrush-Regular";
    font-size:2rem;
    letter-spacing: 2px;
  }
  .isbn {
    font-family: "Audiowide-Regular";
    font-size:2rem;
    letter-spacing: 2px;
  }

  .clear{
    width:66px;
    cursor:pointer;
  }

  .pencil{
    cursor: pointer;
  }
  #submit{
    color:black;
    font-size: 17rem;
    font-family: "Audiowide-Regular", "Orbitron-Medium", "Poppins", sans-serif;
    letter-spacing:7px;
    transition: all ease-in-out;
  }

  #submit:hover{
    color:var(--dark);
    font-size: 1.7rem;
    font-family:"Poppins";
    letter-spacing: 22px;


  }
  /* Start of: Media Query Breakpoints */

  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .open-book{
    position: relative;
    width:200px;
    left:30%;
    translate: transform(-50%, -50%);
   }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .open-book{
    position: relative;
    text-align: center;
    left:30%;
    translate: transform(-50%, -50%);
   }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /* .open-book{
    position: relative;
    text-align: center;
    left:30%;
    translate: transform(-50%, -50%);
   } */
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
   /* .open-book{
    position: relative;
    text-align: center;
    left:30%;
    translate: transform(-50%, -50%);
   } */
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
   /* .open-book{
    position: relative;
    text-align: center;
    left:30%;
    translate: transform(-50%, -50%);
   } */
}