section:not(:target):not(#home),
    section:target ~ #home {
        display: none}


* {
  box-sizing: border-box;
} 

body{
font-family:MS UI Gothic;
color:black;
background:#f2f2dc;
margin:0;
padding:0;}

a:link{
text-decoration:none;
color:green;}
a:hover{
text-decoration-line: underline;
text-decoration-style: wavy;
color:blue;}
a:visited{
color:green;}
a:active{
color:green;}

container {
        display:grid;
        margin:10px;
        grid-template:
        "header main"
        "nav main" 1fr
        "nav2 main" 1fr
        "footer footer"
        /200px 1fr;
        width:1000px;
        max-width:1000px;
        height:95vh;
        }

header{
margin:0px 4px 4px 0px;
justify-content:center;
grid-area:header;
color:lightyellow;
border:1px solid black;
background:#0D6DDD;
}

nav{
padding-right:20px;
margin:4px 4px 4px 0px;
display:flex;
flex-direction: column;
justify-content: space-evenly;
grid-area:nav;
height:100%;
overflow-x:hidden;
overflow-y:auto;
border-radius:2px;
border:1px solid green;
border-radius:2px 50% 50% 2px;
background-image:linear-gradient(to bottom,white,lightgrey);
}

nav2{
padding-right:20px;
margin:2px 4px 0px 0px;
display:flex;
flex-direction: column;
justify-content: space-evenly;
grid-area:nav2;
height:100%;
overflow-x:hidden;
overflow-y:auto;
border-radius:2px;
border:1px solid green;
border-top:none;
border-radius:2px 50% 50% 2px;
background-image:linear-gradient(to bottom,lightgrey,lightgreen);
}

main{
grid-area:main;
height:100%;
overflow-x:hidden;
overflow-y:auto;
background:transparent;
}

footer{
text-align:left;
margin-top:8px;
grid-area:footer;
border:1px solid green;
padding:1px;
height:22px;
border-radius:2px;
background-image:linear-gradient(to left,lightgreen,lightgrey);
}

footer img{
height:18px;}


.headerimg {
width:100%;}


#read{
padding-left:10px;
text-align:right;
width:100%;
height:100%;
}
#join{
padding-left:10px;
text-align:left;
width:100%;
height:100%;
}
#info{
padding:0px 10px 10px 10px;
text-align:left;
width:100%;
height:100%;
}
#home{
padding-left:30px;
text-align:right;
width:100%;
height:100%;
}


.sideimg{
border-radius:0px 2px  2px 0px;
border-right:1px solid green;
border-top:1px solid green;
border-bottom:1px solid green;
float:right;
height:100%;
width:auto;}

.infosideimg{
float:right;
height:80%;
width:auto;}

.navitxt{
font-family:impact;
font-size:30px;
font-style:italic}

imp0{
color:green;
font-family:impact;
font-size:45px;
font-style:italic}

imp1{
font-family:impact;
font-style:italic}

imp2{
color:green;
font-size:30px;
font-family:impact;
font-style:italic}


submitfont{
-webkit-text-stroke: 1px blue;
width:200px;
z-index:999;
position:absolute;
margin-top:40px;
font-size:30px;
font-family:impact;
font-style:italic;
padding:10px;
color:white;
background-color: transparent;
background-image: radial-gradient(lightgreen 30%,transparent 70%);
background-size:100%;
background-repeat:no-repeat;
background-position:center;
}
.circlegirl {
position:relative;
display:inline-block;
width:200px;
border:1px solid green;
border-radius:100%;}


.submitbtn:hover{
position: relative;
top: 0;
animation: bounce 0.3s ease infinite alternate;}


.pagetitle{
text-align:right;margin-right:5px}


.bouncetxt { 
position: relative;
top: 0;
animation: bounce 0.3s ease infinite alternate;
}

@keyframes bounce {
100% {
top: -.50rem;
}
}


  @media (max-width: 700px) {
container {
        display:grid;
        margin:5px;
        grid-template:
        "header main"
        "nav main" 1fr
        "nav2 main" 1fr
        "footer footer"
        /90px 1fr;
        width:98%;
        height:98vh;
        }
.sideimg{
border-radius:0px 2px  2px 0px;
border-right:1px solid green;
border-top:1px solid green;
border-bottom:1px solid green;
float:right;
height:auto;
width:150px;}
        
        }