#snap {
  scroll-snap-type: y mandatory;
}
.dropbtn {
  position: fixed;
  top: 0px;
  right: 0px;
  background-color: #54ff9f;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: 2px solid black;
}
.icon {
  width: 25px;
  height: 104%;
  position: fixed;
  top: 0;
  right: 0;
  padding-left: 0px;
  padding-top: 0px;
  background-color: #54ff9f;
  border: 2px solid black;
  /*backdrop-filter: blur(15px);*/
  display: flex;
  flex-direction: column;
  transition: 0.5s;
}
.icon {
  list-style: none;
  margin: 0;
}
.icon li img {
  width: 20px;
  margin-left: 0px;
}

.icon {
  display: block;
  align-items: center;
  position: absolute;
  /*background-color: #54ff9f;*/
  /*backdrop-filter: blur(15px);*/
  min-width: 100px;
}
.icon img {
  display: block;
  align-items: center;
}

/* Links inside the dropdown */
.icon a {
  color: black;
  font-size: 12px;
  padding: 18px 15px;
  justify-content: space-between;
  text-decoration: none; /*unterstrich von link weg machen*/
  display: flex;
  flex-direction: column;
}

/* Change color of dropdown links on hover
.icon a:hover {
  background-color: #ddd;
} */

/* Show the dropdown menu on hover */
/* .navicon:hover .icon {
  display: block;
}
.icon:hover {
  width: 200px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  padding-top: 0px;
  display: flex;
  flex-direction: column;
} */
/* Change the background color of the dropdown button when the dropdown content is shown */
/* .dropdown:hover .dropbtn {
  background-color: #54ff9f;
} */
#headh1 {
  margin-left: 5%;
}
.pfp img {
  bottom: auto;
  width: 36%;
  height: auto;
}
.pfp {
  margin-top: 10vh;
}
.background {
  user-select: none;
  width: 100%;
  height: 10vh;
  top: 0;
  right: 0;
  color: #54ff9f;
  background-image: url(Pictures/codegif.gif);
  border: 2px solid black;
}
.container {
  width: 100%;
  height: 100%;
  scroll-snap-type: y mandatory;
  display: flex;
}
.bgimg1 {
  background-image: url(Pictures/bggreenfire.JPG);
  width: auto;
  height: 100%;
}
.bgimg2 {
  background-image: url(Pictures/bgsun.jpg);
  min-height: 80%;
}
.bgimg3 {
  background-image: url(Pictures/bgnn.jpg);
  min-height: 100%;
}
.bgmain {
  margin-top: 10px;
}
.bgam1 {
  background-size: cover;
  margin-top: 0;
  background-image: url(Pictures/bggreenfire.JPG);
  height: 100%;
}
.bgam1 h1 {
  margin-top: 0;
}
.bgam2 {
  background-size: cover;
  margin-top: 0;
  background-color: #000;
  height: 100%;
}
.thaiflag {
  margin-left: 7%;
  width: 300px;
  height: 200px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  background: linear-gradient(
    #a51931 33px,
    #fff 33px,
    #fff 67px,
    #2d2a4a 67px,
    #2d2a4a 133px,
    #fff 133px,
    #fff 167px,
    #a51931 0
  );
}
.titlethai {
  color: #a51931;
  padding-left: 8%;
  margin: 0;
  font-size: 60px;
  font-family: monospace;
}
.thailand {
  padding-left: 20px;
  padding-top: 40px;
}
.thaip {
  margin-left: 5%;
  text-overflow: clip;
  width: 50%;
  line-height: 175%;
}
.block {
  padding: 40px;
  margin-left: 5%;
  text-overflow: clip;
  width: 40vw;
  height: 600px;
  line-height: 175%;
  background-color: whitesmoke;
  border-radius: 20px 70px 20px 70px;
  border: 7px solid black;
}
.blockr {
  top: 0;
  padding: 40px;
  margin-left: 5%;
  text-overflow: clip;
  width: 40vw;
  height: 600px;
  line-height: 175%;
  background-color: #fefefe;
  border-radius: 20px 70px 20px 70px;
  border: 7px solid black;
}
/*.bgam1{
  background-color: #F4D03F;
  background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);
  height: 100%;
}

.bgam2{
  background-color: #3EECAC;
  background-image: linear-gradient(34deg, #3EECAC 0%, #EE74E1 100%);
  height: 100%;
}*/
.bgimg1,
.bgimg2,
.bgimg3 {
  position: relative;
  opacity: 1;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}
.captiontop {
  position: absolute;
  left: 0;
  top: 20%;
  width: 100%;
  text-align: center;
  color: #000;
}
#steck {
  position: relative;
  background: white;
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
  color: white;
  box-shadow: 10px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
}
#steck2 {
  position: relative;
  background: white;
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
  color: white;
  box-shadow: 10px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
}
#steck:hover {
  border-radius: 0% 0% 50% 50% / 0% 0% 5% 5%;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.25);
}
#steck2 {
  position: relative;
  background: white;
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
  color: white;
  box-shadow: 10px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
}
#steck2:hover {
  border-radius: 0% 0% 50% 50% / 0% 0% 5% 5%;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.25);
}
body,
html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
span {
  padding: 50px;
  background-color: #54ff9f;
  border-radius: 20px 70px 20px 70px;
  border: 3px solid black;
}
.homet {
  padding: 40px;
  margin-left: 5%;
  text-overflow: clip;
  width: 50%;
  line-height: 175%;
  border-bottom: 4px solid black;
  border-top: 4px solid black;
}

section {
  height: 100vh;
  scroll-snap-align: start;
}
#bodyam {
  margin: 0;
  scroll-snap-type: y mandatory;
}

.bgam1,
.bgam2 {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
#bgnorm {
  background-image: url(Pictures/bggreenfire.JPG);
  background-size: cover;
}
.bgam1 img {
  bottom: 0;
}
.label {
  width: 100px;
  display: inline-block;
}
.info {
  margin-bottom: 10px;
}
.timeline-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-line {
  position: sticky;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #333;
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-circle {
  position: sticky;
  left: 50%;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
}

.timeline-event {
  height: 150px; /* Adjust the height as needed */
  background-color: #f0f0f0;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  scroll-snap-align: start;
}
.blocksocial {
  border: 1px solid #000;
  margin-left: 50px;
  height: 80vh;
  width: 75%;
  background-color: whitesmoke;
}
/*body{
  width: 100%;
  height: 188vh;
  background: linear-gradient(
    to top,
    black 0%,
    black 50%,
    #54ff9f 50%,
    #54ff9f 100%
  );
} */