@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import 'https://fonts.googleapis.com/css?family=Sintony';
@import url('https://fonts.googleapis.com/css2?family=Amarante&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arbutus&display=swap');

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

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { padding: 0; margin: 0; scroll-behavior: smooth;
font-size:30px; font-family: "Figtree", sans-serif; color:#999;
scrollbar-color:rgb(0, 0, 0); scrollbar-width:none; transition:2s;
background-color: lightskyblue; }

.desktop {width:100vw; height:auto; }
.container { max-width:1200px; margin:0;  height:auto;}

.header {width:100%; max-height:22vh; position:fixed; top:0;
background-color:white; color:maroon; border:2px solid #333;
font-size:24px; font-family: "Sintony", sans-serif; font-weight:800; z-index: 99;}

.topmenu {width:100%; height:4vh; padding-top:0.5%;
display: flex; justify-content: center; text-align: center; align-items: center;}
.topmenu a {font-size: clamp(16px, 1.2vw, 6rem); line-height:24px; color:maroon; 
padding-bottom:0.2%; margin-left:1%; margin-right:1%; text-decoration: none;}


.midmenu {width:100vw; height:14vh;
display: flex; justify-content: center; text-align: center; align-items: center;
background-color: #333;}
.midmenu a {font-size: clamp(16px, 1.6vw, 8rem); font-weight:700; color:#f1f1f1; }
.midmenu img { padding-top:0.5%; padding-bottom:0.5%;}

.submenu {width:100%; height:4vh; 
display: flex; justify-content: center; align-items: center; text-align: center;
font-size: clamp(16px, 1vw, 5rem); padding-top:0.5%; padding-bottom:0.5%;}
.submenu a { margin-left:1%; margin-right:1%; color:#555}

/* STICKY PRACTICE */

.content_width {max-width:1000px;}

.fixed_container {width:100vw; height:100vh; 
background-color:#f1f1f1; color:#333;
position:fixed; top:22vh; z-index: 5;}
.fixed_container {padding-top:1%; padding-left:3%; color:#333;}
.fixed_container p {font-size:20px; padding:1%;}
.fixed_container img {width:30%; 
position: absolute; left:35%; top:32%; }

.sticky_container {width:100vw; height:400vh;
background-color:white;
position:absolute; top:99vh; z-index:10;} 
/* top = distamce from TOP where page starts */
.sticky_container p {position: sticky; top:22vh; font-size:20px; color:#333; 
padding-top:1%; padding-left:2%; padding-right:2%; }


.sticky_container2 {width:100vw; height:200vh;
background-color:white;
position:absolute; top:199vh; z-index:20;} 
/* top = distamce from TOP where page starts */
.sticky_container2 p {position: sticky; top:22vh; font-size:20px; color:#333; 
padding-top:1%; padding-left:2%; padding-right:2%;}


.sticky_container3 {width:100vw; height:400vh;
background-color:white;
position:absolute; top:299vh; z-index:30;} 
/* top = distamce from TOP where page starts */
.sticky_container3 p {position: sticky; top:22vh; font-size:20px; color:#333; 
padding-top:1%; padding-left:2%; padding-right:2%;}


.sticky_container4 {width:100vw; height:400vh;
background-color:white;
position:absolute; top:399vh; z-index:40;} 
/* top = distamce from TOP where page starts */
.sticky_container4 p {position: sticky; top:22vh; font-size:20px; color:#333; 
padding-top:1%; padding-left:2%; padding-right:2%;}


.sticky_container5 {width:100vw; height:400vh;
background-color:white;
position:absolute; top:499vh; z-index:50;} 
/* top = distamce from TOP where page starts */
.sticky_container5 p {position: sticky; top:22vh; font-size:20px; color:#333; 
padding-top:1%; padding-left:2%; padding-right:2%;}


.sticky_container6 {width:100vw; height:400vh;
background-color:white;
position:absolute; top:599vh; z-index:60;} 
/* top = distamce from TOP where page starts */
.sticky_container6 p {position: sticky; top:22vh; font-size:20px; color:#333; 
padding-top:1%; padding-left:2%; padding-right:2%;}


.sticky_container7 {width:100vw; height:400vh;
background-color:white;
position:absolute; top:699vh; z-index:60;} 
/* top = distamce from TOP where page starts */
.sticky_container7 p {position: sticky; top:22vh; font-size:20px; color:#333; 
padding-top:1%; padding-left:2%; padding-right:2%;}


.footer {width:100vw; height:3vh; background-color: #333;
position:fixed; bottom:1px; z-index: 99;
display: flex; justify-content: center; text-align: center; align-items: center;}
.footer p {font-size:14px; color:#999; padding:1%; }
.footer a {font-size: 12px; color:lightskyblue; position:absolute; right:10px;}