/* CSS by Ben Mathis Seibel 2022 */

@font-face {
  font-family: "Roboto Mono";
  src: url(font2/static/RobotoMono-Regular.ttf);
}

* {
  font-family: "Roboto Mono", monospace;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: whitesmoke;
  margin: 0;
}

/*..........header start..........*/

header {
  background-image: url(img/flower-down.jpg);
  background-color: whitesmoke;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 2vw;
  margin-bottom: 0;
}

header div {
  display: block;
  padding-top: 100px;
  text-align: center;
}

.nav {
  list-style: none;
  font-size: 3vh;
  line-height: 7vh;
}

.nav a {
  text-decoration: none;
  color: whitesmoke;
}

/*..........header end..........*/

/*..........gallery start.........*/

span {
  font-size: 1vw;
}

/*..........first type..........*/

.type1gallery {
  margin: 0;
  padding: 5vw;
  background-color: whitesmoke;
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
}

.type1 {
  display: inline-block;
  padding-left: 15vw;
  height: 15vw;
  padding-right: 5vw;
}

.type1one {
  font-size: 5vw;
}

.type1gallery a {
  text-decoration: none;
  color: #000;
}

/*..........second type..........*/

.type2gallery {
  margin: 0;
  margin-right: 5vw;
  padding: 5vw;
  background-color: #000;
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
}

.type2 {
  display: inline-block;
  height: 15vw;
  padding-left: 5vw;
}

.type2one {
  font-size: 5vw;
}

.type2gallery a {
  text-decoration: none;
  color: whitesmoke;
  padding-left: 15vw;
}

/*..........additional third type..........*/

.type3gallery {
  margin: 0;
  margin-left: 5vw;
  padding: 5vw;
  background-color: #000;
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
}

.type3gallery a {
  text-decoration: none;
  color: whitesmoke;
  padding-left: 15vw;
}

/*..........gallery end..........*/

/*..........about me start..........*/

.block1 {
  background-color: #000;
  float: left;
  width: 15vw;
  height: 0.5vw;
  margin-top: 0.5vw;
  margin-left: 9vw;
}

.chapter1 {
  margin: 0vw;
}

.text1 {
  font-size: 1vw;
  margin: 10vw;
  padding: 5vw;
  padding-top: 3vw;
  padding-bottom: 10vw;
}

.text1 strong p {
  font-size: 3vw;
}

.text1 span p {
  font-size: 1.5vw;
  line-height: 150%;
}

.portrait {
  width: 20vw;
  border-radius: 50%;
  float: right;
  margin-left: 3vw;
  margin-bottom: 3vw;
}

/*..........about me end..........*/

/*..........about this start..........*/

.block2 {
  background-color: whitesmoke;
  float: left;
  width: 15vw;
  height: 0.5vw;
  margin-top: 11vw;
  margin-left: 9vw;
}

.chapter2 {
  background-color: #000;
  margin: 0vw;
}

.text2 {
  color: whitesmoke;
  font-size: 1vw;
  margin: 10vw;
  padding: 5vw;
  padding-top: 13vw;
  padding-bottom: 12vw;
}

.text2 strong p {
  font-size: 3vw;
}

.text2 span p {
  font-size: 1.5vw;
  line-height: 150%;
}

.screenshot {
  width: 20vw;
  border-radius: 50%;
  float: right;
  margin-left: 3vw;
  margin-bottom: 3vw;
}

.text2 a {
  color: whitesmoke;
}

.text2 a:hover {
  text-decoration: none;
}

.p_class {
  font-size: 1.5vw;
}

.p_class2,
.p_class2 a {
  font-size: 1.5vw;
  color: #000;
}

.p_class2 a:hover {
  text-decoration: none;
}

/*..........about this end..........*/

/*..........footer start..........*/

footer {
  background-color: whitesmoke;
  padding: 50px 0 0 0;
}

.footertext {
  color: #000;
  text-align: center;
  font-size: 18px;
}

.fa {
  padding: 50px 50px;
  font-size: 35px;
  color: #000;
  text-decoration: none;
}

/*..........footer end..........*/

/*----------anything under 1500px----------*/

@media only screen and (max-width: 1500px) {
    /*..........footer start..........*/

    footer {
      display: block;
      width: 100vw;
    }
  
    .footertext {
      display: block;
      width: 100vw;
      text-align: center;
      font-size: 18px;
    }
  
    .fa {
      padding: 50px 50px;
      font-size: 35px;
    }
  
    /*..........footer end..........*/
}

/*----------anything under 1300px----------*/

@media only screen and (max-width: 1300px) {
  /*..........header start..........*/

  header {
    background-image: url(img/flower-up1.jpg);
  }

  /*..........header end..........*/

  /*..........gallery start.........*/

  span {
    font-size: 1.25vw;
  }

  /*..........first type..........*/

  .type1gallery {
    padding: 10vw;
  }

  .type1 {
    height: 23vw;
    padding-right: 10vw;
    padding-left: 0vw;
  }

  .type1one {
    font-size: 5vw;
  }

  /*..........second type..........*/

  .type2gallery {
    margin-right: 5vw;
    padding: 10vw;
  }

  .type2 {
    height: 23vw;
    padding-left: 10vw;
  }

  .type2one {
    font-size: 5vw;
  }

  .type2gallery a {
    padding-left: 0;
  }

  /*..........additional third type..........*/

  .type3gallery {
    margin-left: 5vw;
    padding: 10vw;
  }

  .type3gallery a {
    padding-left: 0;
  }

  /*..........gallery end..........*/

  /*..........about me and about this..........*/

  .text1 strong p {
    font-size: 3vw;
  }

  .text1 span p {
    font-size: 1.5vw;
    line-height: 150%;
  }

  .text2 strong p {
    font-size: 3vw;
  }

  .text2 span p {
    font-size: 1.5vw;
    line-height: 150%;
  }

  .p_class2,
  .p_class {
    font-size: 1.5vw;
  }

  /*..........about me and about this..........*/
}

/*----------anything under 1024px----------*/

@media only screen and (max-width: 1024px) {
  /*..........header start..........*/

  header div {
    display: block;
    padding-top: 50px;
    padding-right: 10vw;
    text-align: center;
  }

  /*...........header end..........*/

  /*..........gallery start..........*/

  span {
    font-size: 1.5vw;
  }

  .type1gallery {
    line-height: 40%;
  }

  .type1one {
    line-height: 100%;
  }

  .type2gallery {
    line-height: 40%;
  }

  .type2one {
    line-height: 100%;
  }

  .type3gallery {
    line-height: 40%;
  }

  .type1 {
    height: 25vw;
  }

  .type2 {
    height: 25vw;
  }

  /*...........gallery end..........*/

  /*..........about me and about this..........*/

  .text1 strong p {
    font-size: 5vw;
  }

  .text1 span p {
    font-size: 2.5vw;
    line-height: 170%;
  }

  .portrait {
    width: 35vw;
  }

  .block1 {
    width: 21vw;
    height: 0.75vw;
  }

  .block2 {
    width: 21vw;
    height: 0.75vw;
  }

  .text2 strong p {
    font-size: 5vw;
  }

  .text2 span p {
    font-size: 2.5vw;
    line-height: 170%;
  }

  .p_class2 a,
  .p_class2,
  .p_class {
    font-size: 2.5vw;
  }

  .screenshot {
    width: 35vw;
  }

  /*..........about me and about this..........*/
}

/*.......... anything under 700px .........*/

@media only screen and (max-width: 700px) {
  /*..........footer start..........*/

  footer {
    background-color: whitesmoke;
    padding: 30px 0 0 0;
  }

  .footertext {
    color: #000;
    text-align: center;
    font-size: 10px;
  }

  .fa {
    padding: 25px 25px;
    font-size: 20px;
    color: #000;
    text-decoration: none;
  }
}