/* 

lettuce uhhh get this toast, as it were

*/

/* -- ▼ VARIABLES (DEFAULT) ▼ --> */

:root {
    /* colors */
    
    --bg: #eeeeee;
    --post: #171717;
    --altpost: #f5f5f5;
    --border: #69c5c5;

    --hotpink: #db3977;
    --dyellow: #f99d13;
    --secondary: #f777a8;
    --secondary_muted: #f14c8ba5;
    --dusky: #e28ab0;
    --teal: #00b7bb;
    --yellow: #ffbb54;
    --pink:  #f16b8e;
    --bgrey: #8EB3C9;

    /* icon variables */
    --icon-rounding: 999px;
    --icon-size: 4.688rem;  

    /* fonts */
    /* other sans-serif suggestions: 
        DM Sans, Inter, Karla, Nunito, 
        Rubik, Public Sans, Lexend, etc.
    */

    --header-font: "Georgia", "Times New Roman", "serif";
    --body-font: "Arial", "Helvetica", "sans-serif";

  }
  


  html{
    font-size: 0.88rem;
    position: relative;
    min-height:100%;
    scrollbar-color: var(--pink) var(--bg);
    overflow-x: hidden;
}

/* - scrollbar - */
::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-track {
    background:var(--bg);
  }
::-webkit-scrollbar-thumb {
    background: var(--pink);
}
/* - end scrollbar - */
  
    
/* - selection - */

/* for Firefox */
::-moz-selection {
    background: var(--dusky);
    color: var(--post);
}

::selection {
    background: var(--dusky);
    color: var(--post);
}

/* - end selection - */


body {
    background-color: var(--bg);
    color: var(--post);
    font-family: var(--body-font);
    font-size: 1rem;
    text-align: justify;
    line-height: 2;
    height:100%;
  }

  @counter-style sparkle {
    system: cyclic;
    symbols: "✦";
    suffix: " ";
  }
  ul {
    list-style: sparkle;
  }
  
#container{
    max-width: 600px;
    /* this is the width of your layout! 
    when changing the above value, scroll to the bottom
      and change the media query according to the comment! */
    margin: 0 auto;
    /* this centers the entire page */
    display: flex;
    gap:1rem;
    flex-wrap:wrap;
}
/* container wraps  entire website
if you want something (like the header) to be wider than
    the other elements, you will need to move that div outside
    of the container */

#contents{
    height: auto;
    width: 100%;
    margin: 30px 0 auto;
    }
    

/* - link style - */
/* the area below is for all links on your page
    EXCEPT for the navigation */
#container a {
        color: var(--dyellow);
        font-weight: bold;
}

#container a:hover {
    color: var(--teal);
    text-decoration: none;
    /* text-decoration:none;
    removes link underline */
        }

#container a {
    text-decoration:none;
    outline:none;
    }

#container a img{
    border-style:none;
}

/* - end link style - */


/* header */
#header {
    width: 100%;
    background-color:rgba(239, 239, 239, 0.8);
    z-index:20;

    /* header color here! */
    /* this is only for a background image! */
    height: 150px;
    background-image: var(--header-image);
    background-size: 100%;

    /* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
}


#topBar {
    width: 100%;
    height: 20px;
    padding: 10px 10px 10px 0px;
    font-size: smaller;
    background-color:rgba(239, 239, 239, 0.8);
    }
#topBar a{text-decoration: none;color: inherit;}

/* menu */
 #navbar {
    height:auto;
    background-color:var(--hotpink);
    /* navbar color */
    max-width: 100%;
    position:absolute;
    left:0px;
    right:0px;
    padding-left: 20px;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    flex-flow: row wrap;
    /* This aligns items to the end line on main-axis */
    gap:20px;
}

#navbar li{
    color: var(--altpost);
    display:flex;
    position:relative;
    height:2rem;
    line-height:2rem;
    }

 /* menu links */
#navbar li a{
    color: var(--altpost);
    /* navbar text color */
    text-decoration:none;
    /* this removes the underline */
    }

/* menu links hover */
#navbar li a:hover{
    color:var(--bg);
    background:var(--pink);
    }



/* dropdown button */
.dropbtn {
    background-color: var(--hotpink);
    color: var(--bg);
	border: none;
	cursor: pointer;
}

/* dropdown content position */
.dropdown {
	position: relative;
	display: inline-block;
}

/* dropdown content (hidden) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: var(--hotpink);
	min-width: 100%;
	overflow: auto;
    box-shadow: 0px 6px 8px 0px rgba(255, 92, 141, 0.762);
	z-index: 1;
}

/* dropdown links */
.dropdown-content a {
	padding: 12px 12px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {background-color:var(--dusky)}

/* hover reveals dropdown menu */
.dropdown:hover .dropdown-content {
	display: block;
}



/* footer */
footer{
    /*background:rgba(231, 231, 231, 0.8);
     background color for footer */
    height:20px;
    width:100%;
    padding:5px;
    text-align:center;
/* this centers the footer text */
    font-size: 0.78rem;
    border-radius:8rem;
    color: var(--primary);
    letter-spacing: 0.08rem;
}

/* footer link */
footer a{
    border-radius: 9rem;
    color:var(--post);
    /*background:var(--yellow);*/
    display:inline-block;
    margin:0.69rem;
    padding:0.4rem;
    }

/* end footer */


    /* lines and text stuff */
/* headings */
p.lv{
    /* used with <div id="lv"> */    
    color:var(--hotpink);
    font-size:1.2rem;
    margin: 0 0.2rem 0;
    font-weight:800;
    }
    p.lv::first-letter{
        color: var(--bg);
        background-color: var(--hotpink);
        padding: 0 3px;
        }

h1{
    color:var(--pink);
    font-size:1.5rem;
    margin: 1rem 2rem 0;
    font-weight:800;
    }

h2{
    color: var(--post);
    font-size:1.3rem;
    font-weight: 800;
    font-family: helvetica, sans-serif;
    margin:20px 0;
    }
/*
        h2:first-letter{
        font-size:1.33rem;
        color: var(--bg);
        background-color: var(--hotpink);
        padding: 0 5px;
        }
*/
 h3{
    color:var(--pink);
    font-size:1.25rem;
    margin:20px 0;
    }
h4{
    color: var(--teal);
    font-size:1.2rem;
    font-family: Arial, sans-serif;
    margin:20px 0;
    }
/*
        h4:first-letter{
        color:var(--bg);
        background-color: var(--teal);
        font-size:1.22rem;
        padding: 0 3px;
        }
*/

h5{
    color:var(--dyellow);
    font-size:1.1rem;
    font-family: Arial, sans-serif;
    margin:20px 0;
    }
        h5:first-letter{
        font-size:1.11rem;
        }
h6{
    color:var(--post);
    font-size:1.06rem;
    font-family: Arial, sans-serif;
    margin:20px 0;
    }
/*        h6:first-letter{
        color:var(--bg);
        background-color: var(--dyellow);
        font-size:1.01rem;
        }
*/

strong {
    /* this styles bold text */
    color:var(--teal);
}

em {
    /* this styles italic text */
    color: var(--post);
    background:var(--yellow); /* Ie9 */
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(33,33,33,0)), color-stop(0.19,  rgba(33,33,33,0)), color-stop(0.2, var(--yellow)), color-stop(1, var(--yellow)));
    background: -webkit-linear-gradient(transparent 80%, var(--yellow) 0%);
    background:linear-gradient(transparent 80%, var(--yellow) 0%);
    font-weight:400;
    }

blockquote {
     padding: 1.25rem;
       /* background: var(--bg);*/
    max-width: 25rem;
    border: 0.39rem solid var(--border);
    margin: 0.625rem auto;
}
    
/* this is just a cool box */
.box {
    background-color: var(--border);
    border: 1px solid var(--dusky);
    padding: 10px;
}

dt{
    color:var(--teal);
    font-weight:700;
    float:left;
    clear:both;
    margin:0 0 0.4rem;
    width:12rem;
    }
dd{
    border-bottom:1px solid;
    border-bottom:1px dotted var(--yellow);
    margin:0 0 .25rem 13rem;
    font-weight:600;
    }

hr{
    display:block;
    border:0;  
    border-top:1px solid var(--hotpink);
    margin:3rem 0;
    padding:0;
    height:1rem;
    }

.marker{
/* used with <span class="marker"> */
    background: var(--pink);
    color: var(--bg);
    padding:1px 5px
    }
    
.dcline{
/* used with <div class="dcline"> */
    border-left:0.25rem solid var(--secondary);
    margin:1.5rem 0;
    padding:0rem 1rem;
    }

.textbox{
/* used with <div class="textbox"> */
    background:var(--primary);
    border-radius:5px;
    color:var(--border);
    margin:10px 0;
    padding:3px;
    text-align:center
    }

.title{
/* used with <div class="title"> */
    color:var(--bgrey);
    font-size:1.8em;
    font-weight:600;
    font-family: var(--header-font);
    font-variant-caps:all-small-caps;
    margin:2rem;
    text-align:center;
    }

.txt{
/* used with <div class="txt"> hehe */
    border-left:1px dotted var(--bgrey);
    color:var(--bgrey);
    margin:1rem;
    padding:0 0 0 1rem
    }

.frame{
    border:106px solid var(--bgrey);
    border-radius:5px
    }

/*  MEDIA QUERY */
    /* to change page width and keep responsiveness,
    subtract 100 from the main page width in px.
    this new number is the "max-width" value below.
    */

/* for 500px screens */
@media screen and (max-width: 500px){
body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:1rem;
    text-align: justify;
    margin: 10px,15px,10px,15px;
    padding: 10px 0;
}

header{
position:absolute;
min-width:100%;
left:0;
right:0;
top:0;
}

h1{
min-height: 40px;
padding-right:60px;
text-align:left
}

#contents{
height:auto;
width:100%;
}

#contents a{
color:var(--hotpink);
font-weight: 700;
}

#contents a img{
vertical-align:bottom
}

footer{
padding: 20px;
position:relative
}

#footer-inner{
width:100%
}

input,textarea{width:90%}

dt{float:none;
    clear:none;
    width:auto;
    }

dd{margin-left:20px}

img{
    max-width:100%;
    height:auto
    }

/* 500px menu */

 /* menu */
 #navbar{
    background:var(--hotpink);
    position:relative;
    bottom:0;
    right:0;
    justify-content: space-evenly;
    max-width:100%;
    }
#navbar li{
    display:inline-block;
    position:relative;
    padding:0, 2px;
    height:2rem;
    line-height:2rem;
    }
    #navbar li:hover{
        color:var(--bg);
        background:var(--hotpink);
        }

#navbar li a{
    color: var(--bg);
    display:inline-block;
    padding:0 10px;
    text-decoration:none;
    }
    #navbar li a:hover{
        color:var(--hotpink);
        background:var(--bg);
        }
        
/* dropdown button */
.dropbtn {
    background-color: var(--hotpink);
    color: var(--bg);
	border: none;
	cursor: pointer;
}

}

@media screen and (max-width: 350px){

    #container{
        margin-top: 50px;
    }
}