.mask {
 font-size: 4em; /* Adjust as needed for desired text size */
  font-weight: bold; /* Recommended for better visibility of the image */
  background-image: url('images/earth.jpg'); /* Replace with your image path */
  background-size: cover; /* Ensures the image covers the entire text area */
  background-position: center; /* Centers the image within the text */
  -webkit-background-clip: text; /* Clips the background image to the shape of the text */
  background-clip: text; /* Standard property for clipping */
  -webkit-text-fill-color: transparent; /* Makes the text itself transparent, revealing the clipped background image */
  color: transparent; /* Fallback for older browsers, though -webkit-text-fill-color is usually sufficient */
margin-right: auto;
	margin-left: auto;
	 text-align:center;
	-webkit-text-stroke-width:2px; /* Adjust the width of the outline */
  -webkit-text-stroke-color: black; /* Set the color of the outline */ 
	
}
header{height:12em;
margin:0;
margin-top:-75px;
outline: 2px solid #ADD8E6;
}
#grad1 {
  height: 200px;
  background-image: linear-gradient(#E0F7FA, #80DEEA);
  
}
.button {
	margin: 15px;
}
nav{text-align:center;}
#grad2 {
  height: 200px;
  background-image: linear-gradient(#c7e9c0, #90EE90);
  
}
.mask1 {
 font-size: 4em; /* Adjust as needed for desired text size */
  font-weight: bold; /* Recommended for better visibility of the image */
  background-image: url('images/green.jpg'); /* Replace with your image path */
  background-size: cover; /* Ensures the image covers the entire text area */
  background-position: center; /* Centers the image within the text */
  -webkit-background-clip: text; /* Clips the background image to the shape of the text */
  background-clip: text; /* Standard property for clipping */
  -webkit-text-fill-color: transparent; /* Makes the text itself transparent, revealing the clipped background image */
  color: transparent; /* Fallback for older browsers, though -webkit-text-fill-color is usually sufficient */
margin-right: auto;
	margin-left: auto;
	 text-align:center;
	-webkit-text-stroke-width:2px; /* Adjust the width of the outline */
  -webkit-text-stroke-color: black; /* Set the color of the outline */ 
	
}
.mask2 {
 font-size: 4em; /* Adjust as needed for desired text size */
  font-weight: bold; /* Recommended for better visibility of the image */
  background-image: url('images/yellow.jpg'); /* Replace with your image path */
  background-size: cover; /* Ensures the image covers the entire text area */
  background-position: center; /* Centers the image within the text */
  -webkit-background-clip: text; /* Clips the background image to the shape of the text */
  background-clip: text; /* Standard property for clipping */
  -webkit-text-fill-color: transparent; /* Makes the text itself transparent, revealing the clipped background image */
  color: transparent; /* Fallback for older browsers, though -webkit-text-fill-color is usually sufficient */
margin-right: auto;
	margin-left: auto;
	 text-align:center;
	-webkit-text-stroke-width:2px; /* Adjust the width of the outline */
  -webkit-text-stroke-color: black; /* Set the color of the outline */ 
	
}
#grad3 {
  height: 200px;
  background-image: linear-gradient(#FFFFB8, #FFFF2E);
  
}
#grad4 {
  height: 200px;
  background-image: linear-gradient(#E6E6FA, #EE82EE);
  
}
.mask3 {
 font-size: 4em; /* Adjust as needed for desired text size */
  font-weight: bold; /* Recommended for better visibility of the image */
  background-image: url('images/pur.jpg'); /* Replace with your image path */
  background-size: cover; /* Ensures the image covers the entire text area */
  background-position: center; /* Centers the image within the text */
  -webkit-background-clip: text; /* Clips the background image to the shape of the text */
  background-clip: text; /* Standard property for clipping */
  -webkit-text-fill-color: transparent; /* Makes the text itself transparent, revealing the clipped background image */
  color: transparent; /* Fallback for older browsers, though -webkit-text-fill-color is usually sufficient */
margin-right: auto;
	margin-left: auto;
	 text-align:center;
	-webkit-text-stroke-width:2px; /* Adjust the width of the outline */
  -webkit-text-stroke-color: black; /* Set the color of the outline */ 
	
}
.mask4 {
 font-size: 4em; /* Adjust as needed for desired text size */
  font-weight: bold; /* Recommended for better visibility of the image */
  background-image: url('images/pink.jpg'); /* Replace with your image path */
  background-size: cover; /* Ensures the image covers the entire text area */
  background-position: center; /* Centers the image within the text */
  -webkit-background-clip: text; /* Clips the background image to the shape of the text */
  background-clip: text; /* Standard property for clipping */
  -webkit-text-fill-color: transparent; /* Makes the text itself transparent, revealing the clipped background image */
  color: transparent; /* Fallback for older browsers, though -webkit-text-fill-color is usually sufficient */
margin-right: auto;
	margin-left: auto;
	 text-align:center;
	-webkit-text-stroke-width:2px; /* Adjust the width of the outline */
  -webkit-text-stroke-color: black; /* Set the color of the outline */ 
	
}
#grad5 {
  height: 200px;
  background-image: linear-gradient(#FFC0CB, #FF69B4);
  
}
#grad6 {
  height: 200px;
  background-image: linear-gradient(#FA8072, #ED2939);
  
}
.mask5 {
 font-size: 4em; /* Adjust as needed for desired text size */
  font-weight: bold; /* Recommended for better visibility of the image */
  background-image: url('images/red.jpg'); /* Replace with your image path */
  background-size: cover; /* Ensures the image covers the entire text area */
  background-position: center; /* Centers the image within the text */
  -webkit-background-clip: text; /* Clips the background image to the shape of the text */
  background-clip: text; /* Standard property for clipping */
  -webkit-text-fill-color: transparent; /* Makes the text itself transparent, revealing the clipped background image */
  color: transparent; /* Fallback for older browsers, though -webkit-text-fill-color is usually sufficient */
margin-right: auto;
	margin-left: auto;
	 text-align:center;
	-webkit-text-stroke-width:2px; /* Adjust the width of the outline */
  -webkit-text-stroke-color: black; /* Set the color of the outline */ 
	
}
#footer1 {
	color: #00BFFF;
}
#footer2 {
	color: #3CB371;
}
#footer3 {
	color: #FEBE10;
}
#footer4 {
	color: #662d91;
}
#footer5 {
	color: #FF69B4;
}
#footer6 {
	color:  #B22222;
}
.container {
  display: flex; /* Enables flexbox layout */
  justify-content: center; /* Centers the item horizontally */
  align-items: center; /* Centers the item vertically */
  height: 100vh; /* Makes the container the full height of the viewport */
  width: 100vw;
  
}

.vertical-line {
  width: 2px; /* Sets the thickness of the line */
  height: 100%; /* Sets the height of the line */
  background-color: black; /* Sets the color of the line */
}
html {
  --bg: #fff;
  background: var(--bg);
  
}

@property --top {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --notepos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --open {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --note {
  syntax: '<color>';
  inherits: false;
  initial-value: purple;
}

@keyframes dance {
  0% { --top: 0%; --open: 0%; transform-origin: 60% 90%; }
  25% { --top: 10%; transform-origin: 60% 90%; transform: translate(-50%, 0%) rotate(3deg); }
  33% { --open: 8%;  }
  50% { --top: 0%; --open: 0%; transform: translate(-50%, 0%) rotate(0deg); }
  75% { --top: 7%; --open: % 10%; transform-origin: 40% 90%; transform: translate(-50%, 0%) rotate(-3deg);}
  100% { --top: 0%; --open: 0%; }
}

@keyframes note {
  0% { --note: purple; --notepos: 0%; }
  100% { --note: var(--cheese); --notepos: 10%; }
}

audio {
  animation: dance 2s linear infinite, note 2s infinite;
  transform-origin: 60% 90%;
  transform: translate(-50%, 0%) rotate(2deg);
  --cheese: #fe3;
  --crust: #ea5;
  --crust-dark: #d94;
  --mouth: #a00;
  --eye: #000;
  --pepperoni: #d12;
  --note: purple;
  --top: 0%;
  --open: 0%;
  --notepos: 5%;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 75vmin;
  height: 100vmin;
  position: absolute;
  display: block;
  bottom: -10vmin;
  box-sizing: border-box;
  left: 50%;
  background: var(--bg);
  z-index: -1;
  background-image: 
    /* crop */
    conic-gradient(at 50% var(--top), var(--bg) 155deg, transparent 0 205deg, var(--bg) 0),
    /* music note */
    radial-gradient(farthest-side, var(--note) 99.9%, transparent 0),
    linear-gradient(var(--note), var(--note)),
    /* arms */
    linear-gradient(272deg, transparent 40%, black 0),
    radial-gradient(farthest-side, black 80%, transparent 0),
    radial-gradient(farthest-side at 0% 50%, transparent 85%, black 0 99%, transparent 0),
    radial-gradient(farthest-side, black 80%, transparent 0),
    /* microphone */
    radial-gradient(farthest-side, #444 99.9%, transparent),
    conic-gradient(at 130% 130%, transparent 309deg, #666 0 321deg, transparent 0),
    /* face */
    radial-gradient(circle at 54% 47%, white 3%, transparent 0),
    radial-gradient(circle at 54% 47%, white 3%, transparent 0),
    radial-gradient(circle, var(--eye) 10%, transparent 0),
    radial-gradient(circle, var(--eye) 10%, transparent 0),
    radial-gradient(ellipse calc(50% + var(--top)) calc(170% + var(--open) * 10) at 50% 0, transparent 25%, var(--cheese) 0),
    linear-gradient(white 10%, transparent 0),
    radial-gradient(circle at 50% 70%, red 20%, var(--mouth) 0),
    /* legs */
    radial-gradient(ellipse 140% 120% at 100% 70%, transparent 60%, black 0 70%, transparent 0),
    radial-gradient(ellipse 140% 120% at 0% 70%, transparent 60%, black 0 70%, transparent 0),
    radial-gradient(farthest-side at 50% 100%, black 99.9%, transparent 0),
    radial-gradient(farthest-side at 50% 100%, black 99.9%, transparent 0),
    /* topings */
    radial-gradient(circle, var(--pepperoni) 50%, transparent 0),
    radial-gradient(circle, var(--pepperoni) 45%, transparent 0),
    /* cheese and crust */
    radial-gradient(var(--cheese) 30%, transparent 0),
    radial-gradient(var(--cheese) 50%, transparent 0),
    radial-gradient(var(--cheese) 30%, transparent 0),
    radial-gradient(var(--pepperoni) 30%, transparent 0),
    radial-gradient(var(--pepperoni) 50%, transparent 0),
    radial-gradient(var(--pepperoni) 30%, transparent 0),
    radial-gradient(circle at 50% var(--top), var(--cheese) 60%, var(--crust) 0, var(--crust-dark) 70%, transparent 0)
    ;
  background-size:
    /* crop */
    100% 100%,
    /* music note */
    4vmin 3vmin,
    0.75vmin 7vmin,
    /* arms */
    2% 12%,
    5% 3%,
    10% 10%,
    5% 3%,
    /* microphone */
    5vmin 5vmin,
    8vmin 8vmin,
    /* face */
    20% 20%,
    20% 20%,
    20% 20%,
    20% 20%,
    20% 5%,
    16% 4%,
    16% 4%,
    /* legs */
    7% calc(20% - var(--top) / 2),
    7% calc(20% - var(--top) / 2),
    10% 2%,
    10% 2%,
    /* topings */
    30% 14%,
    30% 24%,
    /* cheese and crust */
    60% 24%,
    80% 30%,
    70% 30%,
    60% 24%,
    80% 30%,
    70% 30%,
    100% 100%
    ;
  background-position:
    /* crop */
    0 0,
    /* music note */
    calc(59.5% + var(--notepos)) 45%,
    calc(61.25% + var(--notepos) / 1.05) 41%,
    /* arms */
    27% calc(69vmin + var(--top) / 2.25),
    27.25% calc(80vmin + var(--top) / 3),
    76.25% calc(60.75vmin + var(--top) / 2.75),
    70.5% calc(60.5vmin + var(--top) / 3),
    /* microphone */
    62.5% calc(57% + var(--top) / 3),
    68% calc(61% + var(--top) / 3),
    /* face */
    45% calc(40vmin + var(--top) / 1.25),
    55% calc(40vmin + var(--top) / 1.25),
    45% calc(40vmin + var(--top) / 1.25),
    55% calc(40vmin + var(--top) / 1.25),
    50% calc(52vmin + var(--top) / 1.5),
    50% calc(52vmin + var(--top) / 1.5),
    50% calc(52vmin + var(--top) / 1.5),
    /* legs */
    40% calc(73vmin + var(--top) / 2),
    60% calc(73vmin + var(--top) / 2),
    69% 88vmin,
    31% 88vmin,
    /* topings */
    calc(32% + var(--top) / 10) calc(35% + var(--top) / 1.5),
    60% calc(10% + var(--top)),
    /* cheese and crust */
    130% calc(56% + var(--top) / 1.75),
    70% calc(57% + var(--top) / 1.75),
    -20% calc(59% + var(--top) / 1.75),
    145% calc(57% + var(--top) / 1.75),
    67% calc(58% + var(--top) / 1.75),
    -25% calc(60.5% + var(--top) / 1.75),
    0 0
    ;
  background-repeat: no-repeat;
  text-indent: 40vmin;
  overflow: visible;
  clip-path: polygon(0 0, 200% 0%, 200% 90%, 0 90%);
}
h2 {
	font-size: 40px;
	height: -50px;
}
.example1 {
	overflow: auto;
}

footer{
	clear:both;
}
form {
	float: right;
}
table {
  width: 100%;
}

th {
  height: 70px;
}
table, th, td {
  border: 1px solid;
}
h3 {

  border-radius: 30px;
  border: 1px solid black;
  padding: 20px; 
  width: 30%;
  height: 10px;  
}
h4 {
	font-size: 20px;
}
img {
  filter: brightness(130%);
}
.right
{ 
	float:right;
	margin-left: 15px;
    font-size: 20px;
}
.left
{ 
	float:left;
	margin-left: 15px;
}
h2 {
  text-shadow: 2px 2px 10px #36454F;
}
p.test1 {
  width: 200px; 
  border: 1px solid blue;
  white-space: nowrap; 
  overflow: auto;
  text-overflow: clip;
}
#img3 {
  clip-path: circle(50%);
}
p.test1 {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
h4 {
  column-count: 3;
  border: 1px solid #000000;
}
div.a {
  width: 400px;
  height: 160px;
  background-color: #ADD8E6;
  transform: rotate(20deg);
  float:right;
  margin-left: 15px;
    font-size: 35px;
}