@media (max-width: 576px) {
.hdr1 {
   font-weight: bold ;
   font-size:18pt ;
   }
.hdr2 {
   font-weight: bold ;
   font-size: 12pt ;
   }

.hdr3 {
   font-weight: bold;
   font-size: 16pt ;
   }

.hdr4 {
   font-weight: bold;
   font-size: 13pt ;
   }

.hdr5 {
   font-weight: normal;
   font-size: 10pt ;
   }
.logo {
   height: 16vw ;
   }
.topmenu >  a > button {
   width: 24% ;
   margin-left: auto ;
   margin-right: auto ;
   font-size: 8pt ;
   }
.topinfo {  
   width: 90% ;
   margin-left: auto ;
   margin-right: auto ;
   font-size: 10pt ;
   }
}
@media (min-width:576px) and (max-width: 768px) {
.hdr1 {
   font-weight: bold ;
   font-size:18pt ;
   }
.hdr2 {
   font-weight: bold ;
   font-size: 12pt ;
   }

.hdr3 {
   font-weight: bold;
   font-size: 14pt ;
   }

.hdr4 {
   font-weight: bold;
   font-size: 10pt ;
   }

.hdr5 {
   font-weight: normal;
   font-size: 8pt ;
   }
.logo {
   height: 10vw ;
   }
.topmenu >  a > button {
   width: 24% ;
   margin-left: auto ;
   margin-right: auto ;
   font-size: 8pt ;
   }
 .topinfo {  
   width: 90% ;
   margin-left: auto ;
   margin-right: auto ;
   font-size: 10pt ;
   }
  
}

@media (min-width: 768px) and (max-width:992px) {
.hdr1 {
   font-weight: bold ;
   font-size:24pt ;
   }
.hdr2 {
   font-weight: bold ;
   font-size: 16pt ;
   }

.hdr3 {
   font-weight: bold;
   font-size: 18pt ;
   }

.hdr4 {
   font-weight: bold;
   font-size: 9pt ;
   }

.hdr5 {
   font-weight: normal;
   font-size: 8pt ;
   }
.logo {
   height: 10vw ;
   }
.topmenu > a > button {
   visibility: collapse ;
   display: none ;
   }
.topinfo {  
   visibility: collapse ;
   display: none ;   
   }
   
}

@media (min-width: 992px) and (max-width:1200px) {
.hdr1 {
   font-weight: bold ;
   font-size:30pt ;
   }
.hdr2 {
   font-weight: bold ;
   font-size: 20pt ;
   }

.hdr3 {
   font-weight: bold;
   font-size: 24pt ;
   }

.hdr4 {
   font-weight: bold;
   font-size: 12pt ;
   }

.hdr5 {
   font-weight: normal;
   font-size: 10pt ;
   }
.logo {
   height: 10vw ;
   }
.topmenu > a > button {
   visibility: collapse ;
   display: none ;
   }
.topinfo {  
   visibility: collapse ;
   display: none ;   
   }
   
}

@media (min-width: 1200px) {
.hdr1 {
   font-weight: bold ;
   font-size:36pt ;
   }
.hdr2 {
   font-weight: bold ;
   font-size: 24pt ;
   }

.hdr3 {
   font-weight: bold;
   font-size: 20pt ;
   }

.hdr4 {
   font-weight: bold;
   font-size: 14pt ;
   }

.hdr5 {
   font-weight: normal;
   font-size: 12pt;
   }
   
.logo {
   height: 10vw ;
   }
   
.topmenu > a > button {
   visibility: collapse ;
   display: none ;
   }
.topinfo {  
   visibility: collapse ;
   display: none ;   
   }
}

   
.bottommenu >  a > button {
   width: 24% ;
   margin-left: auto ;
   margin-right: auto ;
   font-size: 8pt ;
   }

   
.hdr1 {
   font-family: Arial, Helvetica, sans-serif;
   color: black;
   }

.hdr2 {
   font-family: Arial, Helvetica, sans-serif;
   color: black;
   text-align: center;
   }

.hdr3 {
   font-family: Arial, Helvetica, sans-serif;
    color: black;
   text-align: center;
   }

.hdr4 {
   font-family: Arial, Helvetica, sans-serif;
   color: black;
   text-align: center;
   }

.hdr5 {
   font-family: "Times New Roman", Times, serif;
   text-align: center;
   }

.desc {
   font-family: "Times New Roman", Times, serif;
   text-indent: 2ch ;
   }
   
.centerimg {
   display: block;
   margin-left: auto ;
   margin-right: auto;
   margin-bottom: 1em ;
   }

.leftimg {
   float: left ;
   margin-right: 1em ;
   margin-bottom: 1em ;
   }
   
.rightimg {
   float: right ;
   margin-right: 1em ;
   margin-bottom: 1em ;
   }

.shack {
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-top: 0 ;
   width: 100% ;
   }

.myhr {
   border: 2px solid black;
   }
   

#info {
   background-image:url("nebula.jpg") ;
   background-color: black ;
   margin-bottom:0.5em ;
   padding-bottom: 0.5em;
   padding-left: 0 ;
   padding-right: 0 ;
   }

.mybutton {
   background-color: darkgray ;
   border-radius: 0.3em ;
   border-color: black ;
   color: black ;
   margin-bottom: 2em ;
   width: 45% ;
   height: auto ;
   box-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.3) ;
   }
   
.arescolor {
   color: blue;
   
   }
.skycolor {
   color: darkorange;
   }
.delarescolor {
   color: black;
   }
   
.contactcolor {
   color: cyan ;
   }
   
.calendarcolor {
   color: forestgreen;
   }
   
.aresborder {
   border-color: blue;
   }
   
.skyborder {
   border-color: darkorange;
   }
   
.delaresborder {
   border-color: black;
   }
   
.contactborder {
   border-color: cyan ;
   }
   
.calendarborder {
   border-color: forestgreen ;
   }
   
.aresbg {
   background-color: blue;
   color: white ;
   }
   
.skybg {
   background-color: darkorange;
   color: white ;
   }
   
.delaresbg {
   background-color: black;
   color: yellow ;
  }
   
.contactbg {
   background-color: cyan ;
   color: black ;
  }

.calendarbg {
   background-color: forestgreen ;
   color: white ;
  }

a:link {
   color: black ;
   }

a:visited {
   color: blue ;
   }

a:hover {
   color: forestgreen ;
   }

   
.hL {
   color: darkred ;
   }

.copyrt {
   color: darkslategray ;
   font-size: 10pt ;
   font-family: "Times New Roman", Times, serif;
   }

#DELARES501 {
   color: white;
   }
#Community {
   color: yellow;
   padding-bottom: 0;
   }

.form-container {
    margin: 30px auto;
    padding: 20px;
    border-radius: 16px;
    border-style: solid ;
    border-color: cyan ;
    border-width: medium ;
    box-shadow: 0.25em 0.52em 0.5em rgba(0,0,0,0.3) ;
   }
   
.checkbox-group {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
   }
.required-field::after {
    content: "*";
    color: red;
    margin-left: 4px;
   }
.submit-btn {
    width: 100%;
    padding: 10px;
    font-weight: bold;
   }