/* || SITEWIDE */
:root {
    --accent-color:#3f3c51;
    --accent-text-color:#bcffcc;
    --border:2px solid #66b08b;
    --radius:2px;
    --scale:1.1;
    --todo-background-image:url('../img/Polygon Luminary.svg');
    }
    
    * {
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif
    }
    
    .center {
    justify-content:center;
    align-items:center
    }
    
/* || ToDo PAGE */
    .todo-body {
    word-wrap:break-word;
    background-image:var(--todo-background-image);
    background-position-x:center;
    background-attachment:fixed;
    background-color:var(--accent-color)
    }
    
    .todo-nav {
    padding:15px;
    position:fixed;
    width:130px;
    z-index:1;
    color:var(--accent-color);
    background-color:var(--accent-text-color);
    text-align:right
    }
    
    .todo-link {
    color:var(--accent-color);
    text-decoration:none;
    font-size:large;
    font-weight:700
    }
    
    .todo-flex {
    display:flex;
    gap:20px;
    width:100%
    }
    
    .todo-container {
    flex-direction:column
    }
    
    .todo-h1 {
    margin-top:12vh;
    font-size:5em;
    margin-bottom:5vh;
    color:var(--accent-text-color)
    }
    
    .todo-input {
    height:45px;
    width:550px;
    border:var(--border);
    border-radius:3px;
    resize:none;
    font-size:1.5em;
    padding:7px
    }
    
    #todo-add-button,#todo-delete-all-button,.todo-delete-button {
    border:0;
    background-color:var(--accent-text-color);
    border-radius:5px;
    width:80px;
    height:45px;
    border:var(--border)
    }
    
    #todo-add-button:hover,#todo-delete-all-button:hover,.todo-delete-button:hover {
    scale:var(--scale);
    cursor:pointer
    }
    
    .check-box {
    height:45px;
    width:45px
    }
    
    .check-box:checked {
    accent-color:var(--accent-text-color)
    }
    
    .check-box:hover {
    scale:var(--scale);
    cursor:pointer
    }
    
    .todo-item {
    display:flex;
    gap:20px;
    justify-content:space-between;
    align-items:center;
    font-size:large;
    width:620px;
    border-radius:var(--radius)
    }
    
    .todo-text {
    width:500px;
    height:40px;
    resize:none;
    font-size:larger;
    padding:5px;
    border:var(--border);
    border-radius:var(--radius);
    line-height:25px;
    max-lines:1
    }
    
    @media only screen and (max-width: 800px) {
    .todo-input {
    width:80%;
    margin-top:60px
    }
    
    .todo-nav {
    width:100%;
    text-align:left;
    background-color:var(--accent-color);
    padding:15px
    }
    
    .todo-link {
    color:var(--accent-text-color);
    font-size:medium
    }
    
    .todo-h1 {
    position:fixed;
    color:var(--accent-text-color);
    z-index:2;
    font-size:1.5em;
    font-weight:500;
    margin-top:0;
    top:9px;
    right:5%;
    font-weight:700
    }
    
    .todo-body {
    padding-bottom:25%;
    background-size:400%
    }
    
    .todo-flex,.todo-container {
    gap:5px
    }
    
    .todo-flex {
    padding:0 5px
    }
    
    #todo-delete-all-button {
    left:0;
    margin-top:60px
    }
    
    #todo-add-button {
    right:0;
    z-index:1;
    position:fixed;
    bottom:0;
    width:100%;
    height:10%;
    border-radius:0
    }
    
    .todo-item {
    width:90%
    }
    
    .todo-delete-button {
    width:100px
    }
    
    .check-box {
    height:50px;
    width:100px
    }
    }
    
    @media only screen and (max-width: 260px) {
    .todo-h1 {
    display:none
    }
    }