/* Header styling */
header {
    /* Sets background image to the left with a purple color overlay it also repeats the image all along the top */
    background: url(https://github.com/Suukhii/Oslomet-website/blob/master/media/OsloMet_Logo.png?raw=true) left purple;
    /*The image is just the oslometlogo could not find anyone to give credit*/
    /* Sets text color to whitesmoke, centers text within the header and adds padding */
    color: whitesmoke;
    text-align: center;
    padding: 10px;
}

/* Body styling */
body {
    /*sets margin and resets padding*/
    margin: 5px;
    padding: 0;
    /* Specifies font family and size for the body text */
    font-family: Impact, 'Arial Narrow Bold', sans-serif;
    font-size: medium;
    /*linear gradient from purple to white */
    background: linear-gradient(to bottom, purple, whitesmoke);
}

/* Sets the styling for all the headers together */
h1, h2, h3 {
    /* Specifies font family, size, and italic style for heading elements */
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 2rem;
    font-style: italic;
    -webkit-text-stroke: 1px gray;/* Adds a gray stroke around text */
    text-align: center;
}

/* Main styling */
main {
    /* Sets maximum width, margin, and padding then left alligns all the text */
    max-width: 100%;
    margin: 10px;
    padding: 0;
    text-align: left;
}

/* Grid container styling */
.grid-container {
    /* Creates a grid layout 4 colums and 2 rows*/
    display: grid;
    gap: 20px;
    grid-template-columns: auto 40vw auto 10vw;
    grid-auto-rows: auto auto;
    /* Makes the backgroud image the image of the campus entrance */
    padding: 10px;
    background: blanchedalmond url(https://github.com/Suukhii/Oslomet-website/blob/master/media/InngangOsloMet.jpg?raw=true) center / cover;
    /*found at: https://www.oslomet.no/om/nyheter/handelshoyskolen-doktorgradsprosjekt-offentlig fotograf ikke oppgitt*/
    /* repositions the picture */
    height: auto;
    position: relative;
}

/* Grid item styling */
.griditem {
    /* Sets background color with transparency, text color, border, padding, and shadow for all the articles and pictures */
    background-color: rgba(245, 253, 255, 0.95);
    color: black;
    border: 2px solid yellow;
    padding: 10px;
    /* Aligns text to the left, avoids column breaks, and adds outline and shadow */
    text-align: left;
    break-inside: avoid-column;
    outline: 2px solid white;
    font-family: 'Roboto', sans-serif;
    font-size: large;
    box-shadow: 5px 10px rgba(255, 255, 255, 0.01);
}
.item2 {
    /* Specifies the picture in column 2 sets the picture as a css background and postions it */
    grid-column: 2 / span 2;
    grid-row: 1;
    background: blanchedalmond url(https://github.com/Suukhii/Oslomet-website/blob/master/media/Studenter.jpg?raw=true) center / cover;
    /*fotograf vova130555@gmail.com*/
    position: relative;
    text-align: left;
    color: gray;
}
img {
    /* Standard size for the rest of the images  */
    max-width: 400px;
    max-height: fit-content;
}

/* Navigation styling */
nav ul {
    /* Removes standard list styling from the nav element */
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    /* pushes the list left */
    float: left;
}

nav a {
    /* Displays navigation links as block elements with specified styles */
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    /* Adds a smooth background color transition on hover */
    transition: background-color 0.3s;
}

nav a:hover {
    /* Changes background color on hover */
    background-color: #FBDC01;
}
/* Responsive design: Adjusting width for articles on small screens */
@media only screen and (max-width: 900px) {
    .griditem {
        width: 100%;
    }
}