/* General */

body {
     background: content-box radial-gradient(#0d0d1a, #000000)
}

.span {font-size: 1.5rem;}

h1 {
     color: #f7ebeb;
     font-weight: bolder;
     text-align: center;
     font-family:Faculty Glyphic;
}

h2 {
     color: #7d85b4;
     font-weight: 550;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     font-size: 2rem;
}

h3 {
     color: #c0d6eb;
     font-weight:bold;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     font-size: 2rem;
}

p {
     color: #dee2ff;
     font-weight: normal;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     font-size: 1.2rem;
     line-height: 120%;
}

.links {
     color: #5f8fb1;
     font-weight: lighter;
     font-family: Faculty Glyphic;
     font-size: 2rem;
}

.h1box {
     padding: 5%;
     background-image: image-set("blurred.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
}

.button {
     display: flex;
     justify-content: space-between;
     margin-left: 25%;
     padding-top: 1em;
     width: 50%;
}

.button1 {
     display: flex;
     justify-content: center;
     width: auto;
     background-color: #223241;
     padding: 0% 5%;
     margin-left: 10%;
     margin-right: 2%;
     border-radius: 15%;
}

.button2 {
     display: flex;
     justify-content: center;
     width: auto;
     padding: 0% 5%;
     background-color: #223241;
     margin-right: 10%;
     margin-left: 2%;
     border-radius: 15%;
}

.video {
     display: flex;
     justify-content: center;
     width: 900px;
     height: 500px;
     padding: 2px 0 0;
}

.wrapper {
     display: flex;
     justify-content: space-between;
     margin-left: 25%;
     width: 50%;
     padding: 0.5% 0 0.5%;
}

.videowrapper {
     display: flex;
     justify-content: center;
     margin-left: 25%;
     width: 50%;
}

.description {
     text-align: center;
}

.desc2 {padding:3%;  text-align: center;}

.div1 {
     justify-content: center;
     vertical-align: middle;
     width: auto;
}

.wrapper2 {
     display: flex;
     justify-content: space-between;
     margin-left: 25%;
     width: 50%;
     padding-bottom: 2%;
}

.wrapper3 {
     display: flex;
     flex-direction: column;
     margin-left: 25%;
     width: 50%;
}

.gallery-wrapper2 {
     margin-left: 25%;
     margin-right: 25%;
     width: auto;
}

.div2 {
     width: fit-content;
     height: auto;
     display: flex;
     justify-content: space-between;
     color: #c3dbff;
}

img {
     border-radius: 5%;
     border-style: ridge;
     border-color: rgb(234, 235, 253);
     border-width: 200%;
     width: 200px;
     height: 200px;
}

.div2-img {
     padding: 0 2% 0;
     display: flex;
     justify-content: space-between;
}

.imgbox {
     padding: 6%;
     margin-top: 3%;
     background-image: image-set("blurred2.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
}

.review {
     background-color: #0d0d1a;
     padding: 1%;
     margin: 0 0 2%;
}

/* Positioning when changed */

/*dont touch*/
@media screen and (min-width: 950px) {
     .h1box h1 {
          font-size: 6.6vw;
     }
}

@media screen and (max-width: 950px) {
     .h1box h1 {
          font-size: 6.9vw;
     }

     .button {
          width: auto;
          margin-left: auto;
     }

     .button1 p {
          display: flex;
          justify-content: center;
          font-size: 2.3vw;
     }

     .button2 p {
          display: flex;
          justify-content: center;
          font-size: 2.3vw;
     }
}

@media screen and (max-width: 650px) {
     .wrapper {
          width: auto;
          margin: 0 10% 0;
     }

     .gallery-wrapper2 {
          width: auto;
          margin: 0 10% 0;
          justify-content: center;
     }

     .button1 p {
          display: flex;
          justify-content: center;
          font-size: 2.8vw;
     }

     .button2 p {
          display: flex;
          justify-content: center;
          font-size: 2.8vw;
     }

     h2 {
          font-size: 5vw;
     }
}

@media screen and (max-width: 1700px) {
     .gallery-wrapper2 {
          vertical-align: middle;
          width: auto;
     }

     img {
          width: 160px;
          height: 160px;
     }
}

@media screen and (max-width: 1200px) {
     .gallery-wrapper2 {
          vertical-align: middle;
          width: auto;
     }

     img {
          width: 110px;
          height: 110px;
     }

     .video {
          display: flex;
          margin: 0 25% 0;
          width: 700px;
          height: 400px;
          padding: 2px 0 0;
     }

     .wrapper3 {
          margin-left: auto;
          width: auto;
     }
     
}


@media screen and (max-width: 800px) {
     .video {
          display: flex;
          width: 570px;
          height: 270px;
          padding: 0 2% 0
     }

     .gallery-wrapper2 {
          vertical-align: middle;
          width: auto;
     }

     img {
          width: 90px;
          height: 90px;
     }
}