/* 
    Created on : Jul 9, 2023, 9:59:33 PM
    Author     : geo
*/
/* style resets */
*, *::before, *::after{
    box-sizing: border-box;
}
*{
    margin:0;
    padding:0;
}
html{
    color-scheme: dark light;
    scroll-behavior: smooth;
}
body{
    font-size:var(--default-fs);
}
img, picture, svg, video{
    display:block;
    max-width:100%;
}
a{
    text-decoration: none;
}

@font-face {
    font-family: "title-font";
    src: url('../fonts/go3v2.ttf');
}

/* Begin styling */
:root{    
    --default-font: "Lato", sans-serif;
    --font-family: "Lato", sans-serif;
    --default-fs: 8pt;
    --huge-fs: 4rem;
    --large-fs: 3.3rem;
    --big-fs: 2.25rem;
    --medium-fs: 1.35rem;
    --small-fs: .85rem;
    --mini-fs: .60rem;
    --tiny-fs: .33rem;
    
}

.d-flex{
    display:flex;
}
.d-grid{
    display:grid;
}
.d-block{
    display:block;
}
.d-inline{
    display:inline;
}
.d-inline-block{
    display:inline-block
}

.mini-fs{
    font-size:var(--mini-fs);
}

html, body {
  height: 100%;
}
body{
    flex-direction: column;
    background: url('../images/The-Great-Wall-Of-China.webp') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgba(var(--rgba-secondary-2-0),.95);
}

main{
    flex: 1 0 auto;
}

aside,
footer{
    flex-shrink: 0;
    padding-inline:2rem;
    padding-block:.75rem;
    border-radius:.75rem;
    margin-inline: auto;
    width: 85dvw;
    background-color:rgba(var(--rgba-primary-0),.95);
}

main > * {
    font-size:var(--medium-fs);
    color: var(--color-secondary-2-1);
}

.container{
  flex-direction: row;
  gap:1.0em;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: normal;
  align-content: space-around;
  grid-template-columns: repeat(2, 1fr);
}

.flex-item:nth-child(1) {
    -webkit-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    align-self: auto;
    }
.flex-item:nth-child(2) {
    -webkit-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    align-self: auto;
    }
.flex-item:nth-child(3) {
    -webkit-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    align-self: auto;
    }
    
.title{
    text-align: center;
    font-family: "title-font";
    color:var(--color-primary-0);
}
h1.title{
    font-size: clamp(5rem, -0.25rem + 3.333vw, 25rem);
}
h2.title{
    font-size: clamp(1rem, -0.25rem + 3.333vw, 18.75rem);
}
h3.title{
    font-size: clamp(1rem, -0.25rem + 3.333vw, 12.75rem);
}

.message-card {
    border-radius:.75rem;
    border:2px solid var(--color-secondary-1-0);
    background-color: rgba(var(--rgba-secondary-1-1),.850);
    margin-inline: auto;
    width: 85dvw;
    height: fit-content;
    text-wrap: balance;
    text-align: center;
    padding: 1dvh;
}

.message-card .container{
    flex-direction:row !important;
}

.message-card p{
    margin-bottom:1.05rem;
}

.qrcode{
    width:clamp(19rem, 10vw + 0.5rem, 25rem);
}
.qrcode > a > span{
    font-size:var(--medium-fs);
}
.y-tinge{
    background-color:rgba(var(--rgba-secondary-1-1),.75);
}
.r-box-inset{
    box-shadow: 0px 0px 50px 0px rgba(205,7,30,0.32) inset;
    -webkit-box-shadow: 0px 0px 50px 0px rgba(205,7,30,0.32) inset;
    -moz-box-shadow: 0px 0px 50px 0px rgba(205,7,30,0.32) inset;    
}
.y-box-inset{
    box-shadow: 0px 0px 15px 0px rgba(255,250,90,0.32) inset;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(255,250,90,0.32) inset;
    -moz-box-shadow: 0px 0px 15px 0px rgba(255,250,90,0.32) inset;    
}
.r-box{
    box-shadow: 0px 0px 50px 0px rgba(205,7,30,0.32);
    -webkit-box-shadow: 0px 0px 50px 0px rgba(205,7,30,0.32);
    -moz-box-shadow: 0px 0px 50px 0px rgba(205,7,30,0.32);    
}
.y-shadow{
    text-shadow: 0px 0px 20px rgba(255,250,90,1.0);
}
.r-shadow{
    text-shadow: 0px 0px 3px rgba(var(--rgba-primary-0),.95);
}
.l-float{
     float: left; 
}
.r-float{
     float: right;         
}
.wrapped-image{
    /* Adds space between the image and the text */
    margin-right: 20px; 
    margin-bottom: 10px; 
    
    /* Optional: prevents the image from overflowing its container */
    max-width: 100%; 
    height: auto;
}