/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End of reset */




:root {  /* setting custom variables for easy uniform colors and fonts, and for easy changing through javascript */
    --white: #FFFFFF;
    --black: #000000;
    --gray1: #F8F8F8;
    --gray2: #E0E0E0;
    --gray3: #C0C0C0;
    --gray4: #999999;
    --gray5: #666666;
    --gray6: #333333;
    --gray7: #111111;

    --red1: #FF0000;
    --red2: #FF6347;
    --red3: #B22222;
    --red4: #8B0000;

    --orange1: #FFA500;
    --orange2: #FF8C00;
    --orange3: #FF7F50;

    --yellow1: #FFFF00;
    --yellow2: #FFD700;
    --yellow3: #F0E68C;

    --green1: #90EE90;
    --green2: #32CD32;
    --green3: #008000;
    --green4: #006400;
    --lime: #00FF00;
    --olive: #808000;

    --blue1: #ADD8E6;
    --blue2: #87CEEB;
    --blue3: #1E90FF;
    --blue4: #007BFF;
    --blue5: #00008B;
    --cyan: #00FFFF;
    --teal: #008080;

    --purple1: #800080;
    --purple2: #8A2BE2;
    --purple3: #9370DB;
    --violet: #EE82EE;

    --pink1: #FF69B4;
    --pink2: #FF1493;
    --pink3: #FFC0CB;

    --brown1: #D2B48C;
    --brown2: #A0522D;
    --brown3: #5C4033;
    --beige: #F5F5DC;

    --magenta: #FF00FF;
    --indigo: #4B0082;
    --navy: #000080;
    --maroon: #800000;
    --coral: #FF7F50;
    --salmon: #FA8072;
    --khaki: #F0E68C;
    --mint: #98FF98;
    --turquoise: #40E0D0;
    --gold: #FFD700;
    --silver: #C0C0C0;
    --bronze: #CD7F32;
    --rust: #B7410E;
    --cream: #FFFDD0;
    --apricot: #FBCEB1;
    --lavender: #E6E6FA;
    --plum: #DDA0DD;
    --orchid: #DA70D6;


    --primary-font: Arial, sans-serif;
    --secondary-font: Helvetica, sans-serif;

    --topBarHeight: 100px
}


body { 
    width: auto;
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    text-align:center;
}

.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.hidden{
    display:none !important;
}

#topBar{
    display: flex;
    flex-direction: row;
    background-color: #1E90FF;
    border-bottom: 3px solid var(--black);
    height: var(--topBarHeight);
}

#siteTitle{
    font-size: 4rem;
    color:var(--black);
    padding-top:20px;
    padding-left: 1%;
    font-weight: 900;
    min-width: 350px;
    width: 500px;
}

#navigation{
    align-self:flex-end;
}

#navigation ul{
    display: flex;
    flex-direction: row;
    gap: 10vw;
}
#navigation ul li{
    text-align: center;
}


#navigation ul a{
    display: flex;
    font-size: 1.5rem;
    font-weight: bold;
    width: 200px;
    height: 30px;
    background-color: var(--white);
    border: 3px solid var(--black);
    text-decoration: none;
    color: var(--black);
    justify-content: center; 
    align-items: flex-end;  
    margin-bottom: -3px;
}
#navigation ul .active{
    border-bottom: 0px solid;
    
    transform: translateY(3px);
}

@media screen and (max-width: 1250px) and (min-width:1000px){
    #navigation ul {
        gap: calc((81vw - 800px) /  1.6);
    }
    #siteTitle{
        width:370px;
    }
}
@media screen and (max-width: 1000px) {
    
    #topBar{
        flex-direction: column;
    }
    #siteTitle{
        font-size: 3rem;
        padding-top: 5px;
        height: 70px;
        align-self: center;
    }
    #navigation ul {
        gap: calc((109.2vw - 680px) /  2.18);
    }
    #navigation ul a{
        width: 130px;
    }
    #navigation ul .active{
        transform: translateY(3px);
    }

}
@media screen and (max-width: 625px) {
    #navigation ul a{
        width: 90px;
        font-size: 1rem;
        height: 21px;
        margin-top: 3px;
        
        transform: translateY(.5px);
    }
    #navigation ul .active{
        transform: translateY(3.2px);
    }
    #navigation ul {
        gap: calc((130vw - 670px) /  2.28);
    }

}





/* #region Summary */

#summaryHeader{
    width:60%;
    margin:auto;
    padding:2rem;
}

#summaryHeader h2{
    font-size:2.5rem;
    font-weight: bold;
}

#summaryHeader p{
    font-size:1.2rem;
}



/* Purpose Section */

#purpose{
    width:60%;
    margin:auto;
    padding:2rem;
}

#purpose h3{
    font-size:2.5rem;
    font-weight: bold;
}

#purpose p{
    font-size:1.2rem;
}



/* Author Section */

#author{
    width:60%;
    margin:auto;
    padding:2rem;
}

#author h3{
    font-size:2.5rem;
    font-weight: bold;
}

#author p{
    font-size:1.2rem;
}

#author img{
    width:200px;
    margin:1rem auto;
    display:block;
}



/* Footer Layout */

#footer{
    padding:2rem;
    background-color: var(--blue3);
}



/* Footer Navigation */

#footerNav{
    display:flex;
    justify-content:center;
    gap:2rem;
    margin-bottom:1rem;
}



/* Footer Buttons */

#footerNav a{
    display:flex;
    justify-content:center;
    align-items:center;
    color: var(--black);
    background-color: var(--white);

    width:150px;
    height:40px;

    font-size:1.1rem;
    text-decoration:none;

    border:3px solid black;
}



/* Active Button */

#footerNav a.active{
    border:5px solid var(--black);
    font-weight: bold;
}



/* Footer Text */

#footer p{
    text-align:center;
    font-size:1rem;
    color: var(--white);
}

/* #endregion */




/* #region Dashboard */

#fullDashboard {
    display: flex;
    flex-direction: row; 
    height: calc(100vh - var(--topBarHeight) - 8px);
}
#dashboardSidebar {
    width: 200px;
    border: 3px solid black;
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem;
}
#dashboard {
    flex-grow: 1;
    border: 2px solid #ccc;
    min-height: 99.8%;
}




#bgColor{
    display:none;
}

#bgColorButton{
    display:flex;
    align-items:center;
    gap:10px;
}

#colorPreview{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid black;
    background:#ffffff;
}


#modeDisplay {
    font-weight: bold;
    text-align: center;
    margin: 0.5rem 0;
}

.overDashboard{
    position: absolute;
    z-index: 1000; /* high number, sits above most elements */
}

#fullScreenControls{
    bottom: 1rem;
    right: 1rem;
}


button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}







/* #region Icon Popup */

/* Modal layout (true centered single column) */
#iconModal {
    display: flex;
    flex-direction: column;
    align-items: center; /* center EVERYTHING */
    gap: 1rem;
    width: 500px;
    max-width: 90vw;
}

/* Keep content readable (not stretched full width) */
#iconBuilder,
#iconSharedFields {
    width: 100%;
    max-width: 320px;
}

/* Title centered */
#iconModalTitle {
    text-align: center;
    margin: 0;
}

/* Type switch centered */
#iconTypeSwitch {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

/* Preview centered */
#iconPreviewPanel {
    display: flex;
    justify-content: center;
}
#iconPreviewImage {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* Preview box */
#iconPreviewBox {
    width: 100px;
    height: 100px;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Controls stacked */
#shapeControls,
#imageControls,
#iconSharedFields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Labels */
#iconModal label {
    font-weight: bold;
}

/* Inputs */
#iconModal input,
#iconModal select {
    width: 100%;
    padding: 4px 6px;
}

/* Color row */
.colorPickerRow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Color preview */
.colorPreview {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid black;
}

/* Buttons centered */
#iconModalActions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* #endregion */







/* #region Icons */
a {
    text-decoration: none;
    color: inherit;
}
#iconModalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

#iconModal {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    width: 500px;
    max-width: 90%;
}

/* Wrapper for each icon */
.iconWrapper {
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem;
    cursor: pointer;
    transform: scale(1.5);
    transform-origin: top left;
}

.iconLink {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

#dashboard.deleteMode .iconWrapper:hover {
    filter: drop-shadow(0 0 8px red);
}

#dashboard.deleteMode .iconWrapper {
    cursor: url('images/smallRedX.png') 15 12, auto;
}




.colorPickerRow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.colorPreview {
    width: 22px;
    height: 22px;
    border: 2px solid black;
    border-radius: 50%;
    display: inline-block;
}

#shapeColor,
#textColor {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* Shape/image visual alignment */
.iconShape,
.iconImage {
    display: block;
    margin: 0 auto;
    flex-shrink: 0;
}

.iconImage {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
}

/* #region class shapes */

.iconShape {
    position: relative;
    width: 60px;
    height: 60px;
}

/* Triangle Up */
.iconShape.triangle-up {
    width: 54px;
    height: 54px;
    background-color: #3498db;
    clip-path: polygon(50% 8%, 8% 92%, 92% 92%);
}

/* Triangle Down */
.iconShape.triangle-down {
    width: 54px;
    height: 54px;
    background-color: #e74c3c;
    clip-path: polygon(8% 8%, 92% 8%, 50% 92%);
}

/* Triangle Left */
.iconShape.triangle-left {
    width: 54px;
    height: 54px;
    background-color: #2ecc71;
    clip-path: polygon(8% 50%, 92% 8%, 92% 92%);
}

/* Triangle Right */
.iconShape.triangle-right {
    width: 54px;
    height: 54px;
    background-color: #f1c40f;
    clip-path: polygon(8% 8%, 92% 50%, 8% 92%);
}

/* Square */
.iconShape.square {
    width: 50px;
    height: 50px;
    background-color: #00FF00;
}

/* Diamond */
.iconShape.diamond {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    clip-path: polygon(50% 8%, 92% 50%, 50% 92%, 8% 50%);
}

/* Rectangle */
.iconShape.rectangle {
    width: 54px;
    height: 40px;
    background-color: #9b59b6;
}

/* Circle */
.iconShape.circle {
    width: 50px;
    height: 50px;
    background-color: #e67e22;
    border-radius: 50%;
}

/* Oval */
.iconShape.oval {
    width: 54px;
    height: 40px;
    background-color: #1abc9c;
    border-radius: 50%;
}

/* Star */
.iconShape.star {
    width: 54px;
    height: 54px;
    background-color: gold;
    clip-path: polygon(
        50% 4%,
        61% 35%,
        94% 35%,
        68% 55%,
        78% 88%,
        50% 68%,
        22% 88%,
        32% 55%,
        6% 35%,
        39% 35%
    );
}

/* Hexagon */
.iconShape.hexagon {
    width: 54px;
    height: 50px;
    background-color: #e74c3c;
    clip-path: polygon(
        25% 6%,
        75% 6%,
        94% 50%,
        75% 94%,
        25% 94%,
        6% 50%
    );
}

/* Plus */
.iconShape.plus {
    width: 50px;
    height: 50px;
    background-color: #2c3e50;
    clip-path: polygon(
        35% 0%,
        65% 0%,
        65% 35%,
        100% 35%,
        100% 65%,
        65% 65%,
        65% 100%,
        35% 100%,
        35% 65%,
        0% 65%,
        0% 35%,
        35% 35%
    );
}

/* X */
.iconShape.x {
    width: 50px;
    height: 50px;
    background-color: red;
    clip-path: polygon(
        20% 0%,
        50% 30%,
        80% 0%,
        100% 20%,
        70% 50%,
        100% 80%,
        80% 100%,
        50% 70%,
        20% 100%,
        0% 80%,
        30% 50%,
        0% 20%
    );
}

/* #endregion */

/* Label under icon */

.iconWrapper,
.iconLink {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iconWrapper p,
.iconLink p {

    margin-top: 0.1rem;
    font-size: 0.8rem;
    text-align: center;
    white-space: normal;
    
    line-height: 1.2;
    padding-bottom: 2px;
}

/* #endregion */


#fullscreenBtn{
    width: 120px;
    height: 60px;
    font-size: 1rem;

}
.fullScreened{
    color: #006400;
    background-color: yellow;
}
.windowed{
    color: darkblue;
    background-color: #00FF00;
}


/*#endregion*/
/*#endregion*/





/*#region import/export*/

.overTopBar{
    position: absolute;
    z-index: 1000; /* high number, sits above most elements */
}

#externalButtons{
    Top: 0.5rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    column-gap: 10px;
}

.external{
    padding:3px;
    background-color: green;
    border-color: yellow;
    color: white;
}


/* overlay (background dim) */
#storageModalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 3000;
}

/* modal box */
#storageModal {
    background: white;
    padding: 1.25rem;
    border-radius: 12px;

    width: 400px;
    max-width: 90vw;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* title */
#storageModalTitle {
    text-align: center;
    margin: 0;
}

/* textarea (10 lines, scrollable) */
#storageTextArea {
    width: 100%;
    height: 15em;              /* ~10 lines */
    resize: none;

    padding: 6px;
    font-size: 0.9rem;

    color: #444;               /* slightly gray text */
    background: #f9f9f9;

    border: 2px solid #000;
    border-radius: 6px;

    overflow-y: auto;
    box-sizing: border-box;
}

/* buttons row */
#storageModalActions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* optional: make buttons same width */
#storageModalActions button {
    min-width: 120px;
    height: 30px;
}

#storageCancel{
    background-color: var(--blue4);
    color: var(--white);
}
#storageAction{
    background-color: var(--blue2);

}


/*#endregion*/





/*overlay to close the windowed sections*/
.overlay {
    position: fixed;
    inset: 0; /* full screen */
    background: rgba(0, 0, 0, 0.4);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 3000;
}