/**************************************************************************
Universal Selector = Sets the style for all the elements on the HTML Page
**************************************************************************/
*, 
*::before,
*::after{
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

*{
  text-decoration: none;
  list-style: none;
}

#ordNum {
  list-style: decimal;
}

html{
  box-sizing: border-box;
  height: 100%;
}

body{
  font-family: 'Poppins', sans-serif;
  height: 100%;
}

p {
  font-size: 1.3rem;
  /* font-family: 'Roboto', sans-serif; */
  font-family: 'kopub 돋움체';
  line-height: 2rem;
}

@font-face{
  font-family: 'kopub 돋움체';
  src: url('Font/KoPubDotumMedium.ttf');
}

a{
  margin: 10px 0;
  color: #000000;
}

a:visited {
  color: #000000;
}


h1 {
  font-weight: 200;
  font-size: 5rem;
  font-family: 'DM Serif Display', serif;
}

h2 {
  font-weight: 300;
  font-size: 3rem;
}

h3 {
  font-size: 3rem;
}

.about, .donation, footer {
  text-align: center;
}

.main-content {
  width: 100%;
}

nav {
  position: sticky;
  top: 0;
  width: 100%;
  justify-content: space-between;
  padding: 0px 30px;
  background-color: transparent;
  transition: background-color 0.4s ease-out;
  z-index: 10;
}

nav.scroll {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px 0 rgba(163, 165, 189, 0.37);
  backdrop-filter: blur( 7.5px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

nav .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.logo img {
  vertical-align: top;
  max-height: 100px;
  padding: 10px;
}

.wrapper .pageLink {
  display: inline-flex;
}

.pageLink li i {
  color: #555555;
}

.pageLink button {
  background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.pageLink button:hover {
  background: #ddd2c4;
  border-radius: 5px;
  transition: all 300ms ease;
}

.buttonHoverMargin {
  margin-left: 5px;
  margin-right: 5px;
}

.pageLink button p, .mobile_donate_button {
  color: #000000;
  font-size: 1.2rem;
  padding: 0.9rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 500ms ease;
}

#buttonNav {
  background: #ddd2c4;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
  outline: inherit;
  border-radius: 5px; 
}

.display-on-mobile-only{
  display: none;
}

.about {
  /* border: 1px solid #000000; */
  box-shadow: 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  z-index: 3;
  position: relative;
  padding-top: 1rem;
}

video {
  width: 80%;
}

.companyLogo {
  padding: 30px 0;
}

.companyLogo p {
  padding: 1.6rem;
}

#partnership{
  display: inline-block;
}

.how-it-works{
  /* border: 1px solid #000000; */
  /* background: linear-gradient(to right, #0077B6, #0096C7); */
  text-align: center;
  padding-bottom: 4rem;
  box-shadow: 0 8px 32px 0 rgba(163, 165, 189, 0.37);
  background-color: #f6f4f1;
  z-index: 4;
  position: relative;
}

.steps{
  /* border: 1px solid #000000; */
  display: flex;
  transform: skewY(-5deg);
  margin: 2rem;
  box-shadow: 0 8px 32px 0 rgba(163, 165, 189, 0.37);
  backdrop-filter: blur( 7.5px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  border-radius: 50px;
  margin-bottom: 4rem;
}

.image-contents {
  padding: 30px;
}

.text-contents{
  width: 60%;
  /* padding: 12% 1.6rem; */
  padding: 0 1.6rem;
  margin-top: auto;
  margin-bottom: auto;
}

.image-contents img, .text-contents img {
  width: 100%;
  height: 100%;
  vertical-align: top;
  border-radius: 50px;
}

.donation{
  /* border: 1px solid #000000; */
  /* background: linear-gradient(to right, #0096C7, #90E0EF); */
  z-index: 3;
  background-color: #ffffff;
  position: relative;
  /* box-shadow: 0 8px 32px 0 rgba(86, 162, 229, 0.5); */
  padding-bottom: 4rem;
}

.donation h1, .how-it-works h1{
  padding: 4rem 0;
}

.donation-form {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding: 4rem;
  background: rgba( 255, 255, 255, 0.25 );
  /* background: rgba( 90, 127, 148, 0.9 ); */
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 7.5px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  border-radius: 50px;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

.donation-form .user-box {
  position: relative;
}

.donation-form .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #555555;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #927c61;
  outline: none;
  background: transparent;
}

.donation-form .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #927c61;
  pointer-events: none;
  transition: .5s;
}

.donation-form .user-box input:focus ~ label,
.donation-form .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #ddd2c4;
  font-size: 12px;
}

.donation-container {
  display: flex;
  padding-bottom: 4rem;
}

.amount-raised, .link-to-donation-form {
  width: 50%;
  padding: 1.6rem;
  margin-left: 1.4rem;
  margin-right: 1.4rem;

  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 7.5px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  border-radius: 30px;
  margin-bottom: auto;
  height: 100%;
  margin-top: auto;
}

.whatNext {
  /* border: 1px solid #000000; */
  display: flex;
  margin: 2rem;
  box-shadow: 0 8px 32px 0 rgba(163, 165, 189, 0.37);
  backdrop-filter: blur( 7.5px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  border-radius: 50px;
  margin-bottom: 4rem;
}

#QR_img {
  width: unset;
  height: unset;
  border-radius: unset;
}

#cancelFooter, #thankYouFooter {
  margin-top: 4rem;
}

.footerLogo img {
  padding-bottom: 1rem;
}

#dfb{
  padding: 1rem 2.5rem;
  background: #0077B6;
  color: inherit;
  border: none;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  border: 2px solid #0077B6;
  border-radius: 5px;
}

#dfbText{
  font-size: 1.3rem;
  text-decoration: none;
  color: #fff;
}

#footerLink:hover, #downloadApp {
  color: #927c61;
}

#thankYouText {
  padding-bottom: 4rem;
  margin: 2rem;
}

@media only screen and (max-width: 1366px) {
  .pageLink.displayPageLink{
    display: none;
  }

  video{
    width: 100%;
    /* height: 330px; */
  }

  h1 {
    font-size: 4rem;
  }

  .companyLogo img {
    width: 100%;
  }
 
  .amount-raised, .link-to-donation-form {
    width: unset;
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .steps, .whatNext {
    display: inline-block;
  }

  .text-contents {
    width: unset;
  }

  .donation-container {
    display: inline-block;
    padding-bottom: unset;
  }

  .footerLogo img {
    width: 50%;
  }

  .display-on-mobile-only{
    display: inline-flex;
  }

  .logo img {
    vertical-align: unset;
  }

  .logo {
    margin-top: 0.5rem;
  }

  #tickConfirmation {
    width: 100%;
    height: 100%;
  }
}

@media only screen and (max-width: 600px) {
  .companyLogo img {
    width: 100%;
  }
}