html, body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

a {
    color: inherit;
}

#return-pollak-lib {
    font-weight: 500;
    position: absolute;
    width: 200px;
    top: 150px;
    background-color: #cccccc;
    padding: 10px;
    display: flex;
    border-radius: 0 5px 5px 0;
}

#contact {
    position: absolute;
    width: 160px;
    padding: 15px 15px 20px 15px;
    top: 140px;
    background-color: #f2f2f2;
    left: 50%;
    transform: translate(260%, 0);
}

#split {
    margin-bottom: 10px;
    margin-top: 5px;
    border-top: 1px solid rgb(140, 139, 139);
}

#nav-bar {
    background-color: #01274c;
    display: flex;
    flex-direction: column;
}

#uni-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: white;
    font-family: 'Crimson Text', Times, serif;
    margin: 10px 0 10px 10px;
    justify-content: space-between;
}

#main-title {
    display: flex;
    color: white;
    font-family: 'Crimson Text', Times, serif;
    font-size: 25px;
    justify-content: center;
    padding: 20px 0 20px 0;
    background-color: #0b355f;
    width: 100%;
    cursor: pointer;
}

#intro {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

#top-box {
    display: flex;
    flex-direction: row;
    width: 1100px;
}

#box-1 {
    width: 55%;
}

#box-2 {
    width: 45%;
}

#study-room-img {
    height: 410px;
}

#intro-1 {
    font-size: 28px;
    text-align: center;
    font-weight: 900;
    color: rgb(70, 70, 70);
    margin: 110px 0 40px 0;
}

#notice-box {
    background-color: rgb(239, 239, 239);
    border-radius: 0 8px 8px 0;
    padding: 40px 40px 40px 40px;
    height: 330px;
}

#info-notes {
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 900;
    display: flex;
    justify-self: flex-start;
    color: rgb(25, 25, 25);
}

.intro-2 {
    color: rgb(70, 70, 70);
    text-align: center;
    margin-bottom: 15px;
    text-align: start;
    font-size: 17px;
}

#button-start {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0b355f;
    font-size: 18px;
    font-weight: 900;
    border-radius: 10px;
    color: white;
    margin: 30px 0 50px 0;
    cursor: pointer;
    width: 370px;
    height: 60px;
    transition: background-color ease-in-out 0.1s;
}

#button-start:hover {
    background-color: #062443;
    transition: background-color ease-in-out 0.1s;
}

#config-box {
    display: flex;
    flex-direction: row;
    border-radius: 8px;
    width: 720px;
    margin: 80px 0 100px 0;
}

#mascot-img {
    width: 200px;
    height: 200px;
    display: flex;
}

#config-text-box {
    background-color: rgb(239, 239, 239);
    border-radius: 8px;
    padding: 20px 40px 15px 40px;
    margin-bottom: 20px;
}

#configure-text {
    color: rgb(70, 70, 70);
    text-align: center; 
    font-size: 17px;
    margin-bottom: 10px;
    width: 250px;
}

#config-btn {
    display: flex;
    color: white;
    background-color: #505050;
    text-align: center;
    padding: 15px 20px 15px 20px;
    width: 200px;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
    transition: background-color ease-in-out 0.1s;
}

#config-btn:hover {
    background-color: #383838;
    transition: background-color ease-in-out 0.1s;
}

#footer {
    display: flex;
    padding: 50px 0 50px 0;
    justify-content: center;
    align-items: center;
    background-color: #01274c;
    color: white;
    font-family: 'Crimson Text', Times, serif;
    font-size: 20px;
}

#csuf-logo {
    width: 150px;
    height: 150px;
    padding-right: 100px;
}

@media (max-width: 1438px) {
    #contact{display: none;}
}

@media (max-width: 1100px) {
    #study-room-img{width:auto; height: 100%;}
    #notice-box{height: 320px;}
    #top-box{width: 100%; height: 400px;}
    #box-1{width: 50%;}
    #box-2{position: absolute; margin-left: 50%; width: 50%;}
}

@media (max-width: 937px) {
    #top-box {height: auto; flex-direction: column; align-items: center;}
    #study-room-img{width:100%; margin-bottom: 10px;}
    #box-1{width: 70%;}
    #box-2{position: relative; margin: 0; width: 90%;}
    #notice-box{border-radius: 8px; height: auto; padding: 30px 30px 30px 40px;}
}


@media (max-width: 720px) {
    #config-box {width: 100%; align-items: center;
        flex-direction: column-reverse;}
    #mascot-img {margin-bottom: 30px}
    #button-start{margin-bottom: 0; width: 90%;}
    #box-2{width: 100%;}
    #notice-box{width: 90%; padding: 5%;}
}

@media (max-width: 600px) {
    #footer{flex-direction: column; text-align: center; }
    #csuf-logo{padding: 0 0 20px 0;}
    #intro-1 {padding: 0 20% 0 20%;}
}

@media (max-width: 450px) {
    #box-1{width: 90%;}
}