html {
  background-color: #2e2e2e;
}

img {
  display: block;
}


.BlockLink {
  display: block;
}



@media screen and (min-width: 635px) {

  #Mobile {
    display: none;
  }



  .wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(9.1em, 1fr));
    grid-auto-rows: minmax(5em, auto);
    /* aspect-ratio: 0.8 / 1; */


    border: 0px solid #2e2e2e;
    background-color: #2e2e2e;
    margin-right: 8vw;
    margin-left: 7vw;
    margin-bottom: 4em;
    margin-top: 3vw;
  }

  #MobileHeading {
    display: none;
  }

  #CasM {
    display: none;
  }

  #JobM {
    display: none;
  }

  #HarM {
    display: none;
  }

  .B-2 {
    margin: 5px;
  }

  #B3 {
    margin: 5px;
  }

}

@media screen and (max-width: 634px) {

  #Desktop {
    display: none;
  }

  #NoUnd-CommentDesktop {
    display: none;
  }

  #B3 {
    display: none;
  }





  /* #MobileHeading {
    color: #dddddd;
    font-size: 200%;
    text-align: center;
  } */

  #CasM {
    font-size: 300%
  }

  #JobM {
    text-align: right;
    font-size: 350%
  }

  #HarM {
    font-size: 300%;
    text-align: center;
  }

  #cas {
    display: none;
  }

  #ey {
    display: none;
  }

  #jobe {
    display: none;
  }

  #har {
    display: none;
  }

  #in {
    display: none;
  }

  /* #HostedBy {
  } */

  #likeB-2 {
    display: none;
  }

  .wrapper {
    margin-top: 8vw;
  }

  .B-2 {
    margin-bottom: 6vw;
  }

  #B3 {
    margin-bottom: 6vw;
  }

  .IndexGrid-ThumbnailTitleW {
    font-size: 220%;
  }

  .IndexGrid-ThumbnailTitleB {
    font-size: 220%;
  }
}

/* .wrapper > div {
  border: 2px solid #dddddd;
  margin: .25em;
  padding: 1em;
}

I will un-comment this in order to implement styling over the entire grid (B-1 AND B-2) */


.wrapper>.B-1 {
  background-color: #2e2e2e;
  color: #dddddd;
  position: relative;
}

.wrapper>.B-2 {
  background-color: #dddddd;
  font-size: calc(5px + .9vw);

  aspect-ratio: 1 / 1;

  border: 3px solid #dddddd;


  position: relative;
  text-align: center;

  overflow: clip;
}

#B3 {
  background-color: #2e2e2e;
  font-size: calc(5px + .9vw);


  border: 0px;


  position: relative;
  text-align: center;
}

.wrapper>.B-4 {
  color: #dddddd;
  font-size: calc(5px + .9vw);

}

/* contact buttons with no scroll: */
/* #Q1 {
  display: block;
  padding-top: 4.5vw;
  font-size: calc(8px + 1.1vw);
  padding-left: 2.5vw;
}

#Q2 {
  display: block;
  padding-top: 1.5vw;
  font-size: calc(10px + 1.6vw);
  padding-left: 2.5vw;
}

#Q3 {
  display: block;
  padding-top: 1vw;
  font-size: calc(10px + 3.2vw);
  padding-left: 2.5vw;
} */

/* contact button with dynamic scroll:  */



#poem-title {
  color: #dddddd;
}

.poem {
  position: sticky;
  display: block;
  font-size: 110%;
}

.poem2 {
  position: sticky;
  display: block;
  top: -4em;
  font-size: 110%;
  line-height: 1.45;

}

#Q1 {
  display: block;
  padding-top: 4.5vw;
  font-size: calc(8px + 1.1vw);
  padding-left: 2.5vw;
  position: sticky;
  margin-bottom: 1.75vw;
  padding-bottom: 6.75vw;

  top: 20vw;
}

#Q2 {
  display: block;
  font-size: calc(10px + 1.6vw);
  padding-left: 2.5vw;
  position: sticky;
  margin-top: -7vw;
  margin-bottom: 1.5vw;
  padding-bottom: 3.5vw;

  top: 35vw;
}

#Q3 {
  display: block;
  font-size: calc(10px + 3.2vw);
  padding-left: 2.5vw;
  position: sticky;
  margin-top: -4.25vw;
  padding-bottom: .5vw;

  top: 50vw;
}

.IndexGrid-ThumbnailTitleW {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -65%);

  color: #2e2e2e;
  background-color: #dddddd;

  padding: 2%;
  border-radius: 5%;
}

.IndexGrid-ThumbnailTitleB {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -65%);

  color: #dddddd;
  background-color: #2e2e2e;

  padding: 2%;
  border-radius: 5%;
}

.wrapper>.B-2>.MainGrid-thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* height: 100%; */
  object-fit: cover;
  border: 0;
  filter: sepia(5%) saturate(110%);
  /* Remove default border */
  /* margin-left: 5vw;
  margin-right: 5vw; */
}

.wrapper>.B-2,
#likeB-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#likeB-2 {
  color: #dddddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.LinkInGrid {
  text-decoration: none;
}

#cas,
#ey {
  color: white;


  font-size: calc(30px + 3.85vw);
  margin-top: 3vw;
  margin-bottom: calc(-0.5em + 2.5vw);
}

#cas {
  position: sticky;
  top: 6vw;
}

#ey {
  position: sticky;
  top: .5vw;
}

#jobe {
  color: white;

  font-size: calc(25px + 2vw);
  margin-top: calc(1em - 120/1vw);
  /* margin-top: 0; */
  margin-bottom: 0;

  position: sticky;
  top: 0.1vw;
}

#har,
#in {
  color: white;

  font-size: calc(1em + 4.6vw);
  margin-top: 8vw;
  margin-bottom: 0vw;

  position: sticky;
  top: 20vw;
}

#cas,
#har,
#jobe {
  text-align: right;
}

#HostedBy {
  width: 80%;
  display: block;
  margin-bottom: -150px;
  margin-top: -150px;

  /* position: sticky;
  top: 40vw; */
}




/* GENERAL SUB-PAGE STUFF */

.ContainerFlexBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.Subpage-Title {
  font-size: 9vw;
  color: #dddddd;
  text-align: left;
  margin-top: -2vw;
  margin-bottom: -1vw;
}

#LongSubpage-title {
  font-size: 7vw;
  margin-bottom: 3vw;
}

.Subpage-Homelink-D:link {
  text-decoration: none;
  color: #dddddd;
}

.Subpage-Homelink-D:visited {
  text-decoration: none;
  color: #dddddd;
}

.Subpage-Homelink-D:hover {
  text-decoration: underline;
  color: #dddddd;
}

.Subpage-Homelink-D:active {
  text-decoration: none;
  color: #a9a9a9;
}

.Subpage-Homelink-M:link {
  text-decoration: none;
  color: #dddddd;
}

.Subpage-Homelink-M:visited {
  text-decoration: none;
  color: #dddddd;
}

.Subpage-Homelink-M:hover {
  text-decoration: underline;
  color: #dddddd;
}

.Subpage-Homelink-M:active {
  text-decoration: none;
  color: #a9a9a9;
}

.Subpage-Homelink-D h3 {
  font-size: calc(24px + 1vw);
  color: #dddddd;
  text-align: left;
}

.Subpage-Homelink-M h3 {
  font-size: calc(24px + 1vw);
  color: #dddddd;
  text-align: left;
}

.ItemHeading {
  font-size: calc(24px + 1vw);
  color: #dddddd;
  /* text-decoration: underline; */

}

.ItemDescription {
  color: #dddddd;
  line-height: 200%;
  text-align: center;
  /* margin-top: calc(30px - 4vw); */
  margin-bottom: 1vw;
  font-size: 130%;
}

p {
  color: #dddddd;

}

.paragraph {
  color: #dddddd;
  text-indent: 30px;
  line-height: 200%;
  margin-left: 10vw;
  margin-right: 10vw;
  /* margin-top: calc(30px - 4vw); */
  margin-bottom: 1vw;
  font-size: 130%;
}



a:link {
  text-decoration: underline;
  color: #dddddd;
}

#NoUnd {
  text-decoration: none;
}

#NoUnd-CommentDesktop {
  text-decoration: none;
}

a:visited {
  text-decoration: underline;
  color: #dddddd6f;
}

a:hover {
  text-decoration: underline;
  color: #b9a136;
}

a:active {
  color: #ffea63;
  text-decoration: none;
}



.textbutton:hover {
  text-decoration: underline;
}

/* .small-TM {
  margin-top: -100px;
} */

.OneOneGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(1em, auto);

  margin-left: 10vw;
}



.blinking {
  animation: blinkingText .6s infinite;
}

.visible {
  display: inline;
}

.hidden {
  display: none;
}

@keyframes blinkingText {
  5% {
    color: #ff0000;
  }

  49% {
    color: #ffffff;
  }

  60% {
    color: #ffffff;
  }

  99% {
    color: #ffffff;
  }

  100% {
    color: #ffffff;
  }
}



@media screen and (min-width: 831px) {

  #MobileSub {
    display: none;
  }

  .GridImage {
    width: 95%;
    margin-top: 20px;
    Margin-bottom: 20px;
    Margin-left: 2.5px;
    margin-right: 2.5px;
  }


  /* for harmonbraun page: */
  .HBGrid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-auto-rows: minmax(1em, auto);

    margin-right: 4vw;
    margin-left: 3vw;
    margin-bottom: 4em;
    margin-top: 3vw;
  }

  #HBThirdBox {
    margin-top: -0.4vw;
  }

  .harmonbraun iframe {
    margin-top: 5vw;
  }

  /* for all subpages: */

  .textbutton {
    background: none;
    border: none;
    display: inline;
    cursor: pointer;
    font: inherit;
    font-size: 3vw;
    color: #dddddd;
    padding: 0;
    margin: 0;
  }

  .Subpage-Homelink-D h3 {
    margin-top: -.5vw;
    font-size: calc(10px + 1.1vw);
  }

  .Subpage-Homelink-M h3 {
    display: none;
  }

  .GeneralImage {
    width: 30%;
    margin: 20px;
  }

  .LargeImage {
    width: 70%;
    margin: 20px;
  }

  .LargeImageLink {
    width: 70%;
    margin-left: 15%;
    margin-right: 20%;
    margin-top: 3%;
    margin-bottom: 3%;

  }


  .SmallImage {
    width: 15%;
    margin: 20px;
  }

  .caption {
    margin-top: -1em;
    text-align: right;
    margin-right: 15%;
  }

  .HoriFlexbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  hr {
    margin-top: 3vw;
    margin-bottom: 3vw;
    margin-left: 6vw;
    margin-right: 6vw;
  }

  .container-for-iframe {
    --scale-factor: 1.2;
    overflow: auto;
    width: 60%;
    height: 60vh;
    border: 1px solid black;
  }

  .spam-button {
    width: calc(80px + 8vw);
    float: right;
    background: none;
    border: none;
    display: inline;
    cursor: pointer;
    font: inherit;
    color: #dddddd;
    padding: 0;
    margin: 0;
  }

  .fixed-scroll {
    position: fixed;
    top: 5%;
    right: 3%;
    width: 100%;
    /* margin-bottom: -10000px; */
  }

}

@media screen and (max-width: 830px) {

  #DesktopSub {
    display: none;
  }

  .OneOneGridMobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(1em, auto);
    align-items: center;

    margin: 5vw;
  }

  .GridImage {
    width: 95%;
    margin: 1vw;
    /* margin-top: 20px;
    Margin-bottom: 20px;
    Margin-left: 2.5px;
    margin-right: 2.5px; */
  }

  /* for harmonbraun page: */
  .HBGrid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-right: .5vw;
    margin-left: .5vw;
    margin-bottom: 4em;
    margin-top: 2vw;
  }

  /* for all subpages: */

  .textbutton {
    background: none;
    border: none;
    display: inline;
    cursor: pointer;
    font: inherit;
    font-size: calc(17px + 2vw);
    color: #dddddd;
    padding: 0;
    margin: 0;
  }

  .Subpage-Homelink-M h3 {
    margin-top: -1.8vw;
    margin-bottom: 1vw;
    font-size: calc(16px + 1vw);

  }

  .Subpage-Homelink-D h3 {
    display: none;
  }

  .GeneralImage {
    width: 80%;
    margin: 20px;

  }

  .LargeImage {
    width: 80%;
    margin: 20px;

  }

  .SmallImage {
    width: 50%;
    margin: 20px;
  }

  .caption {
    margin-top: -1em;
    text-align: right;
    margin-right: 10%;
  }

  .HoriFlexbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  hr {
    margin-top: 8vw;
    margin-bottom: 8vw;
    margin-left: 6vw;
    margin-right: 6vw;
  }

  .old-tugboat-score {
    margin-top: 2vw;
  }

  .container-for-iframe {
    --scale-factor: 1.2;
    overflow: auto;
    width: 95%;
    height: 60vh;
    border: 1px solid black;
  }

  .spam-button {
    width: 150px;
    float: right;
    background: none;
    border: none;
    display: inline;
    cursor: pointer;
    font: inherit;
    font-size: calc(17px + 2vw);
    color: #dddddd;
    padding: 0;
    margin: 0;
  }

  .fixed-scroll {
    position: fixed;
    top: 10%;
    right: 5%;
    width: 100%;
    /* margin-bottom: -10000px; */
  }

}

/* for harmonbraun page: */
.harmonbraun iframe {
  flex: 1 1 auto;
  min-height: 100%;
  border: 0;
  width: 200px;
  height: 342px;
}

/* .google-form {
  height: 60vh;
  width: 70%;
  resize: both;
  overflow: auto;
} */



.google-form {
  transform: scale(var(--scale-factor));
  width: calc(1/var(--scale-factor) * 100%);
  height: calc(1/var(--scale-factor) * 100%);
  transform-origin: 0 0;
}



/* for tugboats page */
.old-tugboat-score {
  /* flex: 1 1 auto;
  min-height: 100%;
  border: 15px black;
  width: 80%;
  height:400px; */

  height: 60vh;
  width: 80%;
  resize: both;
  overflow: auto;
}

/* .old-tugboat-score.expanded {
 width: 20%;
}

.old-tugboat-score.collapsed {
  min-height: 100%;
  border: 15px black;
  width: 80%;
  height:400px;
} */

.bottom-expander {
  margin-bottom: 200%;
}