* {
    margin: 0;
}

/* Defines variables */
:root {
    --light: rgb(225, 225, 225);
    --tab-height: 53px;
    --slide-in-time: cubic-bezier(0.095, 0.675, 0, 1);
    --slide-out-time: cubic-bezier(1, 0, 0.905, 0.325);
}

body {
    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background-color: rgb(27, 27, 27);
}

/* Moves the pages and editor to the left */
#left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    max-width: 360px;
    height: 100vh;

    background-color: rgb(40, 40, 40);

    border-right-style: solid;
    border-right-color: rgb(40, 40, 40);
    border-right-width: 4px;
}

#tab-control {
    position: relative;
    margin: calc(var(--tab-height) - 30px) 25%;

    width: calc(50%);
}
#tab-control button {
    position: absolute;

    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--light);

    border-style: none;
    background-color: transparent;

    transform: translate(-50%, 0); /* Center */

    /* How the text should change when hovered */
    transition-property: filter, transform font-weight;
    transition-duration: 0.05s;
}
#tab-control button:hover {
    cursor: pointer;
}
/* Placement */
#about-button {
    left: 0%;
}
#tutorial-button {
    left: 50%;
}
#edit-button {
    left: 100%;
}
/* Brighten */
#tab-control button:hover {
    filter: brightness(110%);
}

/* Positions and sizes the highlights on the tabs that show when hovered */
.hint {
    position: absolute;
    top: var(--tab-height);
    height: 2px;

    border-radius: 5px;

    transition: background-color;
    transition-duration: 0.2s;
}
#about-hint {
    left: calc((100% - (50% + 55px)) / 2 - 6px);
    width: 66px;
}
#tutorial-hint {
    left: calc((100% - 77px) / 2);
    width: 77px;
}
#edit-hint {
    left: calc(100% - (50% + 55px) / 2 + 7px);
    width: 41px;
}

#bottom-line {
    position: absolute;
    left: calc((100% - (50% + 55px)) / 2 - 6px);
    top: var(--tab-height);

    width: calc(50% + 55px);
    height: 2px;

    border-radius: 5px;
    background-color: rgb(60, 60, 60);
}

/* The bright highlight that shows what's selected */
#highlight-line {
    position: absolute;
    top: var(--tab-height);
    height: 2px;

    border-radius: 5px;
    background-color: var(--light);

    transition-property: left, width;
    transition-duration: 0.2s;
}
/* Where to be positioned based on what page is selected */
#highlight-line[data-selected='about'] {
    left: calc((100% - (50% + 55px)) / 2 - 6px);
    width: 66px;
}
#highlight-line[data-selected='tutorial'] {
    left: calc((100% - 77px) / 2);
    width: 77px;
}
#highlight-line[data-selected='edit'] {
    left: calc(100% - (50% + 55px) / 2 + 7px);
    width: 41px;
}



/* Move simulation to the right side */
#right {
    position: absolute;
    top: 0;
    left: 360px;
    width: calc(100% - 360px);
    min-width: 50vw;
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#copyright {
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: max-content;
    transform: translate(-50%, 0);

    color: rgb(100, 100, 100);

    font-family: 'Noto Sans', sans-serif;

    user-select: none;
}
#copyright img {
    position: relative;
    height: 1em;
    margin: 0 1px;
    left: 4px;
    top: 3px;

    filter: brightness(0.392);
}


#contact {
    position: absolute;
    left: 50%;
    bottom: calc(10px + 1em);
    width: max-content;
    transform: translate(-50%, 0);

    color: rgb(100, 100, 100);

    font-family: 'Noto Sans', sans-serif;

    user-select: none;
}

/* The right side will expand if the screen is large enough */
@media (width <= 720px) {
    #right {
        left: 50vw;
        width: 50vw;
    }
}

#gl-canvas {
    background-color: black;

    border-radius: 15px;
    width: 35vw;
}
#overlay, #particles {
    position: absolute;
    pointer-events: none;

    border-radius: 15px;
    width: 35vw;
}

#sim-container {
    /*
    Needs to be relative to make a new stacking context for
    the absolutely positioned child elements to overlap
    */
    position: relative;
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    top: -20px;
}

#button-container {
    /*
    Needs to be relative to make a new stacking context for
    the absolutely positioned child elements to overlap
    */
    position: relative;

    margin-bottom: 15px;
    padding: 5px 20px;

    border-style: solid;
    border-radius: 50px;
    border-width: 2px;
    border-color: rgb(40, 40, 40);

    cursor: default;
    user-select: none;

    top: -20px;
}

.sim-button {
    vertical-align: top;
    margin: 5px 10px;

    width: 25px;
    height: 25px;
}
/* The icons are slightly different sizes normally
so they get scaled to look better */
#pause {
    transform: scale(1.5);
}
#halt {
    transform: scale(1.2);
}
/* Brightness means selected */
.sim-button[data-status='selected'] {
    filter: brightness(50%);
}
.sim-button[data-status='none']:hover {
    cursor: pointer;
}

/* The small gray lines separating the buttons */
.separator {
    margin-top: 5px;
    width: 1.5px;
    height: 25px;

    background-color: rgb(40, 40, 40);

    pointer-events: none;
    display: inline-block;
}

#size-alert-container {
    position: absolute;
    width: 100vw;
    height: 100vh;

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

    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.1s;

    pointer-events: none;

    z-index: 10;

    background-color: rgba(10, 10, 10, 0.3);
    backdrop-filter: blur(3px);
}
#size-alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--light);
    font-family: 'Noto Sans', sans-serif;

    border-radius: 10px;

    width: 80%;
    height: fit-content;
    padding: 10px;
    background-color: rgb(60, 60, 60, 0.8);

    backdrop-filter: blur(10px);
}
#size-alert * {
    text-align: center;
}



/* For .info class */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translate(0, 30px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes slide-out {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: translate(0, 30px);
    }
}
/* For lines underneath fancy buttons */
@keyframes grow {
    from {
        left: 50%;
        width: 0%;
    }

    to {
        left: 2%;
        width: 96%;
    }
}
@keyframes grow-small {
    from {
        left: 50%;
        width: 0%;
    }

    to {
        left: 7%;
        width: 86%;
    }
}
@keyframes fade {
    from {
        left: 2%;
        width: 96%;
        opacity: 1;
    }
    
    to {
        left: 2%;
        width: 96%;
        opacity: 0;
    }
}
@keyframes fade-small {
    from {
        left: 7%;
        width: 86%;
        opacity: 1;
    }
    
    to {
        left: 7%;
        width: 86%;
        opacity: 0;
    }
}

#page-container {
    position: absolute;
    display: flex;
    justify-content: center;

    top: calc(var(--tab-height) + 30px);
    width: 100%;
    height: calc(100% - var(--tab-height) - 30px);

    font-family: 'Noto Sans', sans-serif;
    color: var(--light);

    overflow: auto;
}
#about-container, #tutorial-container, #edit-container {
    position: relative;
    width: calc(100% - 40px);
    max-width: 300px;
    height: calc(100% - 20px);

    anchor-name: --tab-line;
}
#tab-line {
    position: fixed;
    position-anchor: --tab-line;

    left: 20px;
    width: calc(50vw - 40px);
    max-width: 320px;
    height: 2px;

    background-color: rgb(60, 60, 60);

    z-index: 3;
}
.shadow-line {
    position: sticky;

    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    
    box-shadow: 0 3px 15px 2px rgb(0, 0, 0);

    z-index: 2;
}
.info {
    position: relative;

    border-radius: 10px;
    margin-top: 16px;
    padding: 14px 20px 12px 20px;

    background-color: rgb(60, 60, 60);

    animation: slide-in 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.info:first-child {
    margin-top: 20px; /* Make a small margin between shadow line and first box */
}
.info-overlay {
    position: absolute;
    top: 0;
    left: 0;

    border-radius: 10px;

    background-color: rgb(60, 60, 60);
    opacity: 0;

    transition: opacity;
    transition-duration: 0.2s;

    pointer-events: none;
}
/* The little space at the end of a page */
.padding {
    height: 13px;
}
select, ::picker(select) {
    appearance: base-select;
}

.title {
    width: 100%;
    text-align: center;
}
#about-container .info p, #tutorial-container .info p {
    text-indent: 1em;
}
/* Makes the text gradient */
#about-container .info strong, #tutorial-container .info strong:not(.normal) {
    background-image: linear-gradient(0.25turn, #d25050 0, var(--light) 130%);
    color: transparent;
    background-clip: text;
}
/* Undoes styles */
#about-container .info span, #tutorial-container .info span {
    font-weight: 400;
    color: var(--light);
}

#get-started-button:hover {
    cursor: pointer;
}

/* Make sure the parts of the button stay together */
#get-started, #to-edit {
    anchor-name: --get-started;
    text-align: center;
}
#to-edit-first {
    anchor-name: --to-edit;
    text-align: center;
}
#get-started-button:hover, #to-edit-button:hover, #to-edit-button-first:hover {
    cursor: pointer;
}
.underline {
    position-anchor: --get-started;

    animation-duration: 0.2s;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-fill-mode: both;

    position: relative;
    width: 0;
    height: 1.5px;
    background-image: linear-gradient(0.25turn, #d25050 0, var(--light) 130%); /* Creates gradient */

    border-radius: 5px;

    animation-name: fade-small;
    opacity: 0;
}
/* Fade in by default */
#get-started + .underline {
    animation-name: fade;
    height: 2px;
}
/* Grow when hovered */
#get-started-button:hover > .underline {
    animation-duration: 0.7s;
    opacity: 1;
    animation-name: grow;
}
#to-edit-button:hover > .underline, #to-edit-button-first:hover > .underline {
    animation-duration: 0.7s;
    opacity: 1;
    animation-name: grow-small;
}


/* Tutorial */
#tutorial-container img {
    position: relative;
    border-radius: 10px;
    border-style: solid;
    border-color: rgb(120, 120, 120);
    border-width: 2px;

    margin-top: 10px;

    width: 80%;
    left: 10%;

}
/* Mini eraser icon */
#mini-erase {
    transform: translate(-26.5px, 2px);
    left: -100px;
    width: 1em !important;
    height: 1em;

    border-style: none !important;

    filter: grayscale(100%) brightness(600%);

    cursor: text;
}



#particle-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#particle-button-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#add-button {
    position: relative;
    margin-top: 5px;
    left: 9px;

    background-color: #5aac41;
}
#delete-button {
    position: relative;
    left: 9px;
    margin-bottom: 6px;
    
    background-color: #d25050;
    filter: grayscale(100%);
}

#preset {
    width: 100%;
    background-color: rgb(60, 60, 60);
    color: var(--light);
    font-family: 'Noto Sans', sans-serif;
    margin: 6px 0 3px 0;

    border-width: 2px;
    border-color: rgb(var(--light));

    outline: 0 !important;

    cursor: pointer;
}
#preset option {
    background-color: rgb(60, 60, 60);
    font-family: 'Noto Sans', sans-serif;
    color: var(--light);
}
#preset option:hover, #preset option:focus {
    background: rgb(100, 100, 100);
}
input[type='range'] {
    position: relative;
    top: 4px;

    cursor: pointer;

    accent-color: #d25050;
}

.button {
    width: 40px;
    height: 40px;
    padding: 0;
    margin-right: 8px;

    border-radius: 7px;
    border-style: none;

    transition: transform;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
}
/* What to do while no particle is selected */
.button:hover:not([data-disabled='true']) {
    transform: scale(1.1);
    cursor: pointer;
}
.button[data-disabled='true'] {
    filter: brightness(85%);
}
.button img {
    /* Some icons are dark blue at first but they should be white. This is a hacky fix */
    filter: grayscale(100%) brightness(600%);

    width: 40px;
    height: 40px;
}
#clear-button {
    position: absolute;
    right: 0;

    margin-right: 18px;
    
    background-color: #d25050;
}
#trash-icon, #delete-icon, #add-icon, #erase-icon {
    transform: scale(0.85);
    margin: 0;
}

#undo-button, #redo-button, #erase-button {
    background-color: rgb(100, 100, 100);
}
#undo-icon, #redo-icon {
    transform: translate(0, 2px) scale(0.85);
}
#undo-button, #redo-button {
    margin-right: 5px;
}

#erase-button {
    transition: transform, background-color;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
}
#erase-icon {
    transform: translate(-1px, 0.5px) scale(0.8);
}

#preset-alert-container {
    position: absolute;
    width: 100vw;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.1s;

    pointer-events: none;

    z-index: 10;

    background-color: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(3px);
}
#preset-alert {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--light);
    font-family: 'Noto Sans', sans-serif;

    border-radius: 10px;
    
    width: 210px;
    height: fit-content;
    padding: 10px;
    background-color: rgb(60, 60, 60);

    box-shadow: 0 5px 5px 2px rgb(27, 27, 27);
}
/* Preset alert needs to stay centered within the left column */
@media (width >= 720px) {
    #preset-alert {
        left: 75px;
    }
}
@media (width < 720px) {
    #preset-alert {
        left: calc(25% - 105px);
    }
}
#preset-button-container {
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    margin: 10px 0 4px 0;
}
#preset-button-container .button {
    height: 35px;
    margin: 0 14px;
    width: 70px;

    font-size: 15px;
    color: var(--light);
}
#change-button {
    background-color: #d25050;
}
#cancel-button {
    background-color: rgb(100, 100, 100);
}
#preset-alert * {
    text-align: center;
}