/* fonts */

@font-face {
  font-family: literata;
  src: url(fonts/literata/Literata-Regular.ttf);
}
@font-face {
  font-family: spectral;
  src: url(fonts/spectral/Spectral-Regular.ttf);
}

div {
    margin: 5vh 5vw 5vh 5vw;
    background-color: #ffffff46;
    padding: 20px;
    border: white 2px solid;
}

/* for scaling */

@media screen and (min-width: 100vh) {
  div {
    margin-left:15vw;
    margin-right:15vw;
    }
}

hr { /* dividers */
    height: 2px;
    color: white;
    background: white;
    font-size: 0;
    border: 0;
    width: 20%;
    margin-top: 40px;
    margin-bottom: 40px;
}

a { /* links */
    text-decoration: none;
    color: #4d0e0d;
    font-weight: bold;
    cursor: pointer;
}

a:hover {
    color: #771d1c;
}

h1 {
    text-align: center;
    color: white;
}

h1 + p {
    text-align: center;
    background-color: #ffffff46;
    padding: 10px;
}

body {
    background: rgb(115, 180, 109);
    background-image: linear-gradient(180deg, rgb(151, 71, 70) 0%, rgb(169, 113, 196) 50%, rgb(115, 180, 109) 100%);
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment:scroll;
    font-family: spectral;
    font-size: 17px;
}

html {
    scrollbar-color: #4d0e0d rgb(151, 71, 70);
}

#mainpage {
    background-attachment:fixed;
}

/* slider bullshit */

#sizeslider {
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, rgb(151, 71, 70) 0%, rgb(169, 113, 196) 50%, rgb(115, 180, 109) 100%);
    border-radius: 10px;
    height: 10px;
    border: 2px white solid;
}

#sizeslider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: white; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 20px;
}

#sizeslider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: white; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 20px;
}

#savebutton {
    background-color: rgba(255, 255, 255, 0.493);
    padding: 10px;
    margin-top: 10px;
    font-family: spectral;
    border: white 2px solid;
    font-size: 17px;
    cursor: pointer;
}

#lightslider {
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(0, 0, 0) 100%);
    border-radius: 10px;
    height: 10px;
    border: 2px white solid;
}

#lightslider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: white; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 20px;
}

#lightslider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: white; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 20px;
}