* {
    
    margin: 0;
    padding: 0;
    
}

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



nav {
    display: flex;
    justify-content: space-between;
    justify-items: center;
    align-items: center;
    padding: 1%;
}

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);
}

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

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

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

.mobile-nav {
    display: none;
}


.hero-container {
    background-color: var(--lighter-grey);
    display: flex;
    padding: 5% 3%;
}

.hero-container button {
    background-color: var(--dark-grey);
    width: 100%;
    height: 3rem;
    cursor: pointer;
    color: white;
}

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

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

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

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

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



.news-left {
    display: flex;
    flex-direction: column;
    padding: 2%;
}

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

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

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

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



.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%;
}

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

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

.guest {
    background-color: var(--lighter-grey);
    margin: 0 0 2% 0;
}


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


.sl-container {
    background-color: var(--lightest-grey);
    padding: 2% 5% 8% 5%;
}

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


.sl-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 2%;
}

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



.sl-grid-wrapper > * {
    display: flex;
    flex-direction: column;
}

.sl-info {
    background-color: white;
    padding: 5%;
}

.sl-info > * {
    padding: 3% 0;
}

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

.sl-mobile {
    display: none;
}


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

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



.urban-container {
    display: flex;
    flex-direction: column;
    padding: 0 3%;
}

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

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

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

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


.other-thesis-container {
    display: flex;
    flex-direction: column;
}

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

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

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

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

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

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


footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--light-grey);
    margin-bottom: 1%;
}


footer li {
    padding: 0 1em;
}


/* Mobile responsiveness */


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

    .mobile-nav {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        align-items: center;
        grid-gap: 100%;
        margin: 2% 0;
    }

   
    .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%;
    } 

    
    .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: white;
    }

   
    .sl-container {
        background-color: white;
    }

    .sl-grid-wrapper {
        display: none;
    }

    .sl-mobile {
        display: flex;
        flex-direction: column;
    }

    .sl-mobile > * {
        background-color: var(--lightest-grey);
        color: var(--dark-grey);
        height: 5rem;
        margin: 1%;
        text-decoration: none;
    }

    .sl-mobile h1 {
        padding: 5%;
    }

    
    .urban-info, .other-thesis-container {
        display: none;
    }

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

    
    footer {
        padding: 10% 0 2%;
    }

    footer ul {
        display: none;
    }

    footer p {
        font-size: 100%;
    }
    
}