@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;1,300&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/*Root files for variables and such*/
:root{
    /*Primary Color Palette for Page*/
    --color-one: #03045e;
    --color-two: #0077b6;
    --color-three: #00b4d8;
    --color-four: #90e0ef;
    --color-five: #caf0f8;
    --color-six: white;

    /*Spacing Controls*/
    --std-margin: 10px;

    /*Slider Variables*/
    --slider-height: 15px;
}


/*Code to hide all of the semester blocks to start with*/
.tableBoxSemester1,.tableBoxSemester2,.tableBoxSemester3,.tableBoxSemester4,.tableBoxSemester5,
.tableBoxSemester6,.tableBoxSemester7,.tableBoxSemester8,.tableBoxSemester9,.tableBoxSemester10,
.tableBoxSemester11,.tableBoxSemester12{
    display: none;
}

/*Code to hide all of the class blocks to start with*/
.semester1DataClass1,.semester1DataClass2,.semester1DataClass3,.semester1DataClass4,
.semester1DataClass5,.semester1DataClass6,.semester1DataClass7,.semester1DataClass8,
.semester1DataClass9,.semester1DataClass10,.semester1DataClass11,.semester1DataClass12{
    display: none;
}
.semester2DataClass1,.semester2DataClass2,.semester2DataClass3,.semester2DataClass4,
.semester2DataClass5,.semester2DataClass6,.semester2DataClass7,.semester2DataClass8,
.semester2DataClass9,.semester2DataClass10,.semester2DataClass11,.semester2DataClass12{
    display: none;
}
.semester3DataClass1,.semester3DataClass2,.semester3DataClass3,.semester3DataClass4,
.semester3DataClass5,.semester3DataClass6,.semester3DataClass7,.semester3DataClass8,
.semester3DataClass9,.semester3DataClass10,.semester3DataClass11,.semester3DataClass12{
    display: none;
}
.semester4DataClass1,.semester4DataClass2,.semester4DataClass3,.semester4DataClass4,
.semester4DataClass5,.semester4DataClass6,.semester4DataClass7,.semester4DataClass8,
.semester4DataClass9,.semester4DataClass10,.semester4DataClass11,.semester4DataClass12{
    display: none;
}
.semester5DataClass1,.semester5DataClass2,.semester5DataClass3,.semester5DataClass4,
.semester5DataClass5,.semester5DataClass6,.semester5DataClass7,.semester5DataClass8,
.semester5DataClass9,.semester5DataClass10,.semester5DataClass11,.semester5DataClass12{
    display: none;
}
.semester6DataClass1,.semester6DataClass2,.semester6DataClass3,.semester6DataClass4,
.semester6DataClass5,.semester6DataClass6,.semester6DataClass7,.semester6DataClass8,
.semester6DataClass9,.semester6DataClass10,.semester6DataClass11,.semester6DataClass12{
    display: none;
}
.semester7DataClass1,.semester7DataClass2,.semester7DataClass3,.semester7DataClass4,
.semester7DataClass5,.semester7DataClass6,.semester7DataClass7,.semester7DataClass8,
.semester7DataClass9,.semester7DataClass10,.semester7DataClass11,.semester7DataClass12{
    display: none;
}
.semester8DataClass1,.semester8DataClass2,.semester8DataClass3,.semester8DataClass4,
.semester8DataClass5,.semester8DataClass6,.semester8DataClass7,.semester8DataClass8,
.semester8DataClass9,.semester8DataClass10,.semester8DataClass11,.semester8DataClass12{
    display: none;
}
.semester9DataClass1,.semester9DataClass2,.semester9DataClass3,.semester9DataClass4,
.semester9DataClass5,.semester9DataClass6,.semester9DataClass7,.semester9DataClass8,
.semester9DataClass9,.semester9DataClass10,.semester9DataClass11,.semester9DataClass12{
    display: none;
}
.semester10DataClass1,.semester10DataClass2,.semester10DataClass3,.semester10DataClass4,
.semester10DataClass5,.semester10DataClass6,.semester10DataClass7,.semester10DataClass8,
.semester10DataClass9,.semester10DataClass10,.semester10DataClass11,.semester10DataClass12{
    display: none;
}
.semester11DataClass1,.semester11DataClass2,.semester11DataClass3,.semester11DataClass4,
.semester11DataClass5,.semester11DataClass6,.semester11DataClass7,.semester11DataClass8,
.semester11DataClass9,.semester11DataClass10,.semester11DataClass11,.semester11DataClass12{
    display: none;
}
.semester12DataClass1,.semester12DataClass2,.semester12DataClass3,.semester12DataClass4,
.semester12DataClass5,.semester12DataClass6,.semester12DataClass7,.semester12DataClass8,
.semester12DataClass9,.semester12DataClass10,.semester12DataClass11,.semester12DataClass12{
    display: none;
}

*{
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    font-family: 'Ubuntu';
}

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: var(--color-six);
    color:var(--color-two);
}

/*Semester Input Bar*/
.header-display{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 15vh;
    width: 60vh;
    margin: 10px;
}

.semesterHeaderBubble{
    border: 1px solid var(--color-two);
    border-radius: 15px;
    padding: 25px;
}

.semesterInputStyles{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--std-margin);
    width: 200px;
}

.semesterInputRange{
    width:100%;
    margin: 0px 10px;
}

.semesterInputNumber{
    width: 40px;
    padding:2px;
    text-align: center;
    border: 1px solid var(--color-two);
    border-radius: 5px;
}

/*Calcualtion Results and Graph*/
.results-display-top{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 1fr);
    align-content: center;
    justify-content: center;
    grid-gap: 10px;
    width: 50vh;
    height: 40vh;
    max-height: 220px;
    justify-items: center;
    margin-top: 50px;
}

.grid-item:first-child{
    grid-column: 1 / -1;
    width:350px;
    
}

.grid-item:last-child{
    grid-column: 1 / -1;
    width: 250px;
}

.grid-item{
    background: var(--color-six);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid var(--color-two);
    border-radius: 15px;
    width: 250px;
}

.grid-item:hover{
    background-color: var(--color-two);
    color: var(--color-six);
}

/*Graph*/
.gpa-graph-container{
    width: 575px;
    background: var(--color-six);
    display: flex;
    justify-content: center;
    align-items: center;
    padding:10px;
    margin: var(--std-margin);
    border-radius: 50px;
    border: 1px solid var(--color-two);
}


/*Class Input Boxes*/
[class^="tableBoxSemester"]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 575px;
    background: var(--color-six);
    padding: 10px;
    border: 1px solid var(--color-two);
    border-radius: 50px;
    margin: var(--std-margin);
}
[class^="class-display"]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
[class^="semesterStats"]{
    background: var(--color-six);
}
.standardTableRowHeading{
    display: grid;
    grid-template-columns: 4fr 1fr 1fr;
    background: var(--color-six);
    justify-content: center;
    align-items: center;
    grid-gap: 0px;
    width:304px;
    font-size: 10pt;

}
[class^="tableForSemester"]{
    display:flex;
    justify-content: center;
    align-items: center;
}
.inputBoxCN{
    width: 200px;
    height: 20px;
    border: 1px solid var(--color-two);
    border-radius: 5px;

    padding-left: 3px;

    transition: background-color 0.2s, color 0.2s, border 0.2s;

}

.inputBoxCN:hover{
    background-color: var(--color-two);
    color: var(--color-six);
    border: 2px solid var(--color-two);
}

.inputBoxCRN{
    width: 50px;
    height: 20px;
    border: 1px solid var(--color-two);
    border-radius: 5px;

    text-align: center;
}

.inputBoxCRN:hover{
    background-color: var(--color-two);
    color: var(--color-six);
    border: 2px solid var(--color-two);
}

.inputSelectGrade{
    width: 50px;
    height: 20px;
    border: 1px solid var(--color-two);
    border-radius: 5px;
    text-align: center;
}

.inputSelectGrade:hover{
    background-color: var(--color-two);
    color: var(--color-six);
    border: 2px solid var(--color-two);
}

/*Individual Class Box Calculation Results*/
[class^="semesterClassAndCreditTotals"]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.semDataBubble{
    border: 1px solid var(--color-two);
    margin: 10px;
    border-radius: 15px;
    width: 200px;
    transition: background-color 0.2s, color 0.2s;
}

.semDataBubble:hover{
    background-color: var(--color-two);
    color: var(--color-six);
}

.semDataBubbleD{
    border: 1px solid var(--color-two);
    margin: 5px;
    border-radius: 15px;
    width: 200px;
    transition: background-color 0.2s, color 0.2s;
}

.semDataBubbleD:hover{
    background-color: var(--color-two);
    color: var(--color-six);
}

/*Input Range Slider Customization*/
.semesterInputRange{
    -webkit-appearance: none;
    appearance: none;
    height: var(--slider-height);
    background: var(--color-six);
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 12px;
    border: 1px solid var(--color-two);
}

.semesterInputRange:hover{
    background: var(--color-four);
    opacity: 1;
}

.semesterInputRange::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: var(--slider-height);
    height: var(--slider-height);
    background: var(--color-two);
    cursor: pointer;
    border-radius: 50%;
}


.s1ClassInputRange,.s2ClassInputRange,.s3ClassInputRange,.s4ClassInputRange,
.s5ClassInputRange,.s6ClassInputRange,.s7ClassInputRange,.s8ClassInputRange,
.s9ClassInputRange,.s10ClassInputRange,.s11ClassInputRange,.s12ClassInputRange{
    -webkit-appearance: none;
    appearance: none;
    height: var(--slider-height);
    background: var(--color-six);
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 12px;
    border: 1px solid var(--color-two);
    margin: 5px;
}

.s1ClassInputRange:hover,.s2ClassInputRange:hover,.s3ClassInputRange:hover,.s4ClassInputRange:hover,
.s5ClassInputRange:hover,.s6ClassInputRange:hover,.s7ClassInputRange:hover,.s8ClassInputRange:hover,
.s9ClassInputRange:hover,.s10ClassInputRange:hover,.s11ClassInputRange:hover,.s12ClassInputRange:hover{
    background: var(--color-four);
    opacity: 1;
}



.s1ClassInputRange::-webkit-slider-thumb,.s2ClassInputRange::-webkit-slider-thumb,
.s3ClassInputRange::-webkit-slider-thumb,.s4ClassInputRange::-webkit-slider-thumb,
.s5ClassInputRange::-webkit-slider-thumb,.s6ClassInputRange::-webkit-slider-thumb,
.s7ClassInputRange::-webkit-slider-thumb,.s8ClassInputRange::-webkit-slider-thumb,
.s9ClassInputRange::-webkit-slider-thumb,.s10ClassInputRange::-webkit-slider-thumb,
.s11ClassInputRange::-webkit-slider-thumb,.s12ClassInputRange::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: var(--slider-height);
    height: var(--slider-height);
    background: var(--color-two);
    cursor: pointer;
    border-radius: 50%;
}


.s1ClassInputNum,.s2ClassInputNum,.s3ClassInputNum,.s4ClassInputNum,
.s5ClassInputNum,.s6ClassInputNum,.s7ClassInputNum,.s8ClassInputNum,
.s9ClassInputNum,.s10ClassInputNum,.s11ClassInputNum,.s12ClassInputNum{
    width: 40px;
    padding:2px;
    text-align: center;
    border: 1px solid var(--color-two);
    border-radius: 5px;

}

/*Generate Button CSS*/
.generateButton,.scrollToTopButton,.exportButton{
    background-color: var(--color-six);
    border: 1px solid var(--color-two);
    color: var(--color-two);
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 20px;
    margin:10px;
}

.generateButton:hover,.scrollToTopButton:hover,.exportButton:hover{
    background-color: var(--color-two);
    color: var(--color-six);
}

.generateButton:active,.scrollToTopButton:active,.exportButton:active{
    scale: 0.95;
}

/*Nav Bar Stuff*/
.navBar{
    display: flex;
    background: black;
    align-items: center;
    justify-content: center;
    width: 100vw;
    text-align: center;
    font-size: 14px;
}

.nav-links{
    display: flex;
    margin: 50px;
}

ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li a {
    text-decoration: none;
    padding: 10px;
    color: white;
}

/*Nav Bar End*/
/*Footer Stuff*/

.footer{
    display: flex;
    background: black;
    color: white;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    width: 100vw;
    text-align: center;
    font-size: 14px;
}
/*Footer End*/