.body{
    background: url(makebackground.png);
    margin: 0px;
    padding: 0px;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
}
.Title{
    font-size: 35px;
    text-align: center;
    top: 0.2%;
    left: 50%;
    position: fixed;
    transform: translate(-50%);
    width: 80%;
    font-weight: bold;
    color: rgb(199, 187, 187);
    font-family: monospace;
    background-color: #231f20;
    border: 2px #231f20;
    border-radius: 20px;

}

.btn {
  cursor: pointer;

      font-family: monospace;
      position: fixed;
      top: 15px;
      right: 20px;
      background-color: #231f20;
      height: 20px;
      width: 55px;
      color: #ffffff;
      font-size: 20px;
      box-shadow: 0 0px 20px rgba(0, 0, 0, 0.6);
      border-top-left-radius:25px;  
      border-top-right-radius:25px;  
      border-bottom-right-radius:25px;  
      border-bottom-left-radius:25px;
}
.btn:hover{
  opacity: 0.5;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;

}
@media only screen and (max-width: 1200px) {
  .btn {    
      cursor: pointer;
      font-family: monospace;
      position: fixed;
      top: 15px;
      left: 40%;
      background-color: #231f20;
      height: 35px;
      width: 70px;
      color: #ffffff;
      font-size: 28px;
      box-shadow: 0 0px 20px rgba(0, 0, 0, 0.6);
      border-top-left-radius:25px;  
      border-top-right-radius:25px;  
      border-bottom-right-radius:25px;  
      border-bottom-left-radius:25px;
  
  

  
  } 
}

.bloginput{
    color: rgb(199, 187, 187);
    background-color: #231f20;
    position: fixed;
    width: 50%;
    height: 50%;
    top: 20%;
    left: 50%;
    word-wrap: break-word;
    transform: translateX(-50%);
    border-radius: 20px;
    text-align: center;
}

.fileinputtext{
  background-color: #231f20;
  width: 30%;
  height: 10%;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  color: rgb(199, 187, 187);
  border-radius: 20px;
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.submitbtn{
    background-color: #231f20;
    position: fixed;
    width: 10%;
    height: 10%;
    top: 80%;
    transform: translate(-50%);
    color: rgb(199, 187, 187);
    border-radius: 15px;
    border: rgb(199, 187, 187);
}
.filelabel{
  background-color: #231f20;
  width: 30%;
  height: 10%;
  color: rgb(199, 187, 187);
  border-radius: 20px;
}
input[type="file"] {
  display: none;
  background-color: #231f20;
  width: 30%;
  height: 10%;
  color: rgb(199, 187, 187);
  border-radius: 20px;
}
.nameinput{
    background-color: #231f20;
    color: rgb(199, 187, 187);
    text-align: center;  
    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    width: 15vw;
    height: 7%; 
}
.emailinput{
  background-color: #231f20;
  color: rgb(199, 187, 187);
  text-align: center;  
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.6);
  border-radius: 15px;
  width: 15vw;
  height: 7%; 
}
.submitbtn{
  background-color: #231f20;
  color: rgb(199, 187, 187);
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.6);
  border-radius: 15px;
  width: 10%;
  height: 15%;
  font-size: 35px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  bottom: 30%;
}
.crossbtn{
  background-color: #231f20;
  color: rgb(199, 187, 187);
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.6);
  border-radius: 15px;
  width: 5%;
  height: 15%;
  font-size: 35px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  bottom: 30%;
}
#popupbtn{
  position: relative;
  display: inline-block;
  cursor: pointer;
  position: fixed;
  top: 80%;
  left: 50%;
  transform: translate(-50%);
  background-color: #231f20;
  color: rgb(199, 187, 187);
  border-radius: 15px;
  width: 150%;
  height: 100%;
  font-family: monospace;
  font-size: 30px;
  font-weight: bold;
}
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    position: fixed;
    top: 80%;
    left: 50%;
    transform: translate(-50%);
    color: rgb(199, 187, 187);
    border-radius: 15px;
    width: 10%;
    height: 10%;
    font-family: monospace;
    font-size: 30px;
    font-weight: bold;
  }
  
  /* The actual popup (appears on top) */
  .popup .popuptext {
    visibility: visible;
    width: 70vw;
    height: 70vh;
    background-color: #231f20;
    color: rgb(199, 187, 187);
    text-align: center;
    border-radius: 15px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translate(-50%);
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class when clicking on the popup container (hide and show the popup) */
  #myPopup {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
  }
  .hide{
    display: none;
  }
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }
  @keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
  }
  @-webkit-keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
  }

body, html {
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 1200px) {
  .Title{
    font-size: 20px;
    text-align: center;
    top: 0.2%;
    left: 50%;
    position: fixed;
    transform: translate(-50%);
    width: fit-content;
    word-wrap: break-word;
    font-weight: bold;
    color: rgb(199, 187, 187);
    font-family: monospace;
    background-color: #231f20;
    border: 2px #231f20;
    border-radius: 20px;
  }

  .bloginput{
    color: rgb(199, 187, 187);
    background-color: #231f20;
    position: fixed;
    width: 70%;
    height: 50%;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    vertical-align: text-top;
    text-align: center;
  }

  #popupbtn{
    position: fixed;
    display: inline-block;
    cursor: pointer;
    position: fixed;
    top: 80%;
    left: 50%;
    transform: translate(-50%);
    background-color: #231f20;
    color: rgb(199, 187, 187);
    border-radius: 15px;
    width: 420%;
    height: 100%;
    font-family: monospace;
    font-size: 30px;
    font-weight: bold;
  }

  .emailinput{
    background-color: #231f20;
    color: rgb(199, 187, 187);
    text-align: center;  
    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    width: 35vw;
    height: 8%; 
  }

  .crossbtn{
    background-color: #231f20;
    color: rgb(199, 187, 187);
    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    width: 20%;
    height: 15%;
    font-size: 35px;
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    bottom: 30%;
  }

  .submitbtn{
    background-color: #231f20;
    color: rgb(199, 187, 187);
    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    width: 45%;
    height: 15%;
    font-size: 35px;
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    bottom: 30%;
  }

  .popup .popuptext {
    visibility: visible;
    width: 75vw;
    height: 70vh;
    background-color: #231f20;
    color: rgb(199, 187, 187);
    text-align: center;
    border-radius: 15px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translate(-50%);
  }
}