@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');

html {
    box-sizing: border-box;
    height: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100%;
    background-color:#5F9EA0;
    box-shadow: 0 100px 300px #000000 inset;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
}   

a {text-decoration:none}      
            
* {box-sizing: border-box;margin:0;padding:0;}
a {text-decoration:none}        


.container {flex-grow: 1; /* This is the key: it forces the content area to consume all available vertical space */
    width: 100%;} 


header {
 border-bottom:2px solid #5d9b9d;
}

h1 {font-family: 'Oswald', sans-serif;color:#74b6b8;margin:15px 2px 18px 11px;}
header h1 {margin:4px 4px 6px 11px;font-size:1.7em;}

h2 {font-family: 'Oswald'; color:#053605}	
	


.center-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-container h1 {margin:18px auto 5px;text-shadow: 2px 3px #1c1717;}

.usr {background:#2a6a6a;color:#97becf;float:right;padding:3px 9px;margin-top:8px;}

            .dashboard-link { 
                text-align: center;
            width: 164px;
            text-decoration: none; 
            padding: 5px 13px; 
            background-color: #10878d; 
            color: white; 
            border-radius: 5px; 
            font-size: 1.1em; 
            border: 1px solid #ccc;
            transition: background-color 0.3s;
        }
      .dashboard-link:hover {background:#0056b3;color:yellow;} 
        
        .cntr {text-align:center;}
        
     .dash2   {float:right;margin-right:7px;margin-top:8px;}
        
        .butgrey {background:#748084;box-shadow:none;}
        .butgrey {
    background: #7c8e95;
    box-shadow: 0 0 8px 1px #3a4545 inset;
}
        .butgrey:hover  {background:#0056b3}
 


button, input[type=submit] {
	color: white;
	border:2px solid #564141;
	font-size:1.15em;
	width:clamp(190px, 42%, 230px);
	border-radius:6px;
	background-color: #9c233d;
	box-shadow: 1px -1px 10px 2px #650808 inset;
	padding: 12px 5px;
	margin: 8px 0;
	cursor: pointer;
  }

button:hover {
    background:#d30c40;
  opacity: 0.9;
  box-shadow: 0 0 10px 2px #554a4a, 0 0 8px 0 black inset;
}

.butsave {color: white;  box-shadow: 0 0 11px 0 black inset;}

input[type=submit]:hover {
  opacity: 0.9;
  box-shadow: 0 0 10px 2px #554a4a;
}
input[type=submit]:active {
  opacity: 1;
  box-shadow: 0 0 4px 2px gray inset, 0 0 5px 2px gray;
}
button:active {
  opacity: 1;
  box-shadow: 0 0 4px 2px gray inset, 0 0 5px 2px gray;
}

.details-btn {border: none; padding: 5px 10px;font-size:0.9em;background:#647276;box-shadow:0 0 1px 0 black, 0 0 4px black inset;}

.mainpage {
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	flex-flow: row wrap;
	position:relative;
	justify-content: center;
}
.mainpage h2 {padding:25px 15px 10px 40px;text-align:center;}




 
      legend { 
    font-weight: 600;
    font-style: italic;
    color: #056265;
    font-family: serif;
}

    @media screen and (max-width: 1300px) {
.mainpage > div {margin-top:40px;}
}

        @media (max-width: 768px) {
        h1 {font-size:1.6em;margin:2px 0 5px;}
        h2 {font-size:1em;}
        .blk {display:none;}
        }