/*------------------*
 * Global variables *
 *------------------*/
/*------------*
 * CSS Styles *
 *------------*/
 *,
 *:before,
 *:after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
 body {
   display: flex;
   min-height: 100vh;
   /* height: 100%; */
   /* padding: 24px; */
   align-items: center;
   justify-content: space-between;
   background-color:#343f68;
 }
 body::-webkit-scrollbar {
   display: none;
 }

 .font {
  font-family:"Noto Sans", sans-serif;
 }

.one {
  flex: 3 1 auto;
  display: flex;
  justify-content: center;
  align-items:center;
  /*background-color: #343f68;*/
  height: 100%;
}
.two {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items:center;
  /*background-color: /*#343f68 red;*/
  height: 100%;
}
.two h1,.two h2,.two h3,.two p {
  font-family:"Noto Sans", sans-serif;
  color: #c3eeff;
}

.two img {
  /*background: linear-gradient(135deg, #40404033, #33333363) 0rem, url(../i/tim-2025-800h-v1.png) 0rem;*/
  /*background-repeat:no-repeat;*/
  /*background-size: cover,82vh;*/
  /*background-position: 0rem,100% 20%;*/
  /* height:100%; */
  /* min-height:400px; */
  width: 100%;
  align-self: flex-start;
}

 .arrow {
  position: relative;
  top: -5rem;
  left: 1rem;
  font-size: 3rem;
 }
 
 a {
   color: inherit;
   text-decoration: none;
 }
 a:hover {
   text-decoration: underline;
 }
 .qrcode {
  display:flex;
  justify-content: center;
 }
 .qrcode img {
  width:30%;
 }
 .card {
   color: #e5e4e2;
   font-family:"Noto Sans", sans-serif;
   height: 100%;
   /* position: absolute; */
   top: 0;
   transform-origin: 100% 50%;
   transform-style: preserve-3d;
   width: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   transition: transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49);
 }


 .card.flipped {
   transform: translateX(-100%) rotateY(-180deg);
 }
 
 .card-front,
 .card-back {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3), transparent 1px, rgba(0, 0, 0, 0.3) 2px);
   background-size: 3px 3px;
   background-color: #424147;
   border-radius: 5px;
   box-shadow: 0px -6px 8px 0px rgba(0, 0, 0, 0.1), 0px 6px 8px 0px rgba(0, 0, 0, 0.1), 6px 0px 8px 0px rgba(0, 0, 0, 0.1), -6px 0px 8px 0px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   height: 100%;
   left: 0;
   padding: 5%;
   position: absolute;
   top: 0;
   width: 100%;
 }
 
 .card-back {
   transform: rotateY(180deg);
 }
 .card-back .layer {
   background: repeating-linear-gradient(135deg, rgb(76 71 31 / 40%), transparent 1px, rgba(76, 71, 31, 0.3) 2px);
   background-size: 3px 3px;
   background-color: #ffe9a5;
   color: #000000;
   height: 100%;
   position: relative;
   width: 100%;
   box-shadow: 1px 2px 7px #181414;
 }
 .card-back .layer:after {
   background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), transparent);
   content: "";
   display: block;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
 }
 .card-back .layer .top,
 .card-back .layer .bottom {
   left: 8%;
   position: absolute;
   z-index: 1;
 }
 .card-back .layer .top {
   top: 5%;
 }
 .card-back .layer .bottom {
   bottom: 5%;
 }
 .card-back .layer h2, .card-back .layer h3, .card-back .layer h4 {
   font-weight: 400;
   margin: 2px 0;
 }
 .card-back .layer h2 {
   font-size: 18px;
   font-weight: 500;
   text-transform: uppercase;
 }
 .card-back .layer h3 {
   font-size: 16px;
 }
 .card-back .layer h4 {
   font-size: 16px;
   font-style: italic;
 }
 
 .card-front .layer {
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: center;
   position: relative;
   width: 100%;
 }
 .card-front .layer h1 {
   letter-spacing: -2px;
   margin: 0 auto;
   padding: 6px 18px 4px;
   text-align: center;
   background: -webkit-linear-gradient(#ffeecd, #4A4744);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
hr {
  border-top: 1px solid -webkit-linear-gradient(#897663, #afaead);;
  border-bottom:0px;
  border-right:0;
  border-left:0;
  width:90%;
  margin:0 auto;
}
.card-front .layer p {
  margin-top: 7px;
  text-align:center;
  font-size:18px;
  font-weight:300;
  background: -webkit-linear-gradient(#897663, #afaead);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.allcaps-large {
  font-size:42px;
  font-weight:200;
  text-transform: uppercase;
}
.allcaps-small {
  font-size:42px;
  font-weight:200;
  text-transform: uppercase;
}
 .card-front .layer .corner {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   border-right: 2px solid #83775f;
   border-top: 2px solid #e2e4e5;
   height: 12px;
   position: absolute;
   width: 12px;
 }
 .card-front .layer .corner:nth-of-type(1) {
   right: 0;
   top: 0;
 }
 .card-front .layer .corner:nth-of-type(2) {
   left: 0;
   top: 0;
   transform: rotateZ(-90deg);
 }
 .card-front .layer .corner:nth-of-type(3) {
   bottom: 0;
   left: 0;
   transform: rotateZ(180deg);
 }
 .card-front .layer .corner:nth-of-type(4) {
   bottom: 0;
   right: 0;
   transform: rotateZ(90deg);
 }
 
 .card-wrapper {
   height: 271.7647058824px;
   max-width: 420px;
   perspective: 600px;
   position: relative;
   width: 100%;
   transition: transform 1s;
 }

 .card-wrapper2 {
  height: 271.7647058824px;
  max-width: 420px;
  perspective: 600px;
  position: relative;
  width: 100%;
  transition: transform 1s;
}
@media (max-width:1200px) {
  body {
    background-size: cover, contain;
    background-position: 0rem, right;
  }
  .arrow {
    display:none;
  }
  .card {
  }
}
@media (max-width:1030px) {
  body {
    justify-content:flex-end;
    align-items: flex-end;
    background: linear-gradient(135deg, #40404022, #33333363), url(../images/timothylane/tim-2025-800h-v1.png);
    background-repeat:no-repeat;
    no-repeat;
    background-size:cover,100vh;
    background-position: 0rem,center 10%;
  }
  .arrow {
    display:none;
  }
  .one {
    flex: 1 1 auto;
    align-items: flex-end;
    height:100px;
  }
  .two {
    flex: 0 1 auto;
    display:none;
  }
  .card {
    left:0;
  }
}
@media (max-width:728px) {
  
}

@media screen and (max-width:600px) and (max-height:500px) {
  body {
    background-image:none;  
    background-color:rgb(9, 37, 63);
  }
  .one {
    flex: 3 1 auto;
    display: flex;
    justify-content: center;
    align-items:center;
    height: 100%;
  }
  .card-front,.card-back {
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3), transparent 1px, rgba(0, 0, 0, 0.3) 2px);
    box-shadow:0px -2px 2px 0px rgba(255,255,255, 0.1), 0px 2px 2px 0px rgba(255,255,255, 0.1), 2px 0px 2px 0px rgba(255,255,255, 0.1), -2px 0px 2px 0px rgba(255,255,255, 0.1);
    webkit-box-shadow:0px -2px 2px 0px rgba(255,255,255, 0.1), 0px 2px 2px 0px rgba(255,255,255, 0.1), 2px 0px 2px 0px rgba(255,255,255, 0.1), -2px 0px 2px 0px rgba(255,255,255, 0.1);
    font-family:Lato,sans-serif;
    font-weight:bold;
    font-size: 3rem;
  }
}