/*Style Ref*/
.blue1 {
    padding: 50px;
    position: relative;
    background: rgb(67, 170, 255);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    }

.blue2 {
padding:50px;
position: relative;
background: rgb(52, 135, 202);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    }

.pink1 {
padding:50px;
position: relative;
background: #ff98b9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
}

.pink2 {
    padding:50px;
    position: relative;
    background: #ff6294;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    }

.white1 {
    padding:50px;
    position: relative;
    background: #ffffff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    }

.white2 {
    padding:50px;
    position: relative;
    background: #e6e6e6;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
        }

 .webring {
 transform: scale(1.4);
 margin: auto;
 height: min-content;
 width: max-content;
  }

.ratio {
aspect-ratio: 16/9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
}

.shadow {
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.4);
}

body {
    background-image:
    linear-gradient(
    #ffface 0%,
    #ffface 7.77%,
    #fff9c5 7.77%,
    #fff9c5 17.22%,
    #fff8bd 17.22%,
    #fff8bd 32.77%,
    #fff8b5 32.77%,
    #fff8b5 42.22%,
    #fff7ac 42.22%,
    #fff7ac 57.77%,
    #fff6a7 57.77%,
    #fff6a7 67.13%,
    #fff6a2 67.13%,
    #fff6a2 82.68%,
    #fff59c 82.68%,
    #fff59c 92.13%,
    #fff59b 92.13%
    );
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    
    /*Text Color*/
    color:#000000;
    
    /*Text Margins*/
    margin: 50px;
    padding: 50px;
    
    /*Font*/
    }

    .gloria-hallelujah-regular {
  font-family: "Gloria Hallelujah";
  font-weight: 400;
  font-style: normal;
}


    
    /*Font Size*/
    h1 {
        font-size:60px;
    }
    h2 {
        font-size:45px;
    }
    h3 {
        font-size:33px;
    }
    p {
        font-size:26px;
    }

.CrispPixels {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
}
.CrispPixels2 {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

.dateDialogue {
    border-width:10px; 
    border-style:solid;
    border-color: rgb(52, 135, 202);
    background:  rgb(67, 170, 255);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
}
.dateOption {
border-width:10px; 
border-style:solid;
border-color: #ff6294;
background: #ff98b9;
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
}
    
.topnav {
    overflow: hidden;
    background-color: #b8a500;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
    position:fixed;
    top:0;
    left:0;
    z-index:1;
    height:100%;
    width:53px;

  }