@import url('https://fonts.googleapis.com/css2?family=Fanwood+Text&family=Roboto:wght@100;400&display=swap');

body {
    font-family: 'Roboto', sans-serif;    
    background-color: rgb(17 24 39);
    margin: 0;
}



footer {
    background-color:rgb(25, 53, 113);
    color: white;
    text-align:center;
    padding: 20px;
    font-size: 20px;
    margin: 0;
}

body > footer > a {

    color: cyan;
}


.heading {
    font-family: 'Fanwood Text', serif;
    padding: 5px;
    text-align: center;
    line-height: 5pt;
    color: white
}

.titlehead {
    color: rgb(250 204 21);
    padding-bottom: 2px;
}

.icons {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-top: 0px; 
}

.icon {
    fill: white; /* Initial color of icons */
    transition: fill 0.3s ease; /* Smooth transition for color change */
    margin: 0 3px; /* Spacing between icons */
}

.icon:hover {
    fill: cyan; /* Color change on hover */
}


#cname, #faculty, #section, #time, #avs, #sb, #sr, #prereq {
    font-weight: lighter;
    color: rgb(136, 243, 243);
    font-weight: 900;
    font-family: Arial, Helvetica, sans-serif;
}


.allButFooter {
    min-height: calc(100vh - 40px);
    margin: 20px;
}

.container {
    display:flex;
    justify-content: center;
    align-items: center;
    color: white;
}



.dual-listbox {
    background-color: rgb(17 24 39);
}

.dual-listbox__available, .dual-listbox__selected {
    background-color: rgb(4, 29, 83)!important;
    border-width: 0.1mm !important;
    border-color: cyan !important;
    color: white;
}

.total_credit_div {
    text-align: center;
    color: white;
    font-size: 15px;
    margin-top: 20px;
}


.routine-table th, .routine-table td, .routine-table tr {
    color: white;
}



.left {
    /* background-color: brown; */
    width:20vw;
}

.center {
     /* background-color: yellow; */
     width:60vw;
}

.right {
     /* background-color: orange; */
     width:20vw;
}

.warning {
     font-size: 20px;
     /*
     background-color: skyblue;
     */
     color: red;
     padding: 20px;
}

.examWarning {
     font-size: 20px;
     /*
     background-color: skyblue;
     */
     color: royalblue;
     padding: 20px;
}

.routine-table {
     margin-bottom: 20px;
}

table {
    width: 90%;
    text-align: center;
    border-collapse: collapse;
}

#downloadTable {
    background-color: cyan;
    width: 20%;
    margin-left: 40%;
    margin-right: 40%;
    padding: 10px;
    margin-top: 20px;
    border: 0;
}

#downloadTable:hover {
    background-color: #ddd;
}


/* for the corner */

.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-25deg);
    }

    40% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-25deg);
    }

    80% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@media only screen and (max-width: 600px) {

    .routine-table {
        display: block;
        margin: auto;
        width: 300px;
        overflow-x: auto;
    }

    th, td {
        font-size: 10px;
    }

    footer {
        font-size: small;
    }

    .heading > h5 {
        font-size: 10px;
    }

    .heading > h1 {
        font-size: 20px;
    }

    .container {
        display: flex;
        flex-wrap: wrap;
    }

    .center {
        order: 0;
        width: 500px;

    }

    .left {
        order: 1;
        font-size: 10px;
        width: 150px;
    }

    .right {
        order: 2;
        font-size: 10px;
        width: 150px;
    }

    #downloadTable {
        width: 50%;
        margin-left: 25%;
        margin-right: 25%;
        padding: 10px;
        margin-top: 20px;
        font-size: 12px;
        font-weight: 400;
    }

    .warning {
        font-size: 10px;
        /*
        background-color: skyblue;
        */
        color: red;
        padding: 20px;
    }
}