/* importing google fonts to give a nice typography to website */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

body, html {
    margin      : 0;
    padding     : 0;
    border      : 0;
    background  : #D3F0F4;
    font-family : "Raleway", sans-serif;
    font-style  : normal;
}

a, label, span, p, h1, h2, h3, h4, h5, h6 {
    color : #111155;
}

.container {
    width  : 1160px;
    margin : 0 auto;
}

header {
    position   : fixed;
    top        : 0;
    left       : 0;
    width      : 100%;
    background : #D3F0F4;
    z-index    : 999;
}

header, nav {
    box-shadow : 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

nav ul {
    display         : flex;
    justify-content : space-between;
    list-style      : none;
    height          : 80px;
    margin          : 0;
    padding         : 0;
    align-items     : center;
    gap             : 15px;
}

nav ul li a {
    text-decoration : none;
    font-weight     : 600;
}

#navbar-logo a {
    display         : flex;
    justify-content : center;
    align-items     : center;
    gap             : 12px;
}

#navbar-logo a span {
    font-size   : 32px;
    font-weight : 700;
}

#navbar-logo img {
    height : 40px;
}

#navbar-search {

}

#navbar-search form {
    display         : flex;
    justify-content : center;
    align-items     : center;
    gap             : 12px;
}

.search-input input {
    width         : 340px;
    height        : 40px;
    border        : transparent;
    background    : #fff;
    color         : #111155;
    border-radius : 8px;
    padding       : 0 10px;
    font-size     : 14px;
    outline       : none;
}

.search-input select {
    width         : 200px;
    height        : 40px;
    border        : transparent;
    background    : #fff;
    color         : #111155;
    border-radius : 8px;
    padding       : 0 5px;
    font-size     : 14px;
    outline       : none;
}

#navbar-search button {
    width         : 90px;
    height        : 40px;
    border-radius : 8px;
    background    : #111155;
    color         : #fff;
    border        : 0;
    font-weight   : 500;
    font-size     : 14px;
    cursor        : pointer;
}

.hero {
    display         : flex;
    justify-content : space-between;
    margin          : 140px 0 55px 0;
    flex-wrap       : nowrap;
    align-items     : start;
    gap             : 50px;
}

.title {
    flex-basis : 50%;
}

.title h1 {
    font-size   : 44px;
    margin      : 0;
    font-weight : 800;
}

.description {
    flex-basis : 50%;
}

.description p:first-child {
    margin-top : 0;
}

.description p {
    font-size   : 18px;
    line-height : 24px;
}

.universities-list {
    margin         : 85px 0;
    width          : 100%;
    display        : block;
    flex-direction : row;
}

.universities-list ul {
    margin                : 0;
    padding               : 0;
    list-style            : none;
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 25px;
}

.universities-list ul li {
    background      : #ffffff;
    padding         : 25px 20px;
    border-radius   : 10px;
    display         : flex;
    flex-direction  : row;
    justify-content : start;
    align-items     : start;
    gap             : 25px;
    box-shadow      : 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.universities-list ul li .icon {

}

.universities-list ul li .icon img {
    height : 60px;
}

.universities-list ul li h2 {
    margin    : 0;
    max-width : 250px;
}

.universities-list ul li p {

}

.universities-list ul li a {
    width           : auto;
    display         : inline-block;
    text-decoration : none;
    font-size       : 12px;
    margin-bottom   : 15px;
    border-bottom   : 1px solid #111155;
}

.universities-list ul li .link.hidden {
    display : none;
}

.universities-list ul li .link span {
    font-size : 12px;
}

.universities-list ul li button.toggle-link-btn {
    background     : transparent;
    border         : 2px solid #111155;
    text-transform : uppercase;
    font-weight    : 600;
    font-size      : 14px;
    margin         : 0;
    padding        : 8px 15px 6px 15px;
    color          : #111155;
    cursor         : pointer;
    border-radius  : 6px;
}

.universities-list ul li button.toggle-link-btn:hover {
    background      : #111155;
    color           : #ffffff;
    transition      : 0.2s all ease-in-out;
    text-decoration : underline;
}

footer {
    box-shadow : 0 -5px 5px 3px rgba(0, 0, 0, 0.1);
}

footer ul {
    display         : flex;
    justify-content : space-between;
    list-style      : none;
    height          : 50px;
    margin          : 0;
    padding         : 0;
    align-items     : center;
}

footer ul li {

}

.university.blur {
    filter           : blur(3px);
    background-color : #ccc;
    pointer-events   : none;
}

.save-university {
    border          : 0;
    padding         : 0;
    margin-top      : 15px;
    font-size       : 14px;
    text-transform  : none;
    color           : #111155;
    text-decoration : underline;
    width           : 100%;
    background      : transparent;
    cursor          : pointer;
    font-weight     : 600;
}

.save-university:hover {
    color : #000000;
}

.login {
    display         : flex;
    justify-content : space-between;
    margin          : 140px 0 55px 0;
    flex-wrap       : nowrap;
    align-items     : start;
    gap             : 50px;
}

.login .image {
    width : 40%;
}

.login .image img {
    height : 350px;
}

.login .form {
    width : 60%;
}

.login form {
    width         : 60%;
    border        : 1px solid #111155;
    border-radius : 10px;
    padding       : 20px 20px 0 20px;
}

.login .form h1 {
    font-size : 42px;
}

.login .form div {
    display        : flex;
    flex-direction : column;
    margin-bottom  : 20px;
}

.login .form div label {
    font-weight   : 500;
    margin-bottom : 5px;
    font-size     : 14px;
}

.login .form div input {
    height        : 40px;
    background    : #ffffff;
    border        : 1px solid #a4a4a4;
    padding-left  : 10px;
    border-radius : 5px;
}

.login .form div input:focus-visible {
    border  : 1px solid #a4a4a4;
    outline : none;
}

.login .form div button {
    height         : 40px;
    border-radius  : 5px;
    border         : 0;
    background     : #6358DC;
    color          : #fff;
    font-size      : 18px;
    text-transform : uppercase;
    cursor         : pointer;
}

.create-account {
    margin-top      : 30px;
    display         : flex;
    float           : left;
    justify-content : start;
    align-items     : center;
    gap             : 10px;
    font-size       : 16px;
}

.create-account a {
    font-weight : 600;
    font-size   : 14px;
}

#navbar-links {
    display : flex;
    gap     : 10px;
}

a.logout {
    color         : #ff0000;
    border-bottom : 1px solid #ff0000;
}

.not-found {
    color : #ff0000;
}

.error-message {
    color       : #ff0000;
    font-weight : 700
}

.success-message {
    color       : #008000;
    font-weight : 700
}

.mb-10px {
    margin-bottom : 10px;
}

.filtered-universities {
    color          : #000;
    text-transform : uppercase;
    border-bottom  : 1px solid #111155;
}

.saved-universities {
    color          : #000;
    text-transform : uppercase;
    border-bottom  : 1px solid #111155;
    margin-top     : 50px;
}

.search-input label {
    font-size    : 16px;
    font-weight  : 500;
    margin-right : 5px;
}

.images-reference {
    padding       : 15px 0 10px 0;
    border-bottom : 1px solid #f4f4f4;
}

.images-reference p {
    margin-bottom : 0;
    text-align    : center;
    font-size     : 12px;
}

@media only screen and (max-width : 1240px) {
    .container {
        width : 100%;
    }
    
    nav ul {
        padding : 0 25px;
    }
    
    .search-input input {
        width : 200px;
    }
    
    .hero {
        padding : 0 25px;
    }
    
    .universities-list ul {
        padding : 0 25px;
    }
    
    .filtered-universities, .saved-universities {
        padding : 0 25px;
    }
    
    footer ul {
        padding : 0 25px;
    }
    
    .login {
        padding : 0 25px;
    }
    
    .login .image {
        display         : flex;
        justify-content : center;
        align-items     : center;
    }
    
    nav ul li a:first-child {
        display : none;
    }
    
    .success-message {
        padding : 0 25px;
    }
}

@media only screen and (max-width : 820px) {
    .universities-list ul {
        grid-template-columns : repeat(2, 1fr);
    }
    
    #navbar-logo a span {
        display : none;
    }
    
    #navbar-logo {
        margin-right : 30px;
    }
}

@media only screen and (max-width : 767px) {
    .universities-list ul {
        grid-template-columns : repeat(1, 1fr);
    }
    
    nav ul {
        display        : flex;
        height         : auto;
        flex-direction : column;
        gap            : 20px;
        padding        : 25px;
    }
    
    #navbar-search form {
        display         : flex;
        justify-content : start;
        align-items     : start;
        gap             : 15px;
        flex-direction  : column;
    }
    
    #navbar-logo img {
        height : 80px;
    }
    
    .search-input input {
        width : 95%;
    }
    
    .search-input select {
        width : 100%;
    }
    
    .search-input label {
        margin-bottom : 5px;
        float         : left;
    }
    
    #navbar-search, .search-input {
        width : 100%;
    }
    
    .hero {
        justify-content : start;
        margin          : 400px 0 55px 0;
        align-items     : start;
        flex-direction  : column;
    }
    
    .login {
        margin-top : 400px;
    }
    
    footer ul {
        justify-content : start;
        height          : auto;
        padding         : 25px;
        flex-direction  : column;
        gap             : 15px;
    }
    
    footer ul li {
        text-align : center;
    }
    
    nav ul li a:first-child {
        display : block;
    }
    
    .login .image {
        display : none;
    }
    
    .login .form {
        width : 100%;
    }
    
    .login form {
        width : 90%;
    }
}