html {
  box-sizing: border-box;
}

@font-face{
  font-family: 'myCochinchine';
  src: url('assets/Cochinchine.ttf') format('truetype');


}

body {
  font-family: Arial;

  margin: 0;
  text-anchor: end;
  background-color: #333333;
  color: rgb(205, 205, 205);
    /* background-color: #000000; */
}

*, *:before, *:after {
  box-sizing: inherit;
}

h2 {
  font-size: 3vw;
}

h3 {
  font-size: 18pt;
  /* background-color: rgb(255, 255, 255, 0.5); */
  margin: 0;
  padding: 0;
}

ul {
  font-size: 14pt;
  padding-bottom: 10%;
  padding-left: 5%;

}

li {
  padding: 1%;
}

p {
  font-size: 14pt;

}

.square_btn {
  font-family: Helvetica;
    color: #ffffff;
    display: inline-block;
    padding: 0.1em 1em;
    text-decoration: none;
    /* background-color: #d4d4d4; */
    border: solid 3px #e72ea8;
    border-radius: 10px;
    transition: .4s;
    font-size: 20px;
      line-height: 40px;
    margin-top: 1%;
      height: 50px;
    vertical-align: middle;
    text-align: center;



}

.square_btn:hover {
    /* background: #a1a1a1; */
    border-radius: 20px;
        border: solid 3px #bb2b79;
    color: rgb(255, 255, 255);
}

.titleBox {
  /* display: grid; */
  /* height: 400px; */
  /* z-index: -1; */
}

.title {
  background-image: url("assets/header.png");
  padding: 10%;
  position: relative;
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover, contain;
  min-height: 100%;
  /* background-size: contain; */
    color: rgb(255, 255, 255);
}

.header h1 {
  /* background-color: white; */
    font-family: 'Baskervville', serif;
  /* background-color: rgb(255, 255, 255, 0.5); */
  display: inline-block;
  font-size: 7vw;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  /* position:absolute; */
  /* margin: 1vw; */
  top: 10%;
  color: #ff00ff;
}

a:link {
      color: rgb(255, 255, 255);
  font-weight: bold;
}

/* visited link */
a:visited {
  color: #fcfcfc;
}

.title p {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  /* background-color: rgb(255, 255, 255, 0.5); */
  /* position: absolute; */
  width: 50vw;
  font-size: 14pt;
  /* top:20% */
  overflow-wrap: break-word;
  color: rgb(218, 218, 218);
  /* margin: 10vw; */
  /* margin-left: 10vw; */
}

iframe {
  display: block;
  margin: auto;
  padding: 5%;
  z-index: 10;
  height: 40vw;
  width: 100%;
  /* margin-right: auto; */
}

hr {
  border: 1px solid rgb(84, 84, 84);
  border-radius: 5px;
  margin-right: 10%;
  /* position: static; */
}


.process {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  position: relative;
  padding-left: 10%;
  max-width: 100%;
  background-size: contain, cover;
  */
}

.process p {
  /* background-color: white; */
  width: 40vw;
  /* top:20% */
  overflow-wrap: break-word;
}

.describeContainer img {
  width: 60vw;
  padding: 6%;
  left: 0;
}

.describeContainer2 img {
  padding: 3%;
  left: 0;
  width: 60vw;
}

.describeContainer {
  display: flex;
  align-items: center;
}

.describeContainer2 {
  display: flex;
  align-items: center;
}

#dataSource {
  position: absolute;
  text-align: right;
  display: inline-block;
  margin-right: 0px;
  padding-right: : 0px;
  bottom: 3vh;
  right: 1%;
}

#dataSource p {
  display: inline-block;
  font-family: serif;
  font-size: 13pt;
  color: #dddddd;
}

#metLogo {
  display: inline-block;
  background-color: none;
  content: url(assets/metlogo.png);
  max-width: 50px;
}