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

:root{
    --dark-grey: #3c3b3d;
    --light-grey: #8e8e8e;
    --lighter-grey: #dfdfdf;
    --lightest-grey: #e9e9e9;
}

h4{
    font-size: 24px;
}

p{
    font-size: medium;
}
/* Navigation Bar*/
nav{
    display: flex;
    justify-content: space-between;
    justify-items: center;
    align-items: center;
    padding: 16px 24px;
    height: 32px;
    /* position: sticky;
    top: 0; */
}

nav .logo{
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.logo p{
    color: var(--dark-grey);
    display: inline;
    font-weight: bold;
}

.logo span{
    font-weight: medium;
    color: var(--light-grey);
}

nav ul{
    display:flex;
    list-style: none;
    align-items: center;
}

nav li{
    padding: 0.5em 0.5em;
}

nav a{
    text-decoration: none;
    color: var(--dark-grey);
    font-size: 18px;
}

.mobile-nav{
    display: none;
}


/*Hero section*/
.hero-container{
    background-color: var(--lightest-grey);
    display: flex;
    padding: 5% 3%;
}

.hero-left img{
    width: 85%;
}

.hero-right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 1%;
    padding:0 2%;
}

.hero-right  h1, h4{
    padding: 5%;
    color: var(--dark-grey)
}

.hero-right h1{
    font-size: 27px;
}
.hero-right h4{
    font-size: large;
}

.hero-right a{
    color: #fff;
    text-decoration: none;
}

.hero-container button{
    background-color: var(--dark-grey);
    width: 110%;
    height: 3.5rem;
    cursor: pointer;
    color: #fff;
    border-bottom: 3px solid black ;
    border-right: 3px solid black;
    border-top: 2.5px solid var(--light-grey);
    border-left: 2px solid var(--light-grey) ;
}

/*News section*/
.news-container{
    display:grid;
    grid-template-columns: 3fr 2fr;
    color: var(--dark-grey);
}

/*News left*/
.news-left{
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.news-left img{
    width: 100%
}

.news-left-info{
    padding-bottom: 2%;
}

.news-left-info h2,p{
    padding: 2%;
}


.news-left-info p{
    font-size: 90%;
}

/*News right */

.news-right{
    display: flex;
    flex-direction: column;
}

.news-right img{
    width: 10rem;
}

.news-right h4{
    font-size: 140%;
}

.news-right button{
    background: none;
    border: 0;
}

.news-right a{
    text-decoration: none;
}

.orientation, .campus, .guest {
    display: flex;
    border: 1px solid var(--lighter-grey);
    padding: 2%;
}

.guest{
    background-color: var(--lighter-grey);
}

.orientation-info, .campus-info, .guest-info {
    padding: 0 5%;
    margin-top: 4%;
    font-size: 80%;
}

.orientation-info > *, .campus-info > *, .guest-info > * {
    padding: 2% 0;
}

.orientation-left-mobile, .campus-left-mobile, .guest-left-mobile{
    display: none;
}

/* Start Learning Section */
.sl-container{
    background-color: var(--lightest-grey);
    padding: 32px;
}

.sl-container h1{
    text-align: center;
    color: var(--dark-grey);
    padding: 2%;
}

/**** Start learning grid ****/
.sl-grid-wrapper{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 5%;
    padding: 32px 0px 64px;
}

.sl-grid-wrapper img{
    width: 100%;
}

/**** Start learning individual card****/
.sl-grid-wrapper > *{
    display: flex;
    flex-direction: column;
}

.sl-info{
    background-color: #fff;
    padding: 5%;
    height: 50%;
}
.sl-info > *{
    padding: 3% 0;
}

.sl-info > p{
    font-size: medium;
    color: var(--light-grey);
}

.sl-mobile {
    display: none;
}

/* 
Thesis exhibit section 
*/
.thesis-container{
    padding: 32px 0px;
}

.thesis-container > h1{
    color: var(--dark-grey);
    text-align: center;
    padding: 2%
}

.thesis-grid{
    display: grid;
    grid-template-columns: 3fr 2fr;
}


/*Urban Container*/
.urban-container{
    display: flex;
    flex-direction: column;
    padding: 32px 3% 0px
}

.urban-video video{
    width: 100%;
}

.urban-info{
    padding: 1% 0 0 0;
}

.urban-info > *{
    padding: 1% 0;
}

.urban-info > p{
    font-size: 16px;
    color: var(--dark-grey);
}

.urban-info h4{
    font-size: 24px;
}


/*Other thesis part*/
.other-thesis-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 32px;
}

.other-thesis-container img {
    width: 10rem;
}

.other-thesis-container p{
    font-size : small;
    color: var(--dark-grey);
}

.other-thesis-container h4{
    font-size: 24px;
}

.fisma, .now-and-then{
    display: flex;
    padding: 5%;
}

.fisma{
    background-color: var(--lighter-grey);
}

.fisma-info, .nt-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fisma-info > *, .nt-info>* {
    padding: 1%;
    margin: 5% 8%;
}

/*Footer*/
footer{
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--light-grey);
}

footer > * {
    font-size: 15px;
    margin-top: 0;
    padding-top: 0.5%;
}


footer ul{
    display: flex;
    list-style: none;
}

footer a{
    text-decoration: none;
    color: var(--dark-grey);
}

footer li{
    padding: 0 1em;
}



/**Mobile responsivenss**/
 @media only screen and (max-width: 580px) {
    /*Navigation bar*/
    nav > .logo, nav > ul{
        display: none;
    }

    .mobile-nav {
        display: flex;
        align-items: center;
        grid-gap: 70%;
        margin: 2% 3%;
        justify-content: space-between;
    }

    /* Hero secction*/
    .hero-container{
        flex-direction: column;
        padding: 0 0 5% 0;
    }

    .hero-container img{
        width: 100%;
    }

    .hero-right button{
        background-color: var(--light-grey);
        border: none;
        font-size: 100%;
        width: 100%;
    }

    /*News section*/
    .news-left{
        display: none;
    }

    .news-container{
        grid-template-columns: 1fr;
    }

    .news-right > *{
        display: flex;
        flex-direction: column;
        font-size: 120%;
    }
    
    .orientation-left-desktop, .campus-left-desktop, .guest-left-desktop{
        display: none;
    }

    .news-right img{
        width: 100%;
    }

    .orientation-left-mobile, .campus-left-mobile, .guest-left-mobile{
        display: inline;
    }

    .guest{
        background-color: #fff;
    }

    /*Start learning section*/
    .sl-container{
        background-color: #fff;
    }

    .sl-grid-wrapper{
        display: grid;
        grid-template-columns: 1fr;
        grid-row-gap: 4px;
    }

    .sl-info{
        background-color: var(--lightest-grey); 
    }

    /*Thesis exhibit section*/
    .urban-info, .other-thesis-container{
        display: none;
    }

    .thesis-grid{
        grid-template-columns: 1fr;
    }

        /* Footer section */
        footer {
            padding: 10% 0 2%;
        }
    
        footer ul {
            display: none;
        }
    
        footer p {
            font-size: 100%;
        }
}