/*csslint box-sizing: false*/

/* Global Styles */
html {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/* Background Color */
.background-color {
    background: linear-gradient(to bottom, #166236, #69a26c, #166236);
}

/* Body Format */
.bodyFormat {
    color: rgb(240, 230, 214);
}

/* ChatGPT code for background color */
.background-color::after {
    background: linear-gradient(#166236, #69a26c, #166236);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.1;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
}

/* Dark Mode */
.darkMode,
.darkModeAdd {
    background: linear-gradient(rgb(81, 80, 80), rgb(31, 30, 30), rgb(81, 80, 80));
    color: rgb(248, 240, 227);
    margin: 0;
}

/* Main Content */
main {
    margin: 0 auto;
    max-width: 1200px;
}

/* Toggle Button */
.toggle-css {
    background: rgb(0, 156, 23);
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 2px 2px rgb(0, 255, 60);
    color: rgb(255, 255, 255);
    display: flex;
}

.toggle-css:hover {
    background-color: rgb(0, 255, 0);
    transition: 1s;
}

/* Center Alignment */
.center-all {
    text-align: center;
}

/* Margin for Home */
.homeMargin {
    margin-bottom: 50px;
    margin-top: 50px;
}

/* Bold Text */
.bold {
    font-weight: bold;
}

/* Image Styling */
.img {
    max-width: 350px;
    width: 100%;
}

/* Anchor Links */
a {
    color: rgb(4, 242, 0);
    text-decoration: none;
}

/* Spacing for Links */
.link_space {
    margin: 0 5px;
}

/* Spacing for Intro */
.intro-spacing {
    align-items: center;
    text-align: justify;
}

/* Fieldset */
fieldset {
    border: none;
}

/* Image Border */
.img {
    border-radius: 9px;
    box-shadow: 0 0 3px 3px rgb(9, 255, 0);
}

/* Green Border */
.border-green>*,
.border-greenn>td {
    border: 1px solid;
    border-color: rgb(0, 255, 0);
    border-color: rgba(0, 255, 0, 0.631);
}

/* Ordered List */
ol li {
    list-style-position: inside;
    text-align: center;
}

/* Table Styling */
table {
    margin: auto;
    padding-bottom: 1rem;
}

/* Form Customization */
.red-form {
    font-size: large;
    margin: 0 auto;
    padding-bottom: 2rem;
    width: 70vw;
}

/* January 28 Class */
.jan28 {
    display: block;
}

/* Music Space */
.music-space {
    margin-right: 20px;
}

/* Dropdown Height */
.dropdown {
    height: 20px;
}

/* Favorite Chicken Height */
.favChicken {
    height: 50px;
}

/* Red Select */
.red-select {
    background: linear-gradient(rgb(244, 120, 120), rgb(255, 0, 0), rgb(244, 120, 120));
    border: none;
    border-radius: 15px;
    color: rgb(255, 235, 205);
    margin-left: 10px;
    margin-top: 10px;
}

/* Placeholder in Form */
.formholder::placeholder {
    color: rgb(255, 235, 205);
    text-align: center;
}

/* Red Text */
.red {
    color: red;
}

/* Red Input */
.red-input {
    background: linear-gradient(rgb(244, 120, 120), rgb(255, 0, 0), rgb(244, 120, 120));
    border: none;
    border-radius: 15px;
    color: antiquewhite;
    height: 20px;
    text-align: center;
}

/* Bottom Border */
.bor {
    border-bottom: 1px solid red;
}

/* Red Submit Button */
.red_submit {
    background-color: rgb(245, 6, 6);
    background-color: rgba(245, 6, 6, 0.885);
    border-radius: 15px;
    color: rgb(255, 235, 205);
    font-weight: bold;
    margin-top: 2rem;
    width: 100px;
}

/* Navigation Separator */
.navSeperate {
    border-top: 1px solid;
    border-top-color: rgb(0, 255, 21);
    /* fallback color*/
    border-top-color: rgba(0, 255, 21, .7);
    margin: auto;
    margin-top: 15px;
    width: 500px;
}

/* Second Navigation */
.navTwo {
    margin-top: 10px;
}

/* CSS for Web Eval Section */
.web-eval {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 70px;
    justify-content: center;
    margin: auto;
    max-width: 1000px;
    padding: 20px 20px;
}

.website-web-eval {
    align-items: center;
    height: 650px;
    max-width: 250px;
}

.website-web-eval>.psum {
    margin-top: 0;
}

.website-web-eval>ul>li>p {
    margin-top: 0;
}

.gimmiespace {
    margin-bottom: 4rem;
    margin-top: 4rem;
}

.yellow {
    color: gold;
}

.no_style {
    list-style: upper-roman;
}

.centering {
    align-content: center;
    text-align: center;
}

/* Hover Animation */
@keyframes pulsate {
    100% {
        text-shadow:
            0 0 7px rgb(250, 255, 0),
            0 0 14px #FFC107,
            0 0 17px rgb(250, 255, 0),
            0 0 24px #FFC107,
            0 0 34px rgb(250, 255, 0);
    }
}

a:hover {
    animation: pulsate 1.0s infinite alternate;
    color: yellow;
}

/* Glow Animation */
@keyframes pulsateRGB {
    0% {
        color: rgb(255, 117, 117);
        text-shadow:
            0 0 7px rgb(227, 13, 13),
            0 0 14px rgb(227, 13, 13),
            0 0 17px rgb(227, 13, 13),
            0 0 24px rgb(227, 13, 13),
            0 0 34px rgb(227, 13, 13);
    }

    25% {
        color: pink;
        text-shadow:
            0 0 7px rgb(241, 89, 182),
            0 0 14px rgb(241, 89, 182),
            0 0 17px rgb(241, 89, 182),
            0 0 24px rgb(241, 89, 182),
            0 0 34px rgb(241, 89, 182);
    }

    50% {
        color: rgb(0, 255, 251);
        text-shadow:
            0 0 7px rgb(0, 255, 251),
            0 0 14px rgb(0, 255, 251),
            0 0 17px rgb(0, 255, 251),
            0 0 24px rgb(0, 255, 251),
            0 0 34px rgb(0, 255, 251);
    }

    100% {
        color: rgb(0, 255, 21);
        text-shadow:
            0 0 7px rgb(0, 255, 21),
            0 0 14px rgb(0, 255, 21),
            0 0 17px rgb(0, 255, 21),
            0 0 24px rgb(0, 255, 21),
            0 0 34px rgb(0, 255, 21);
    }
}

/* Elements with Glowing Animation */
.gnameresponse,
.glowy {
    animation: pulsateRGB 5.0s ease-in-out infinite;
    color: white;
}

/* Styling for Form Elements */
.fs_space {
    background: rgb(248, 240, 227);
    border: none;
    color: black;
    margin-bottom: .5rem;
    margin-left: .25rem;
}

.feb18round {
    background: rgb(248, 240, 227);
    border-radius: 10px;
    color: rgb(131, 70, 0);
    font-size: medium;
}

.feb18round::placeholder {
    color: black;
    text-align: center;
}

/* BYO Form Styling */
.byo-form {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    font-size: large;
}

.byo-form>label>input {
    border-radius: 10px;
    margin: 10px auto;
}

.bottom-buttons {
    display: flex;
    flex-direction: row;
    gap: 25px;
    margin: auto;
    margin-bottom: 10px;
    margin-top: 10px;
}

.bottom-buttons>input {
    font-size: medium;
}

.classResponse>input {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.byoLoadImg {
    margin: auto;
    max-width: 170px;
}

.byo-form>label>input {
    background-color: rgb(248, 240, 227);
    font-size: medium;
}

/* Calculator Styling */
.container {
    margin: auto;
    max-width: 20em;
}

.container>p {
    text-align: center;
}

.calculator {
    border-radius: 12px;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    max-width: 20em;
    overflow: hidden;
}

.calculator__display {
    background-color: #222222;
    color: rgb(248, 240, 227);
    font-size: 1.714285714em;
    padding: 0.5em 0.75em;
    text-align: right;
}

.calculator__keys {
    background-color: #999;
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(4, 25%);
}

.calculator__keys>* {
    background-color: #222222;
    color: rgb(248, 240, 227);
    padding: 0.5em 1.25em;
    position: relative;
    text-align: center;
}

.calculator__keys>*:active::before,
.calculator__keys>.is-depressed::before {
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.2);
    bottom: 0;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5) inset;
    content: "";
    left: 0;
    opacity: 0.3;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

/* Styling for Calculator Keys */
.key--operator {
    background-color: #222222;
    color: rgb(248, 240, 227);
}

.key--equal {
    background-image: linear-gradient(to bottom, #d32a00b1, #e30000b8);
    grid-column: -2;
    grid-row: 2 / span 4;
}

/* CSS for JS Arrays */
.jsArray {
    background-color: rgb(248, 240, 227);
    border-radius: 10px;
    font-size: large;
}

.jsArrInputs {
    background-color: #166236;
    border-radius: 10px;
    color: rgb(248, 240, 227);
    font-size: large;
}

/* Project Overview Styling */
.proj-overview {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
    max-width: 1400px;
}

.proj-first {
    overflow: scroll;
    text-overflow: ellipsis;
}

.proj-img {
    align-content: center;
    border-radius: 10px;
    height: 300px;
    max-width: 350px;
    object-fit: cover;
    width: 100%;
}

.proj-fieldsets {
    border: 1px solid rgb(0, 255, 21);
    border-radius: 10px;
    display: inline-block;
    margin: 0;
    max-height: 300px;
    max-width: 450px;
    overflow: scroll;
    text-overflow: ellipsis;
}

.proj-list>li {
    text-align: justify;
}

/*Validation Buttons*/
.vm {
    margin: 15px 5px 0 5px;
}

.css-vali {
    background: rgb(181, 85, 0);
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 2px 2px rgb(255, 119, 0);
    color: #fff;
}

.css-vali:hover {
    background: rgb(255, 119, 0);
    transition: 0.7s;
}

.html-vali {
    background-color: rgb(3, 0, 207);
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 2px 2px rgb(0, 166, 255);
    color: #fff;

}

.html-vali:hover {
    background-color: rgb(0, 166, 255);
    transition: 0.7s;
}

.w3c-vali {
    background-color: rgb(105, 0, 143);
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 2px 2px rgb(187, 0, 255);
    color: #fff;
}

.w3c-vali:hover {
    background-color: rgb(187, 0, 255);
    transition: 0.7s;
}

/* SLidehosw*/

.slides-container {
    background-color: #0eac4b3e;
    border: 5px solid black;
    border-radius: 20px;
    display: block;
    height: 600px;
    justify-content: center;
    margin: auto;
    max-width: 800px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

div.active {
    display: block;
}

.slide {
    display: none;
    height: 100%;
    margin-bottom: 10%;
    margin-top: 5%;
    width: 100%;
}

.slide>p {
    font-size: larger;
}

.slide>img {
    border: 1px solid black
}

.prev,
.next {
    background: transparent;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 15px rgb(0, 255, 0);
    color: white;
    cursor: pointer;
    outline: none;
    padding: 10px;
    top: 50%;

}

.prev:hover,
.next:hover {
    background-color: #69a26c;
    transition: .8s;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/*Peer review*/
.peer-review-list {
    margin: 10px 20px;
    text-align: justify;

}

.yes-peer {
    color: rgb(0, 255, 132);
}

.no-peer {
    color: #ff0909;
}

.list-container {
    background-color:rgba(0, 89, 13, 0.634) ;
    background-color: rgba(0, 89, 13, 0.634);
    border: 5px solid green;
    border-radius: 20px;
    height: 350px;
    margin: auto;
    overflow: scroll;
    width: 700px;
}

.res-peer {
    color: rgb(228, 249, 0);
}

.peer-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: auto;
}

.img-peer {
    border-radius: 15px;
    width: 650px;
}


/* Media Queries */
/* Rule Overrides For Laptops / Small Screens */
@media screen and (min-width: 981px) and (max-width: 1400px) {}

/* Rule Overrides For Tablet Devices */
@media screen and (min-width: 601px) and (max-width: 980px) {}

/* Rule Overrides For Mobile Devices */
@media screen and (min-width: 370px) and (max-width: 600px) {}