.BoutonRouge {
	-moz-box-shadow: 3px 4px 0px 0px #591f1a;
	-webkit-box-shadow: 3px 4px 0px 0px #591f1a;
	box-shadow: 3px 4px 0px 0px #591f1a;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24437));
	background:-moz-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-webkit-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-o-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-ms-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24437',GradientType=0);
	background-color:#c62d1f;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:45px;
	font-style:italic;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:2px 2px 0px #380704;
 margin-top: 7px;
}
.BoutonRouge:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1, #c62d1f));
	background:-moz-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-webkit-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-o-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-ms-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24437', endColorstr='#c62d1f',GradientType=0);
	background-color:#f24437;
}
.BoutonRouge:active {
	position:relative;
	top:1px;
}

   

.scrolling-wrapper2 {
height: 220px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;

  .card2 {
height: 220px;
    display: inline-block;
  }
}


.scrolling-wrapper2 {
  -webkit-overflow-scrolling: touch;
}







.BoutonBleu {
	-moz-box-shadow: 3px 4px 0px 0px #591f1a;
	-webkit-box-shadow: 3px 4px 0px 0px #591f1a;
	box-shadow: 3px 4px 0px 0px #591f1a;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #206fc4), color-stop(1, #3866f0));
	background:-moz-linear-gradient(top, #206fc4 5%, #3866f0 100%);
	background:-webkit-linear-gradient(top, #206fc4 5%, #3866f0 100%);
	background:-o-linear-gradient(top, #206fc4 5%, #3866f0 100%);
	background:-ms-linear-gradient(top, #206fc4 5%, #3866f0 100%);
	background:linear-gradient(to bottom, #206fc4 5%, #3866f0 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#206fc4', endColorstr='#3866f0',GradientType=0);
	background-color:#206fc4;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #193ecf;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
		padding:10px 10px;
	text-decoration:none;
	text-shadow:2px 2px 0px #380704;
width:auto;
 margin-top: 7px;

}
.BoutonBleu:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3866f0), color-stop(1, #206fc4));
	background:-moz-linear-gradient(top, #3866f0 5%, #206fc4 100%);
	background:-webkit-linear-gradient(top, #3866f0 5%, #206fc4 100%);
	background:-o-linear-gradient(top, #3866f0 5%, #206fc4 100%);
	background:-ms-linear-gradient(top, #3866f0 5%, #206fc4 100%);
	background:linear-gradient(to bottom, #3866f0 5%, #206fc4 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3866f0', endColorstr='#206fc4',GradientType=0);
	background-color:#3866f0;
}
.BoutonBleu:active {
	position:relative;
	top:1px;
}
     







.Boutondem {
	-moz-box-shadow: 3px 4px 0px 0px #591f1a;
	-webkit-box-shadow: 3px 4px 0px 0px #591f1a;
	box-shadow: 3px 4px 0px 0px #591f1a;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #206fc4), color-stop(1, #3866f0));
	background:-moz-linear-gradient(top, #206fc4 5%, #3866f0 100%);
	background:-webkit-linear-gradient(top, #206fc4 5%, #3866f0 100%);
	background:-o-linear-gradient(top, #206fc4 5%, #3866f0 100%);
	background:-ms-linear-gradient(top, #206fc4 5%, #3866f0 100%);
	background:linear-gradient(to bottom, #206fc4 5%, #3866f0 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#206fc4', endColorstr='#3866f0',GradientType=0);
	background-color:#206fc4;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #193ecf;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:10px;
	padding:5px 5px;
	text-decoration:none;
	text-shadow:1px 1px 1px #380704;
width:auto;


}
.Boutondem:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3866f0), color-stop(1, #206fc4));
	background:-moz-linear-gradient(top, #3866f0 5%, #206fc4 100%);
	background:-webkit-linear-gradient(top, #3866f0 5%, #206fc4 100%);
	background:-o-linear-gradient(top, #3866f0 5%, #206fc4 100%);
	background:-ms-linear-gradient(top, #3866f0 5%, #206fc4 100%);
	background:linear-gradient(to bottom, #3866f0 5%, #206fc4 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3866f0', endColorstr='#206fc4',GradientType=0);
	background-color:#3866f0;
}

.Boutondem:active {
	position:relative;
	top:2px;
}
     





.BoutonNoir {
	-moz-box-shadow: 3px 4px 0px 0px #591f1a;
	-webkit-box-shadow: 3px 4px 0px 0px #591f1a;
	box-shadow: 3px 4px 0px 0px #591f1a;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #8190a1), color-stop(1, #121214));
	background:-moz-linear-gradient(top, #8190a1 5%, #121214 100%);
	background:-webkit-linear-gradient(top, #8190a1 5%, #121214 100%);
	background:-o-linear-gradient(top, #8190a1 5%, #121214 100%);
	background:-ms-linear-gradient(top, #8190a1 5%, #121214 100%);
	background:linear-gradient(to bottom, #8190a1 5%, #121214 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8190a1', endColorstr='#121214',GradientType=0);
	background-color:#8190a1;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #121314;
	display:inline-block;
	cursor:pointer;
	color:#e8de19;
	font-family:Arial;
	font-size:20px;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:2px 2px 0px #380704;
}
.BoutonNoir:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #121214), color-stop(1, #8190a1));
	background:-moz-linear-gradient(top, #121214 5%, #8190a1 100%);
	background:-webkit-linear-gradient(top, #121214 5%, #8190a1 100%);
	background:-o-linear-gradient(top, #121214 5%, #8190a1 100%);
	background:-ms-linear-gradient(top, #121214 5%, #8190a1 100%);
	background:linear-gradient(to bottom, #121214 5%, #8190a1 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#121214', endColorstr='#8190a1',GradientType=0);
	background-color:#121214;
}
.BoutonNoir:active {
	position:relative;
	top:3px;
}

       








.scrolling-wrapper2 {
height: 360px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;

  .card2 {
height:220px;
    display: inline-block;
  }
}


.scrolling-wrapper2 {
  -webkit-overflow-scrolling: touch;
}






.accordion.Accordeon {
    -webkit-box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
    -moz-box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
    box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
    font-family: Arial, Helvetica, sans-serif;
    border-color: #505050;
    border-style: solid;
    border-width: 8px;
    border-radius: 37px;
    margin: 0 auto;
    height: 1888px;
    width: 350px;
}

.accordion.Accordeon > ul > li,
.Accordeon .accordion-title,
.Accordeon .accordion-content,
.Accordeon .accordion-separator {
    float: none;
} 

.accordion.Accordeon > ul > li {
    background-color: #1f1f1f;
    margin-right: -0px;
    margin-bottom: -390px;
}

.Accordeon .accordion-select:checked ~ .accordion-separator {
    margin-right: 0px;
    margin-bottom: 390px;
} 

.Accordeon .accordion-title,
.Accordeon .accordion-select  {
    background-color: #2d2d2d;
    color: #ffffff;
    width: 350px;
    height: 60px;
    font-size: 29px;
}

.Accordeon .accordion-title span {
    margin-bottom: 20px; 
    
} 

.Accordeon .accordion-select:hover ~ .accordion-title,
.Accordeon .accordion-select:checked ~ .accordion-title {
    background-color: #3068cc;
} 

 .Accordeon .accordion-title span  {	
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-writing-mode: lr-tb;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
    margin-bottom: 0px;
    line-height: 60px;
} 

.Accordeon .accordion-content {
    background-color: #3e3e3e;
    color: #f5f2f0;
    min-height: 350px;
    width: 310px;
    padding: 20px;
}

.Accordeon .accordion-title,
.Accordeon .accordion-select:checked ~ .accordion-content {
    margin-right: 1px;
    margin-bottom: 1px;
} 

/* Do not change following properties, they aren't 
generated automatically and are common for each slider. */
.accordion {
    overflow: hidden;
}

.accordion > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 101%;
}

.accordion > ul > li,
.accordion-title {
    position: relative;
}

.accordion-select {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 1;
}

.accordion-title span {
    display: block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    white-space: nowrap;
}

.accordion-content {
position: relative;
overflow: auto;   
height: 100px;
}

.accordion-separator {
    transition: margin 0.3s ease 0.1s;
    -o-transition: margin 0.3s ease 0.1s;
    -moz-transition: margin 0.3s ease 0.1s;
    -webkit-transition: margin 0.3s ease 0.1s;
}







.Liseret1 {
-moz-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	background-color:transparent;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	
}
.Liseret1:hover {
	background-color:transparent;
}
.Liseret1:active {
	position:relative;
	top:1px;
}

        



.Liseret2 {
-moz-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	background-color:transparent;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	padding:6px 24px;
	text-decoration:none;
        width:85%;
 margin-top: 7px;
	
}
.Liseret2:hover {
	background-color:transparent;
}
.Liseret2:active {
	position:relative;
	top:1px;
}

        




.Liseret3 {
-moz-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	background-color:transparent;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #111111;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:20px;
	padding:6px 24px;
	text-decoration:none;
        width:85%;
	
}
.Liseret3:hover {
	background-color:transparent;
}
.Liseret3:active {
	position:relative;
	top:1px;
}

  





.TextZoneGris {
	-moz-box-shadow: 3px 4px 0px 0px #899599;
	-webkit-box-shadow: 3px 4px 0px 0px #899599;
	box-shadow: 3px 4px 0px 0px #899599;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
	background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #d6bcd6;
	display:inline-block;
	cursor:pointer;
	color:#010b0d;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:10px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #e1e2ed;
text-align:left;

}
.TextZoneGris:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
	background-color:#bab1ba;
}
.TextZoneGris:active {
	position:relative;
	top:1px;
}




















 .control {
  
          font-family: arial;
   
         display: block;
     
       position: relative;
    
        padding-left: 33px;
   
         margin-bottom: 6px;
    
        padding-top: 10px;
        
    cursor: pointer;
           
 font-size: 18px;
        }
   
         .control input {
  
              position: absolute;
 
               z-index: -1;
        
        opacity: 0;
            }
    
    .control_indicator {
            position: absolute;
  
          top: 8px;
         
   left: 0;
         
   height: 20px;
  
          width: 20px;
   
         background: #e6e6e6;
   
         border: 0px solid #000000;
        }
  
      .control-radio .control_indicator {
        
    border-radius: undefined%;
        }
       
 
        .control:hover input ~ .control_indicator,
    
    .control input:focus ~ .control_indicator {
     
       background: #cccccc;
        }
        
      
  .control input:checked ~ .control_indicator {
   
         background: #2aa1c0;
        }
       
 .control:hover input:not([disabled]):checked ~ .control_indicator,
    
    .control input:checked:focus ~ .control_indicator {
   
         background: #0e6647d;
        }
  
      .control input:disabled ~ .control_indicator {
      
      background: #e6e6e6;
            opacity: 0.6;
      
      pointer-events: none;
        }
   
     .control_indicator:after {
    
        box-sizing: unset;
        
    content: '';
  
          position: absolute;
        
    display: none;
        }
     


   .control input:checked ~ 
.control_indicator:after {
         
   display: block;
        }
    
    .control-checkbox 
.control_indicator:after {
   
         left: 8px;
        
    top: 5px;
          
  width: 3px;
   
         height: 10px;
       
     border: solid #ffffff;
   
         border-width: 0 2px 2px 0;
      
      transform: rotate(45deg);
        }
    
    .control-checkbox input:disabled ~ 
.control_indicator:after {
  
          border-color: #7b7b7b;
       
 }






.image1 {
  border-radius: 35px;
  padding: 20px; 
  width: 95%;
  height: auto;  
}



Text
Font Size:
bold italic
Size
Vertical Size:
Horizontal Size:
Border
Border Radius:
Border Size:
Box Shadow
Text Shadow
Vertical Position:
Horizontal Position:
Blur Radius:





.rondsupp {
	background-color:#c75945;
	-moz-border-radius:42px;
	-webkit-border-radius:42px;
	border-radius:42px;
	border:2px solid #ab1921;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:3px 0px;
	text-decoration:none;
	text-shadow:0px 1px 0px #000300;
}
.rondsupp:hover {
	background-color:#5cbf2a;
}
.rondsupp:active {
	position:relative;
	top:1px;
}

        

.rondplus {
	background-color:#45c773;
	-moz-border-radius:42px;
	-webkit-border-radius:42px;
	border-radius:42px;
	border:2px solid #2e8a0f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:3px 0px;
	text-decoration:none;
	text-shadow:0px 1px 0px #000300;
}
.rondplus:hover {
	background-color:#5cbf2a;
}
.rondplus:active {
	position:relative;
	top:1px;
}




a {color: #ffffff}     /* lien non-visité */
a:visited {color: #ffffff}  /* lien visité */
a:hover {color: #FF0000}   /* lien au survol */
a:active {color: #0000FF}   /* lien sélectionné */



.gradient {  background-image:    linear-gradient( to right,  green,  rgb(255, 255, 0), #f06d06, red  );
     width:95%;  padding-top:8px;
 border-radius:5px;

}


.gradientcover { background-color:#000000;   width:35%; padding-top: -8px;
  border-radius:5px;  

}






.Liseretdem {
-moz-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	background-color:black;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:10px;
	padding:6px 10px;
	text-decoration:none;
        width:85%;
	
}
.Liseretdem:hover {
	background-color:#000000;
}
.Liseretdem:active {
	position:relative;
	top:1px;
}
.Liseretdem:active {color: #444444}   /* lien sélectionné */
        





        .blink {
          color:red; background-color:yellow; 
          animation: allblink 1s infinite;
        }
        @keyframes allblink { 
        0% { }
        50% { color:green; background-color:orange; } 
        }




.hzslider {  
 
scroll-snap-align: start; 
 width:100%;
  height:400px;  
  display: flex;   
 overflow-x: auto;

}




.hzslider img {  margin-right: 15px;}


.hzslider content { min-width:200px;  }


.hzslider::-webkit-scrollbar {    display: none;}




.box {
	background: linear-gradient(to right, gold, darkorange);
	color: black;
	padding-left: 2px;
		padding-right: 2px;
	text-align: center;
	font-family: sans-serif;
	align: center;
	border: 4px solid darkgoldenrod;
	border-radius: 10px;
	text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 3px 2px 0 1px rgba(0, 0, 0, 0.2);
margin-bottom: 2px;
}


.box::before {
	content: '';
	position: absolute;
	width: 100%;
	
	background: linear-gradient(to right, transparent, white, transparent);
	left: -100%;
	transition: 0.5s;
}

.box:hover::before {
	left: 100%;
}

.box:hover {
	transform: translateX(-10px)   ;
	box-shadow: 2px 2px 2px 2px rgba(111, 111, 111, 0.2);  
}




input[type="radio"]{
width: 20px;
height: 20px;
} 


.gbutton {
	color: black;
	margin-left: 5%;
	margin-right: 5%;
  font-size: 20px;
  padding: 10px 20px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background-color:  black ;
  border: none;
  border-radius: 18px;
   box-shadow:5px 8px, 1em -5px 8px rgba(0, 1, 0.4, 0.6), 10px 5px 6px 4px yellow;
   color:white;   
    max-width: 100%;  
  
}

.gbutton:active {
  transform: translateX(-140px);
}

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 12px;
  resize: vertical;
}

input[type=submit] {
  background-color:  #FF0000 ;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color:   #e57373   ;
  padding: 20px;
}


.jbox {
	background-color : #f1c40f;
	color: black;
	padding-left: 2px;
		padding-right: 2px;
	text-align: center;
	font-family: sans-serif;
	align: center;
	border: 2px solid darkgoldenrod;
	border-radius: 4px;
	text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 3px 2px 0 1px rgba(0, 0, 0, 0.2);
margin-bottom: 2px;
}


.jbox::before {
	content: '';
	position: absolute;
	width: 100%;
	
	background: linear-gradient(to right, transparent, white, transparent);
	left: -100%;
	transition: 0.5s;
}

.box:hover::before {
	left: 100%;
}

.jbox:hover {
	transform: translateX(1px) translateY(1px)  ;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);  
}





.sbox {
	  background-color:  #5dade2 ;
	color: black;
	padding-left: 2px;
		padding-right: 2px;
	text-align: center;
	font-family: sans-serif;
	align: center;
	border: 2px solid darkgoldenrod;
	border-radius: 4px;
	text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 3px 2px 0 1px rgba(0, 0, 0, 0.2);
margin-bottom: 2px;
}


.sbox::before {
	content: '';
	position: absolute;
	width: 100%;
	
	background: linear-gradient(to right, transparent, white, transparent);
	left: -100%;
	transition: 0.5s;
}

.box:hover::before {
	left: 100%;
}

.sbox:hover {
	transform: translateX(1px) translateY(1px)  ;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);  
}






.rbox {
	background-color : #a3e4d7 ;
	color: black;
	padding-left: 2px;
		padding-right: 2px;
	text-align: center;
	font-family: sans-serif;
	align: center;
	border: 2px solid darkgoldenrod;
	border-radius: 4px;
	text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 3px 2px 0 1px rgba(0, 0, 0, 0.2);
margin-bottom: 2px;
}


.rbox::before {
	content: '';
	position: absolute;
	width: 100%;
	
	background: linear-gradient(to right, transparent, white, transparent);
	left: -100%;
	transition: 0.5s;
}

.box:hover::before {
	left: 100%;
}

.rbox:hover {
	transform: translateX(1px) translateY(1px)  ;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);  
}








input[type=radio] {
  -webkit-transform: scale(1.5,1.5); 
  margin-left: 20px;
}

.rb {
	color: black;
	margin-right 20px: 5%;
  font-size: 80px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  background-color:   #ec7063  ;
  border: none;
  border-radius: 25px;
  box-shadow: 55 60px #999;
  
}



.tbutton {
	color: black;
	margin-left: 5%;
	margin-right: 5%;
  font-size: 80px;
  padding: 10px 20px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background-color:   #ec7063  ;
  border: none;
  border-radius: 25px;
  box-shadow: 55 60px #999;
    max-width: 100%;  
  
}

.tbutton:hover {background-color:  #f9e79f }


.tbutton:active {
  background-color:  #fef9e7 ;
  box-shadow: 55 55px #666;
  transform: translateY(14px);
}


.rbutton {
	color: red;
	margin-left: 5%;
	margin-right: 5%;
  font-size: 60px;
  padding: 10px 20px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
    background-color: #4CAF50;
  border: none;
  border-radius: 25px;
  box-shadow: 50 66px #999;
  max-width: 100%;  
  
}

.rbutton:hover {background-color: #3e8e41}

.rbutton:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
 
}

}

.telbutton
	p HOVER ME
	
.telbutton {
	position: fixed;
	text-align: center;
	font-size: 42px;
	font-family: 'Raleway', sans-serif;
	color: hsl(220, 80%, 50%);
	width: 350px;
	height: 100px;
	margin-top: calc(50vh - 75px);
	margin-left: calc(50vw - 175px);

	border-radius: 30px;
	text-shadow: 
		0px 5px hsl(220, 80%, 30%), 
		0px 10px 10px #0003;
	box-shadow: 
		0px 0px 0px 15px hsl(330, 80%, 50%),
		0px 10px 0px 15px hsl(330, 80%, 40%),
		0px 20px 20px 15px #0003;
	cursor: pointer;
	border-radius: 100px 30px 100px 30px;

}

.telbutton p {
	margin-top: 20px;
	transform: rotate(-3deg);
}

.telbutton:hover {
	animation: .8s morph ease infinite;
}

.telbutton:hover p {
	animation: .8s rot ease infinite;
}

@keyframes morph {
	0% {
		border-radius: 100px 30px 100px 30px;
	} 50% {
		border-radius: 30px 100px 30px 100px;
	} 100% {
		border-radius: 100px 30px 100px 30px;
	}
}

@keyframes rot {
	0% {
		transform: rotate(-3deg);
	} 50% {
		transform: rotate(3deg);
	} 100% {
		transform: rotate(-3deg);
	}
}



.probox {
	background-color: white;
	color: white;
	padding-left: 2px;
		padding-right: 2px;
	text-align: center;
	font-family: sans-serif;
	align: center;
	border: 2px solid darkgoldenrod;
	border-radius: 4px;
	text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 3px 2px 0 1px rgba(0, 0, 0, 0.2);
margin-bottom: 2px;
}






.box {
	background: linear-gradient(to right, gold, darkorange);
	color: black;
	padding-left: 2px;
		padding-right: 2px;
	text-align: center;
	font-family: sans-serif;
	align: center;
	border: 2px solid darkgoldenrod;
	border-radius: 4px;
	text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 3px 2px 0 1px rgba(0, 0, 0, 0.2);
margin-bottom: 2px;
}


.box::before {
	content: '';
	position: absolute;
	width: 100%;
	
	background: linear-gradient(to right, transparent, white, transparent);
	left: -100%;
	transition: 0.5s;
}

.box:hover::before {
	left: 100%;
}

.box:hover {
	transform: translateX(1px) translateY(1px)  ;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);  
}





.caser {
	padding-left: 10px;
align:left;
margin-left: 20px;
height:40px ; 
border: 2px solid darkgoldenrod;
border-radius: 12 px; 
width:80%;
box-shadow: 2px 2px 0 0px rgba(0, 0, 0, 0.2);

}


.caser:hover {
	  transform: translateX(1px) translateY(1px)  ;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);  
}



.caser2 {
		padding-left: 10px;
align: left;
height:40px ; 
border: 2px solid darkgoldenrod;
border-radius: 12 px; 
width:70%;
margin-left : 40px;
margin-bottom  : 5px;
box-shadow: 10px 7px 0 0px rgba(0, 0, 0, 0.2);
}

.caser2:hover {
	  transform: translateX(2px) translateY(2px)  ;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);  
}



.enterbutton {
	padding: 10px;
 font-size: 80px; 
margin-top:20px; 
margin-bottom:20px; 
align:center;
border: 3px solid darkgoldenrod;
border-radius: 12px; 
box-shadow: 10px 7px 0 0px rgba(0, 0, 0, 0.2);
}


.enterbutton:hover {
	  transform: translateX(8px) translateY(8px)  ;
	box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);  
}



.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}
.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";

  /* This is how textarea text behaves */
  white-space: pre-wrap;

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
 /* resize: none; */

  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  border: 1px solid black;
  padding: 0.2rem;
  font: inherit;

  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}

body {
  margin: 2rem;
  font: 1rem/1.4 system-ui, sans-serif;
}

label {
  display: block;
}



input[type=radio] {
  -webkit-transform: scale(4,4); 
  translateX(-80px);
  margin-left: 0%;
}

.rb {
	color: black;
	margin-left: 5%;
	margin-right: 5%;
  font-size: 20px;
  padding: 5px 5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background-color:   #ec7063  ;
  border: none;
  border-radius: 10px;
  box-shadow: 55 60px #999;
    max-width: 100%;  
  
}



.tbutton {
	color: black;
	margin-left: 5%;
	margin-right: 5%;
  font-size: 20px;
  padding: 5px 5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background-color:   #ec7063  ;
  border: none;
  border-radius: 10px;
  box-shadow: 55 60px #999;
    max-width: 100%;  
  
}

.tbutton:hover {background-color:  #f9e79f }


.tbutton:active {
  background-color:  #fef9e7 ;
  box-shadow: 55 55px #666;
  transform: translateY(14px);
}


.rbutton {
	color: red;
	margin-left: 5%;
	margin-right: 5%;
  font-size: 20px;
  padding: 5px 5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
    background-color: #4CAF50;
  border: none;
  border-radius: 10px;
  box-shadow: 50 66px #999;
  max-width: 100%;  
  
}

.rbutton:hover {background-color: #3e8e41}

.rbutton:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

}

.telbutton
	p HOVER ME
	
.telbutton {
	position: fixed;
	text-align: center;
	font-size: 25px;
	font-family: 'Raleway', sans-serif;
	color: hsl(220, 80%, 50%);
	width: 350px;
	height: 100px;
	margin-top: calc(50vh - 75px);
	margin-left: calc(50vw - 175px);

	border-radius: 10px;
	text-shadow: 
		0px 5px hsl(220, 80%, 30%), 
		0px 10px 10px #0003;
	box-shadow: 
		0px 0px 0px 15px hsl(330, 80%, 50%),
		0px 10px 0px 15px hsl(330, 80%, 40%),
		0px 20px 20px 15px #0003;
	cursor: pointer;
	border-radius: 10px 30px 10px 30px;

}

.telbutton p {
	margin-top: 20px;
	transform: rotate(-3deg);
}

.telbutton:hover {
	animation: .8s morph ease infinite;
}

.telbutton:hover p {
	animation: .8s rot ease infinite;
}

@keyframes morph {
	0% {
		border-radius: 100px 30px 100px 30px;
	} 50% {
		border-radius: 30px 100px 30px 100px;
	} 100% {
		border-radius: 100px 30px 100px 30px;
	}
}

@keyframes rot {
	0% {
		transform: rotate(-3deg);
	} 50% {
		transform: rotate(3deg);
	} 100% {
		transform: rotate(-3deg);
	}
}




.box {
	background: linear-gradient(to right, gold, darkorange);
	color: black;
	padding: 10px;
	--width: 96%;
	width: var(--width);
	text-align: center;
	line-height: var(--height);
	font-size: 16px;
	font-family: sans-serif;
	align: center;
	border: 2px solid darkgoldenrod;
	border-radius: 20px;
	text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 10px 10px 0 5px rgba(0, 0, 0, 0.2);

}




.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}
.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";

  /* This is how textarea text behaves */
  white-space: pre-wrap;

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
 /* resize: none; */

  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  border: 1px solid black;
  padding: 0.2rem;
  font: inherit;

  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}

body {
  margin: 2rem;
  font: 1rem/1.4 system-ui, sans-serif;
}

label {
  display: block;
}



input[type=radio] {
  -webkit-transform: scale(4,4); 
  translateX(-80px);
  margin-left: 0%;
}

.rb {
	color: black;
	margin-left: 5%;
	margin-right: 5%;
  font-size: 20px;
  padding: 5px 5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background-color:   #ec7063  ;
  border: none;
  border-radius: 10px;
  box-shadow: 55 60px #999;
    max-width: 100%;  
  
}



.tbutton {
	color: black;
	margin-left: 5%;
	margin-right: 5%;
  font-size: 20px;
  padding: 5px 5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background-color:   #ec7063  ;
  border: none;
  border-radius: 10px;
  box-shadow: 55 60px #999;
    max-width: 100%;  
  
}

.tbutton:hover {background-color:  #f9e79f }


.tbutton:active {
  background-color:  #fef9e7 ;
  box-shadow: 55 55px #666;
  transform: translateY(14px);
}


.rbutton {
	color: red;
	margin-left: 5%;
	margin-right: 5%;
  font-size: 20px;
  padding: 5px 5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
    background-color: #4CAF50;
  border: none;
  border-radius: 10px;
  box-shadow: 50 66px #999;
  max-width: 100%;  
  
}

.rbutton:hover {background-color: #3e8e41}

.rbutton:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

}

.telbutton
	p HOVER ME
	
.telbutton {
	position: fixed;
	text-align: center;
	font-size: 25px;
	font-family: 'Raleway', sans-serif;
	color: hsl(220, 80%, 50%);
	width: 350px;
	height: 100px;
	margin-top: calc(50vh - 75px);
	margin-left: calc(50vw - 175px);

	border-radius: 10px;
	text-shadow: 
		0px 5px hsl(220, 80%, 30%), 
		0px 10px 10px #0003;
	box-shadow: 
		0px 0px 0px 15px hsl(330, 80%, 50%),
		0px 10px 0px 15px hsl(330, 80%, 40%),
		0px 20px 20px 15px #0003;
	cursor: pointer;
	border-radius: 10px 30px 10px 30px;

}

.telbutton p {
	margin-top: 20px;
	transform: rotate(-3deg);
}

.telbutton:hover {
	animation: .8s morph ease infinite;
}

.telbutton:hover p {
	animation: .8s rot ease infinite;
}

@keyframes morph {
	0% {
		border-radius: 100px 30px 100px 30px;
	} 50% {
		border-radius: 30px 100px 30px 100px;
	} 100% {
		border-radius: 100px 30px 100px 30px;
	}
}

@keyframes rot {
	0% {
		transform: rotate(-3deg);
	} 50% {
		transform: rotate(3deg);
	} 100% {
		transform: rotate(-3deg);
	}
}




.box {
	background: linear-gradient(to right, gold, darkorange);
	color: black;
	padding: 10px;
	--width: 96%;
	width: var(--width);
	text-align: center;
	line-height: var(--height);
	font-size: 16px;
	font-family: sans-serif;
	align: center;
	border: 2px solid darkgoldenrod;
	border-radius: 20px;
	text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 10px 10px 0 5px rgba(0, 0, 0, 0.2);

}



* {
  font-family: sans-serif;
}

body {
  background: rgba(0, 247, 255, 1)
}
/*
.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}
*/



.parent {
  display: flex;
  margin-right:5px;
 /* flex-direction: column;*/
  /*align-items: center;*/
}

.parent button {
  background-color: #48abe0;
  color: white;
  border: none;
  padding: 5px;
  font-size: 31px;
  height: 130px;
  width: 130px;
  box-shadow: 0 2px 4px darkslategray;
  cursor: pointer;
  transition: all 0.2s ease;
}

.parent button:active {
  background-color: #48abe0;
  box-shadow: 0 0 2px darkslategray;
  transform: translateY(2px);
}

.parent button:not(:first-child) {
  margin-top: 10px;
}

.round-1 {
  border-radius: 5%;
}

.round-2 {
  border-radius: 10%;
}

.round-3 {
  border-radius: 20%;
}

.round-4 {
  border-radius: 30%;
}

.round-5 {
  border-radius: 40%;
}

.round-6 {
  border-radius: 70%;
}