@font-face {
    font-family: seinfeld;
    src: url("Seinfeld Font-Oblique.otf");
}
body{
    background-image: url("bgpic.png");
    background-size: 1615px;
    background-repeat: no-repeat;
    height: 785px;
}
#searchbar{
    font-family: seinfeld;
    font-weight: 600;
    font-size:30px;
    color: #423a43;
    text-shadow:  1px 1px #000000;
    border-color: #706376;
    background-color: #5c4f62;
    box-shadow: 0px 0px  50px #000000;
    border-width: 10px;
    position: absolute;
    border-style: solid;  
    top: 130px;
    left: 60px;
    width: 700px;
    height: 50px;
}
#searchbutton{
    font-family: Seinfeld;
    font-size: 20px;
    font-weight: 600;
    color: #e4021c;
    background: linear-gradient( #fcd81a,#c1a416);
    border-style: solid;
    border-radius: 35px;
    border-color: #c1a416;
    box-shadow: 0px 0px 30px#000000;
    border-width: 5px;
    text-shadow:1px 1px black;
    top: 215px;
    left: 60px;
    position: absolute;
    width: 725px;
    height: 50px;
}
#sendbutton{
    font-family: Seinfeld;
    font-size: 20px;
    font-weight: 600;
    color: #e4021c;
    background: linear-gradient( #fcd81a,#c1a416);
    border-style: solid;
    border-radius: 35px;
    border-color: #c1a416;
    box-shadow: 0px 0px 30px#000000;
    border-width: 5px;
    text-shadow:1px 1px black;
    bottom: 10px;
    left: 15px;
    position: absolute;
    width: 525px;
    
}
.contactbox{
    position: absolute;
    left: 10px;
    top: 10px;
    width: 525px;
    height: 250px;

}
#name{
    position: absolute;
    height: 15px;
    width: 525px;
}
#email{
    position: absolute;
    height: 15px;
    width: 525px;
}
#message{
    position: absolute;
    height: 50px;
    width: 525px;
}
.contacts{
    border-color: #706376;
    background-color: #5c4f62;
    box-shadow: 0px 0px  150px #000000;
    border-width: 15px;
    position: absolute;
    border-style: solid;
    top: 35px;
    right: 50px;
    width: 555px;
    height: 200px;
}
.buttonbox{
background: transparent;
}
button{
    width: 540px;
    height: 70px;
    background: linear-gradient( #776a7e,#5d4f63);
    border-style: solid;
    border-width: 6px;
    border-color: #66586b;
    opacity: 100%;
}
button:hover{
    opacity: 70%;
}
#s1and2cover{
    margin: 15px;
    background-size: cover;
    background-image: url("boxart1&2.png");
    width: 268px;
    height: 372px;
    border-style:solid;
    border-width: 10px;
    border-color: #4b434f;
    opacity: 70%;
}
#s3cover{
    margin: 15px;
    background-size: cover;
    background-image: url("boxart3.png");
    width: 268px;
    height: 372px;
    border-style:solid;
    border-width: 10px;
    border-color: #4b434f;
    opacity: 70%;
}
#s4cover{
    margin: 15px;
    background-size: cover;
    background-image: url("boxart4.png");
    width: 268px;
    height: 372px;
    border-style:solid;
    border-width: 10px;
    border-color: #4b434f;  
    opacity: 70%;
}
#s5cover{
    margin: 15px;
    background-size: cover;
    background-image: url("boxart5.png");
    width: 268px;
    height: 372px;
    border-style:solid;
    border-width: 10px;
    border-color: #4b434f;
    opacity: 70%;
}
#s6cover{
    margin: 15px;
    background-size: cover;
    background-image: url("boxart6.png");
    width: 268px;
    height: 372px;
    border-style:solid;
    border-width: 10px;
    border-color: #4b434f;
    opacity: 70%;
}
#s7cover{
    margin: 15px;
    background-size: cover;
    background-image: url("boxart7.png");
    width: 268px;
    height: 372px;
    border-style:solid;
    border-width: 10px;
    border-color: #4b434f;
    opacity: 70%;
}
#s8cover{
    margin: 15px;
    background-size: cover;
    background-image: url("boxart8.png");
    width: 268px;
    height: 372px;
    border-style:solid;
    border-width: 10px;
    border-color: #4b434f;
    opacity: 70%;
}
#s9cover{
    margin: 15px;
    background-size: cover;
    background-image: url("boxart9.png");
    width: 268px;
    height: 372px;
    border-style:solid;
    border-width: 10px;
    border-color: #4b434f;
    opacity: 70%;
}
.description{
    text-align: center;
    display: inline-block;
    padding: 5px;
    position: relative;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size:120px;
    color: #ff0000;
    text-shadow:  0px 0px 75px #ff0000;
    background:rgb(32, 32, 66);
    size: 70px;
    border-style:solid;
    border-color: #ffffff;
    border-radius: 5px; 
    border-width: 10px;
    overflow-y: auto;
    left: 20px;
    width: 750px;
    height: 175px;
    box-shadow: 0px 0px 15px #000000;
    opacity: 90%;
}
.introduction{
    left: 15px;
    top: 40px;
    position:absolute;
    font-weight:600;
    font-family: seinfeld;
    font-size:50px;
    color: #e4021c;
    text-shadow: 2px 1px #000;
    background: linear-gradient( #fcd81a,#c1a416);
    height: auto;
    width: 800px;
    box-shadow: 0px 0px 50px#000000;
    border-style: solid;
    border-color: #fcd81a;
    border-radius: 35px;
}
.box{
    display: inline-block;
    margin: 0px;
    position: relative;
    font-weight:600;
    font-family: seinfeld;
    font-size:50px;
    color: #e4021c;
    text-shadow: 2px 1px #000;
    background-color: #4b434f;
    height: 407px;
    width: fit-content;
    border-width: 1px;
    box-shadow: -5px 0px 15px #000;
}
.box:hover{
    opacity: 70%;
}
.boxes{
    left: 50px;
    right: 50px;
    bottom: -40px;
    white-space: nowrap;
    border-style: solid;
    border-width: 20px;
    border-color: #706376;
    background-color: #5c4f62;
    background-color: #2f2832;
    height: 428px;
    overflow-x: scroll;
    overflow-y: hidden;
    box-shadow: 0px 0px  50px #000000;
    position: absolute;
}
::-webkit-scrollbar {
    background-color: #514756;
    width: 15px;
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 25px rgb(255, 191, 0); 
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb {
    background: #b30000; 
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb:active {
    background: #5e0a0a; 
  }
  ::selection {
    color: rgb(255, 0, 0);
    background: rgb(255, 255, 255);
  }
@media screen and (min-width: 245px) and (max-width: 376px) and (orientation: portrait) {
  body {
    height: 800px;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .introduction {
    order: 1;
    font-size: 19px;
    width: 300px;
    height: 25px;
    margin-bottom: 20px;
    padding: 10px;
  }

  #searchbar {
    order: 2;
    width: 290px;
    height: 40px;
    font-size: 20px;
    margin-bottom: 5px;
    border-width: 5px;
    left: 25px;
  }

  #searchbutton {
    order: 3;
    top: 190px;
    left: 30px;
    width: 290px;
    height: 40px;
    font-size: 16px;
    margin-bottom: 20px;
    border-width: 4px;
    border-radius: 25px;
    opacity: 100%;
  }

  .contacts {
    left: 15px;
    top: 280px;
    order: 4;
    width: 300px;
    height: 140px;
    border-width: 8px;
    padding: 5px;
    margin-bottom: 20px;
  }

  .contactbox {
    width: 300px;
    height: 150px;
  }

  #name,
  #email,
  #message {
    width: 280px;
    font-size: 12px;
    height: auto;
    margin-bottom: 5px;
  }

  #sendbutton {
    width: 280px;
    height: 40px;
    font-size: 14px;
    border-width: 3px;
  }

  .boxes {
    left: 5px;
    top: 470px;
    order: 5;
    width: 300px;
    height: 210px;
    padding: 5px;
  }

  .box {
    width: 150px;
    height: 190px;
    font-size: 18px;
  }

  #s1and2cover,
  #s3cover,
  #s4cover,
  #s5cover,
  #s6cover,
  #s7cover,
  #s8cover,
  #s9cover {
    width: 120px;
    height: 160px;
    border-width: 5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media screen and (min-width: 380px) and (max-width: 500px) and (orientation: portrait) {
  body {
    height: 925px;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .introduction {
    order: 1;
    font-size: 22px;
    width: 355px;
    height: 30px;
    margin-bottom: 20px;
    padding: 10px;
  }

  #searchbar {
    order: 2;
    width: 340px;
    height: 40px;
    font-size: 20px;
    margin-bottom: 5px;
    border-width: 5px;
    left: 30px;
  }

  #searchbutton {
    order: 3;
    top: 200px;
    left: 35px;
    width: 340px;
    height: 40px;
    font-size: 16px;
    margin-bottom: 20px;
    border-width: 4px;
    border-radius: 25px;
  }

  .contacts {
    left: 40px;
    top: 280px;
    order: 4;
    width: 300px;
    height: 140px;
    border-width: 8px;
    padding: 5px;
    margin-bottom: 20px;
  }

  .contactbox {
    width: 300px;
    height: 150px;
  }

  #name,
  #email,
  #message {
    width: 280px;
    font-size: 12px;
    height: auto;
    margin-bottom: 5px;
  }

  #sendbutton {
    width: 280px;
    height: 40px;
    font-size: 14px;
    border-width: 3px;
  }

  .boxes {
    left: 30px;
    top: 500px;
    order: 5;
    width: 300px;
    height: 210px;
    padding: 5px;
  }

  .box {
    width: 150px;
    height: 190px;
    font-size: 18px;
  }

  #s1and2cover,
  #s3cover,
  #s4cover,
  #s5cover,
  #s6cover,
  #s7cover,
  #s8cover,
  #s9cover {
    width: 120px;
    height: 160px;
    border-width: 5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media screen and (min-width: 500px) and (max-width: 900px) and (orientation: portrait) {
  body {
    height: 1200px;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .introduction {
    left: 40px;
    order: 1;
    font-size: 40px;
    width: 655px;
    height: 30px;
    margin-bottom: 20px;
    padding: 10px;
  }

  #searchbar {
    order: 2;
    width: 640px;
    height: 40px;
    font-size: 20px;
    margin-bottom: 5px;
    border-width: 5px;
    left: 55px;
  }

  #searchbutton {
    order: 3;
    top: 200px;
    left: 60px;
    width: 640px;
    height: 40px;
    font-size: 16px;
    margin-bottom: 20px;
    border-width: 4px;
    border-radius: 25px;
  }

  .contacts {
    left: 65px;
    top: 280px;
    order: 4;
    width: 600px;
    height: 165px;
    border-width: 8px;
    padding: 5px;
    margin-bottom: 20px;
  }

  .contactbox {
    width: 600px;
    height: 165px;
  }

  #name,
  #email,
  #message {
    width: 580px;
    font-size: 12px;
    height: auto;
    margin-bottom: 5px;
  }

  #sendbutton {
    width: 580px;
    height: 40px;
    font-size: 14px;
    border-width: 3px;
  }

  .boxes {
    left: 55px;
    top: 500px;
    order: 5;
    width: 600px;
    height: 210px;
    padding: 5px;
  }

  .box {
    width: 150px;
    height: 190px;
    font-size: 18px;
  }

  #s1and2cover,
  #s3cover,
  #s4cover,
  #s5cover,
  #s6cover,
  #s7cover,
  #s8cover,
  #s9cover {
    width: 120px;
    height: 160px;
    border-width: 5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media screen and (min-width: 1020px) and (max-width: 1050px) and (orientation: portrait) {
  body {
    height: 1400px;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .introduction {
    left: 40px;
    order: 1;
    font-size: 55px;
    width: 915px;
    height: 50px;
    margin-bottom: 20px;
    padding: 10px;
  }

  #searchbar {
    order: 2;
    width: 890px;
    height: 50px;
    font-size: 40px;
    margin-bottom: 5px;
    border-width: 5px;
    left: 55px;
  }

  #searchbutton {
    order: 3;
    top: 200px;
    left: 60px;
    width: 890px;
    height: 50px;
    font-size: 26px;
    margin-bottom: 20px;
    border-width: 4px;
    border-radius: 25px;
  }

  .contacts {
    left: 65px;
    top: 280px;
    order: 4;
    width: 850px;
    height: 200px;
    border-width: 8px;
    padding: 5px;
    margin-bottom: 20px;
  }

  .contactbox {
    width: 600px;
    height: 165px;
  }

  #name {
    width: 830px;
    font-size: 20px;
    height: auto;
    margin-bottom: 5px;
  }
    #email {
    width: 830px;
    font-size: 20px;
    height: auto;
    margin-top: 5px;
  }
  #message {
    width: 830px;
    font-size: 20px;
    height: 70px;
    margin-top: 15px;
  }

  #sendbutton {
    width: 830px;
    height: 50px;
    font-size: 20px;
    border-width: 3px;
  }

  .boxes {
    left: 35px;
    top: 550px;
    order: 5;
    width: 900px;
    height: 210px;
    padding: 5px;
  }

  .box {
    width: 150px;
    height: 190px;
    font-size: 18px;
  }

  #s1and2cover,
  #s3cover,
  #s4cover,
  #s5cover,
  #s6cover,
  #s7cover,
  #s8cover,
  #s9cover {
    width: 120px;
    height: 160px;
    border-width: 5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media screen and (min-width: 330px) and (max-width: 780px) and (orientation: landscape) {
body{
  height: 470px;
}
    .introduction {
        font-size: 20px;
        width: 310px;
        height: 20px;
        left: 15px;
        top: 25px;
        padding: 10px;
    }
    #searchbar {
        width: 290px;
        height: 40px;
        font-size: 20px;
        top: 85px;
        left: 30px;
        border-width: 5px;
    }

    #searchbutton {
        width: 290px;
        height: 40px;
        font-size: 16px;
        top: 145px;
        left: 35px;
        border-width: 4px;
        border-radius: 25px;
    }
    .contacts {
        width: 210px;
        height: 130px;
        border-width: 8px;
        padding: 5px;
    }

    .contactbox {
        width: 210px;
        height: 110px;
    }

    #name,
    #email,
    #message {
        width: 190px;
        font-size: 12px;
        height: auto;
        margin-bottom: 5px;
    }

    #sendbutton {
        width: 190px;
        height: 40px;
        font-size: 14px;
        border-width: 3px;
    }
    .boxes {
      top: 210px;
        height: 190px;
        padding: 5px;
    }

    .box {
        width: 130px;
        height: 170px;
        font-size: 18px;
    }

    /* Shrink the cover boxes (background images) */
    #s1and2cover,
    #s3cover,
    #s4cover,
    #s5cover,
    #s6cover,
    #s7cover,
    #s8cover,
    #s9cover {
        width: 100px;
        height: 140px;
        border-width: 5px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}
@media screen and (min-width: 780px) and (max-width: 950px) and (orientation: landscape) {
body{
  height: 490px;
}
    .introduction {
        font-size: 29px;
        width: 450px;
        height: 30px;
        left: 15px;
        top: 20px;
        padding: 10px;
    }
    #searchbar {
        width: 400px;
        height: 40px;
        font-size: 20px;
        top: 100px;
        left: 40px;
        border-width: 5px;
    }

    #searchbutton {
        width: 425px;
        height: 40px;
        font-size: 16px;
        top: 160px;
        left: 35px;
        border-width: 4px;
        border-radius: 25px;
    }
    .contacts {
        width: 300px;
        height: 140px;
        border-width: 8px;
        padding: 5px;
    }

    .contactbox {
        width: 300px;
        height: 150px;
    }

    #name,
    #email,
    #message {
        width: 280px;
        font-size: 12px;
        height: auto;
        margin-bottom: 5px;
    }

    #sendbutton {
        width: 280px;
        height: 40px;
        font-size: 14px;
        border-width: 3px;
    }
    .boxes {
      top: 230px;
        height: 210px;
        padding: 5px;
    }

    .box {
        width: 150px;
        height: 190px;
        font-size: 18px;
    }

    /* Shrink the cover boxes (background images) */
    #s1and2cover,
    #s3cover,
    #s4cover,
    #s5cover,
    #s6cover,
    #s7cover,
    #s8cover,
    #s9cover {
        width: 120px;
        height: 160px;
        border-width: 5px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}
@media screen and (min-width: 951px) and (max-width: 1200px) and (orientation: landscape) {
body{
  height: 490px;
}
    .introduction {
        font-size: 35px;
        width: 550px;
        height: 30px;
        left: 15px;
        top: 20px;
        padding: 10px;
    }
    #searchbar {
        width: 510px;
        height: 40px;
        font-size: 20px;
        top: 100px;
        left: 40px;
        border-width: 5px;
    }

    #searchbutton {
        width: 515px;
        height: 40px;
        font-size: 16px;
        top: 160px;
        left: 45px;
        border-width: 4px;
        border-radius: 25px;
    }
    .contacts {
        width: 350px;
        height: 150px;
        border-width: 8px;
        padding: 5px;
    }

    .contactbox {
        width: 350px;
        height: 150px;
    }

    #name,
    #email,
    #message {
        width: 335px;
        font-size: 12px;
        height: auto;
        margin-bottom: 5px;
    }

    #sendbutton {
        width: 335px;
        height: 40px;
        font-size: 14px;
        border-width: 3px;
    }
    .boxes {
      top: 260px;
        height: 210px;
        padding: 5px;
    }

    .box {
        width: 150px;
        height: 190px;
        font-size: 18px;
    }

    /* Shrink the cover boxes (background images) */
    #s1and2cover,
    #s3cover,
    #s4cover,
    #s5cover,
    #s6cover,
    #s7cover,
    #s8cover,
    #s9cover {
        width: 120px;
        height: 160px;
        border-width: 5px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}
@media screen and (min-width: 1210px) and (max-width: 1400px) and (orientation: landscape) {
  body {
    margin: 0;
    padding: 0;
    background-image: url("bgpic.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    overflow-y: hidden;
  }
    .introduction {
        font-size: 35px;
        width: 550px;
        height: 30px;
        left: 15px;
        top: 20px;
        padding: 10px;
    }
    #searchbar {
        width: 510px;
        height: 40px;
        font-size: 20px;
        top: 100px;
        left: 40px;
        border-width: 5px;
    }

    #searchbutton {
        width: 515px;
        height: 40px;
        font-size: 16px;
        top: 160px;
        left: 45px;
        border-width: 4px;
        border-radius: 25px;
    }
    .contacts {
        width: 350px;
        height: 150px;
        border-width: 8px;
        padding: 5px;
    }

    .contactbox {
        width: 350px;
        height: 150px;
    }

    #name,
    #email,
    #message {
        width: 335px;
        font-size: 12px;
        height: auto;
        margin-bottom: 5px;
    }

    #sendbutton {
        width: 335px;
        height: 40px;
        font-size: 14px;
        border-width: 3px;
    }
    .boxes {
      top: 260px;
        height: 210px;
        padding: 5px;
    }

    .box {
        width: 150px;
        height: 190px;
        font-size: 18px;
    }

    /* Shrink the cover boxes (background images) */
    #s1and2cover,
    #s3cover,
    #s4cover,
    #s5cover,
    #s6cover,
    #s7cover,
    #s8cover,
    #s9cover {
        width: 120px;
        height: 160px;
        border-width: 5px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}