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

    * h2 {
        font-size: 5vh;
        margin-bottom: 2vh;
    }

    * .box-style {
        padding: 1.5vh 1vw;
        background-color: white;
        border-radius: 1vh;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

#top-container {
    /* set height and width to entire screen */
    height: 100vh;
    width: 100vw;

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

    font-family: 'Roboto', sans-serif;
    background-color: #e0e0e0;
}

#top-container #instructions,
    #top-container #form {
        height: 100%;
        z-index: 6; 
        flex: 1;    
    }

#top-container #content-container {
        height: 100%;
        aspect-ratio: 9/16;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        border: 1px solid darkgray;
        background-color: #FAF9F6;
    }

#top-container #content-container #page-container {
            margin: 1.3vh;
            height: calc(89vh);
        }

#top-container .blur {
        filter: blur(1vh);  
    }

/* navbar Styling */
#navbar {
    height: 8%;
    width: 100%;

    display: flex;
    justify-content: space-around;
    align-items: space-between;
    
}
#navbar div {
        height: 100%;
        flex: 1;

        display: flex;
        justify-content: center;
        align-items: center;
    }
#navbar div img {
            height: 80%;
        }
#navbar div {
        
        border: 1px solid darkgray;
}
/* for some reason doesn't work nested with previous */
#navbar div:hover {
        background-color: lightgray;
        cursor: pointer;
    }
#navbar .selected {
        background-color: gray;
    }

.back-button {
    border: 1px solid gray;
    padding: 0;
    margin: 5% 90% 0 0;
    width: 3vh;
    height: 3vh;
    font-size: 2vh;
    color: black !important;
}
.back-button:hover {
    background-color: lightgray;
}

#blocker {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* signup page Styling */
#signup {
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#signup img {
        height: 50vh;
        margin-top: 8vh;
    }
#signup h1 {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid black;
    }
#signup form {
        margin: 8vh 0;
        padding: 3vh;
        width: 90%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }
#signup form * {
            width: 100%;
            margin: 2vh 0;
            font-size: 3vh;
        }

/* Info page Styling */
#info {
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}
#info h2 {
        margin-top: 5vh;
        width: 90%;
        text-align: center;
    }
#info form {
        padding: 3vh;
        width: 90%;
        margin-top: 10vh; 
        font-size: 3vh;
    }
#info form div {
            display: flex;
            margin: 3vh 0; 
        }
#info form div * {
                font-size: 3vh;
            }
#info form div label:first-child {
                width: 35%;
            }
#info form div input[type="url"], #info form div input[type="text"], #info form div input[type="date"] {
                width: 65%;
            }
#info form div input[type="number"] {
                width: 20%;
            }
#info form div input[type="radio"] {
                margin-left: 0.5vw;
                width: 5%;
            }
#info form button {
            width: 100%;
            margin: 5vh 0 2vh 0;
            font-size: 3vh;
        }

/* Goals Page styling */
#goal {
    height: 100%;

    display:flex;
    flex-direction: column;
    align-items: center;
}
#goal h2 {
        margin-top: 5vh;
        font-size: 5vh;
        width: 90%;
        text-align: center;
    }
#goal form {
        width: 90%;
        padding: 3vh;
        margin-top: 10vh; 
        font-size: 3vh;

    }
#goal form > div {
            display: flex;
            justify-content: space-between;
            margin: 3vh 0;
        }
#goal form > div * {
                font-size: 3vh;
            }
#goal form > div label {
                margin-left: 1vh;
            }
#goal form > div input[type="checkbox"] {
                height: 2vh;
                width: 2vh;
            }
#goal form > div input[type="number"] {
                width: 30%;
            }
#goal form > div > :first-child {
                width: 70%;
            }
#goal form > div >:last-child {
                width: 30%;
            }
#goal form > div >:last-child #weight {
                    width: 100%;
                }
#goal form > div p {
                text-align: right;
            }
#goal form button {
            width: 100%;
            margin: 5vh 0 2vh 0 ;
            font-size: 3vh;
        }

/* Stats page styling */
#stats {
    height: 100%;

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

    font-size: 3vh;
}
#stats #stats-container {
        width: 90%;
        height: 85%;

        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
#stats #stats-container .stats-box {
            padding: 2.5vh;
        }
#stats #stats-container .progress-bar {
            margin-top: 1vh;

            height: 50%;
            background-color: darkgray;
            border-radius: 1vh;
            text-align: center;
            line-height: 4vh;
            color: black;
        }
#stats #stats-container .progress-bar .progress {
                height: 100%;
                background-color: green;
                border-radius: 1vh;
            }
#stats #stats-container > div:hover {
            background-color: lightgray;
            cursor: pointer;
        }
#stats .chart {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        height: 23vh;
        width: 90%;
        margin: 2vh auto;
        background-color: #f0f0f0;
    }
#stats .chart span {
            font-size: 2vh;
        }
#stats .bar {
        width: 3vh;
        background-color: #008000;
    }
#stats .chart-labels {
        display: flex;
        justify-content: space-evenly;
        text-align: center;
        width: 90%;
    }
#stats .chart-labels span {
            font-size: 2vh;
            width: 13%;
        }
#stats table {
        margin-top: 5vh;
        width: 90%;
        border-collapse: collapse;
    }
#stats table td {
            font-size: 3vh;
            text-align: center;
            border: 1px solid #ddd;
            padding: 1vh;
        }
#stats table td:first-child {
            width: 60%;
        }

/* Exercise Page styling */
#exercises {
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}
#exercises .filter {
        font-size: 2vh;
    }
#exercises .filter select {
            font-size: 2vh;
        }
#exercises #description {
        font-size: 2vh;
        text-align: justify;
        margin: 1.5vh;
    }
#exercises > p {
        font-size: 1.8vh;
    }
#exercises h3 {
        font-size: 3vh;
        text-align: center;
    }
#exercises .comments-container {
        width: 95%;
        display: flex;
        overflow-y: auto;
        flex-direction: column;
    }
#exercises .comment {
        /* margin: 2vh 0; */
        padding: 2vh 0;
        border-top: 1px solid lightgray;
    }
#exercises .comment-text {
        font-size: 2vh;
        text-align: left;
        /* margin-left: -24vh; */
    }
#exercises .username {
        font-size: 2vh;
        font-weight: bold;
        /* margin: 2vh 0 0 -24vh; */
    }
#exercises .timestamp {
        font-size: 1.8vh;
        /* margin-left: -24vh; */
    }
#exercises #video-container {
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
#exercises #video-container .video:hover {
            background-color: lightgray;
            cursor: pointer;
        }
#exercises #video-container .video {
            width: 90%;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 1vh 0.5vw;
            padding: 1vh 0.5vw;
        }
#exercises #video-container .video p {
                font-size: 1.3vh;
                text-align: justify;
                padding-left: 1vw;
            }
#exercises #video-container .video img {
                height: 10vh; 
                aspect-ratio: 16/9;
                -o-object-fit: cover;
                   object-fit: cover;
            }
#exercises iframe {
        margin-top: 2vh;
        width: 95%;
        aspect-ratio: 16/9;
    }
#exercises button {
        font-size: 1.5vh;
        color: red;
    }

#food {
    height: 100%;
    width: 100%;

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

#food *:not(h2) {
        font-size: 2vh;
    }

#food .back-button {
        margin: 0;
    }

#food .search {
        margin: 2vh;
        display: flex;
        justify-content: center;
    }

#food #food-container {
        flex: 1;
        overflow: auto;
    }

#food table {
        width: 100%;
    }

#food table th, #food table td {
            padding: 0.4vh;
        }

#food #calorie-calculation {
        margin: 1vh;
        text-align: right;
    }

#food input[type="number"] {
        width: 20vh;
        border: none;
    }
  
#settings {
    display: flex;
    flex-direction: column;
    align-items: center;
}
  
#settings *:not(h2) {
        margin: 1.3vh 0;
        font-size: 3vh;
    }
  
#settings img {
        border-radius: 50%;
        width: 50%;
        aspect-ratio: 1/1;
        -o-object-fit: cover;
           object-fit: cover;
    }
  
#settings form {
        margin: 1.3vh;
        width: 90%; 
        font-size: 3vh;
    }
  
#settings form > div {
            margin: 0;
            display: flex; 
        }
  
#settings form > div label:first-child {
                width: 35%;
            }
  
#settings form > div input {
                width: 65%;
            }
  
#settings form > div input[type="number"] {
                width: 20%;
            }
  
#settings form > div input[type="radio"] {
                margin-left: 0.5vw;
                width: 5%;
            }
  
#settings form button {
            width: 100%;
            font-size: 3vh;
            margin-bottom: 1vh;
        }

.hidden {
    display: none !important;
}

#instructions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#instructions h1 {
        font-size: 6vh;
    }

#instructions > * {
        font-size: 2.5vh;
        width: 95%;
    }

#instructions div {
        width: 90%;
        font-size: 2vh;
        margin: 2vh;
        display: flex;
        justify-content: space-between;
    }

#instructions div button {
            font-size: 2vh;
            width: 20%;
        }

#instructions > button, #instructions >textarea {
        width: 90%
    }

#instructions .completed {
        background-color: lime;
    }

#instructions input {
        font-size: 1.5vh;
        width: 8vh;
        height: 2vh;
    }

#instructions #finish-button {
        background-color: #1c87c9;
        border-radius: 60px;
        border: none;
        color: #eeeeee;
        cursor: pointer;
        display: inline-block;
        font-family: sans-serif;
        font-size: 20px;
        padding: 5px 15px;
        text-align: center;
        text-decoration: none;
      }

@keyframes glowing {
        0% {
          background-color: #2ba805;
          box-shadow: 0 0 5px #2ba805;
        }
        50% {
          background-color: red;
          box-shadow: 0 0 20px red;
        }
        100% {
          background-color: #2ba805;
          box-shadow: 0 0 5px #2ba805;
        }
      }

#instructions #finish-button {
        animation: glowing 1300ms infinite;
      }
#form h1 {
        font-size: 6vh;
    }