@import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');

.font
{
    font-family: "Carter One", system-ui;
    font-weight: 100;
    font-style: normal;
}

*{box-sizing: border-box;}

/* ######################## GENERAL ############################### */
:root
{ 
    --width: 1024px; 
    --fontHeaderSize: 40px;
}

html {
    scroll-behavior: smooth;
}

body,html								
{
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	height: 100%; 
	margin: 0;
	padding: 0;
	color:var(--fontColor);
	background-color:var(--color100);
}

body									
{
	height:auto; 
	overflow-x:hidden;
    max-width:var(--width);
    margin:auto;
}

h1          {text-transform: uppercase;font-size:22px; padding-left:20px;}
p           {padding:20px;}
img.icon    {width:200px;height:auto;}

table 								{width:100%;height:15px;table-layout:fixed;border:0px;margin:0px;border-spacing:0px;padding:0px;border-collapse:collapse;} 
table td							{padding: 0px;}

/* ######################## DESIGNS ###################### */

.frontText {text-align:center;width:100%;font-size:var(--fontHeaderSize);color:white;font-weight:bold;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); z-index:1;position:absolute;  top: 50%;  left: 50%; transform: translate(-50%, -50%);}



/* ######################## HEADER ############################### */

header                      {padding:10px;position:relative;}
header label                {position:absolute;top:50%;left:120px;font-size:35px;transform: translateY(-50%);text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}

#naw                        {z-index:1;position:absolute;right:10px;top:50%;transform: translateY(-50%);font-size:14px;background-color:var(--backgroundColor);}
@media (max-width: 600px)   {#naw {font-size:12px;padding:5px;} header label {display:none;}}


/* ######################## NAVIGATION ############################### */

nav   {background-color:var(--fontColor);color:var(--backgroundColor); padding:15px; }
nav a {text-decoration: none; color:var(--backgroundColor); margin-right:25px;white-space: nowrap;}

@media (max-width: 600px) 
{
    nav   { display: flex; flex-wrap: wrap ; }
    nav a { margin-bottom:20px;display:block;width:100%;}
    nav a:last-child {margin-bottom:0px;}

    nav a::before {
        content: "•"; 
        margin-right: 10px;
      }
}

@media (min-width: 601px) 
{
    nav {
        position: -webkit-sticky; /* For Safari */
        position: sticky;
        top: 0;
        padding: 10px; /* Optional styling */
        z-index: 1000; /* Ensure it stays on top */
    }
}
/* ######################## LOGO ############################### */

.logo 
{
    border:2px solid var(--fontColor);
    display:inline-block;
    border-radius:50%;
    text-align:center;
    width:80px;
    height:80px;
    position:relative;
    margin-bottom:15px;
    background-color:white;
    
}
.logo img
{
    width:80%;
    height:80%;
    border:0px solid red;
    display: inline-block;  
    position: absolute;  
    top: 53%;  
    left: 50%; 
    transform: translate(-50%, -50%);


}

.logo .label
{
    position: absolute;   
    left:50%; 
    transform: translateX(-50%);
    bottom:-15px;
    background-color:var(--backgroundColor);;
    border:1px solid var(--fontColor);
    padding:3px;
    padding-right:5px;
    padding-left:5px;
    border-radius:8px;
    font-size:12px;
    z-index:1;
   

}

       

.logo .waves
{
    position: absolute;   
    left:55%; 
    top:27px;
    transform: translateX(-50%);
    width:60px;
  
}