*{margin:0 0 0 0;
padding:0 0 0 0}

html {
scroll-behavior: smooth
}
:root::-webkit-scrollbar{
  display: none;
}

:root {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body{
max-width: 1920px; /*For compact design use max-width : ###px or rem */
min-width :360px;
min-height : 100dvh ;
margin:0 auto; /* centers compact design */
font-family: Arial ,Helvetica , system-ui , sans-serif;
font-size: clamp(1.125rem , 1.125rem + .325dvw , 1.5rem);
line-height: 1.4; /* 1.2 to 1.5 X size of text */
font-style:normal;
font-weight: normal;
text-indent :10px ;
color:#000;
background-color : whitesmoke;
box-sizing : border-box;
overscroll-behavior: contain
}



header ,   footer , .container {
   display :flex; /* Alert browser to render flexbox */
   flex-wrap : wrap; /* Allow items to wrap when necessary */
   padding: clamp(3rem , 3rem + .5dvw , 4rem ) clamp(1.125rem, 1.125rem + 9dvw , 10dvw);
   border: none

}

header { /*Begin Nested parent header*/
        background:linear-gradient(to bottom , dodgerblue , whitesmoke );
        justify-content : flex-start;
        align-items : flex-start;} /* When nesting don't forget the closing semi-colon */
        
 header p { /*nested paragraph*/
        font-size: clamp(1.5rem , 1.5rem + 1dvw , 2.5rem); /* Adjusts from 24px to 40px*/
        text-indent : 0;
        color:#fff;
        text-shadow : 1px 1px 2px #000;
           } 



main ,
div.left ,
div.right ,
nav , .container { /*Begin nested main */
padding: 0 clamp(1.125rem, 1.125rem + 9dvw , 10dvw);
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 4dvw;
}
.column {
flex:1;
}
footer { /*Begin nested parent footer*/
justify-content : center;
gap : 1dvw;
background:linear-gradient(to top , dodgerblue , whitesmoke );
color: #000;
text-shadow : none;}


 div.ftr-left  { /* Child container */
  flex: 1;
  background-color: transparent;
  text-align: left;
  margin: 0;
  padding: 0;
               }
               
div.ftr-middle { /* Child container */
  flex: 4; /* width 4 times size of default */
  flex-wrap : wrap;
  text-align : center;
  background-color: transparent;
  margin: 0;
  padding: 0;
               }
 div.ftr-right { /* Child container */
  flex: 1;
  text-align : right;
  background-color: transparent;
  margin: 0;
  padding: 0;
               }

 div.ftr-left a {
text-shadow: 1px 1px 4px #000;
font-size: clamp( 2rem , 2rem + 1dvw , 3rem); /* finger size */
text-decoration : none
                }

 div.ftr-middle p ,
div.ftr-middle p a {
font-size: clamp( 1rem , 1rem + .25dvw , 1.125rem); /* text size */
line-height: clamp(1.2rem , 1.2rem + .25dvw , 1.5rem);
text-indent: 0;
text-decoration : none;
padding: 0 ;
background: transparent
                  }

 div.ftr-right a {
text-shadow: 1px 1px 4px #000;
font-size: clamp( 2rem , 2rem + 1dvw , 3rem); /* finger size */
text-decoration : none;
                 }
p a:hover {
color: #ff0000
}



h1 , h2  {
font-weight: normal;
text-align : center;
margin : 1rem 0;
padding: 0 0;
         }

h1 {
font-size: clamp(1.5rem , 1.5rem + .5dvw , 2.25rem);
line-height: 1.2; /*1.2 to 1.5 X size of text */
}

h2 {
font-size: clamp(1.25rem , 1.25rem + .25dvw , 1.5rem);
line-height: 1.2; /*1.2 to 1.5 X size of text */
}

p {
color: #000;
text-indent: 1rem;
margin : 1dvw auto; /*whitespace is your friend*/
  }

p.spacer {
font-size: 1rem;
display: block;
clear: both;
}
p a {
text-decoration : underline}
p a:hover {
color : red}

img { aspect-ratio: 450 / 461;}

/*Define Images*/
img.r-img {
max-width: 100%;
height:auto;
margin: 1rem;
box-shadow:2px 2px 4px #000;
float:right}
/*Define Details Function*/
summary {
color: #fff;
font-weight:bold;
text-shadow: 1px 1px 1px #000;
background: dodgerblue;
width: 200px;
}

details[open] {
width: 300px;
background:whitesmoke;
position: absolute;
z-index: auto;
padding: .75rem;
border: solid 1px dodgerblue
}

/*Define Accordian*/
.accordian {
input {
  display: none;
}

input:checked ~ .collapse-content {
  width: 300px;
  height: 200px;
  padding: 4px;
  border: solid 1px
}

.collapse-content {
  height: 0;
  overflow: scroll;
  /*transition: all 0.1s ease-in-out;*/
}

span {
display:block;
width : 300px;
background: black;
color: #fff;
padding: 2px 4px;
margin:2px 0;
border: solid 1px}

span:hover {
background:#c0c0c0;
color:#000;

}

p {
font-size: 1.25rem;
text-indent: 1rem;
margin: 1dvw 0
}

/* Hide scrollbar for Chrome, Safari and Opera */
div.collapse-content::-webkit-scrollbar {
    display: none;
    overscroll-behavior: contain
}

/* Hide scrollbar for IE, Edge and Firefox */
div.collapse-content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  overscroll-behavior: contain
}

@media (max-width: 700px) {
.column {
flex:100%;
}
}

@media (max-width: 800px) {

header {
flex-direction : column; /* Change flex-direction to column */
justify-content : center; /* center content */
align-items: center /*center items */
}

main , nav {
padding: 0 clamp( 1rem , .095rem + 5dvw , 2rem) }

img.r-img {
float:none;
display: block;
max-width: 100%;
margin: 0 auto
}

}