/* Google Font imports */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


/* General styling */

body {
    font-family: "Raleway", sans-serif;
    text-align: center;
}

/* Colour styling */

.colours-headfoot {
    background-color: white;
    color: black;
}

.colours-body {
    background-color: white;
    color: black;
}

.colours-boxes {
    background-color: lightgrey;
    color: black;
}

/* Header styling */

header {
    background-color: white;
}

#logo h1 {
    line-height: 55px;
    font-family: "Zilla Slab", serif;
}

ul.dropdown-menu.show {
    position: absolute;
    left: -145px;
}

#logolink {
    text-decoration: none;
    color: black;
}

/* Main styling */

#introbox h1, #introbox h2 {
    font-size: 170%;
}

#photodesc p {
    font-size: 120%;
}

/* Raise the top and bottom margins of the page to take the fixed header and footer into account */
.betweenhandf {
    margin-top: 30px;
    margin-bottom: 60px;
}

.boxstyling {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 30px 10px;
    margin: auto;
    margin-top: 40px;
    border-radius: 30px;
}

.boxstyling h2 {
    margin-top: 20px;
    background-color: lightgrey;
    padding: 10px;
}

.card {
    margin: 10px;
    border: 1px solid black;
    width: 100%;
}

.card-img-top {
    padding: 10px;
}

.dataheading {
    font-size: 200%;
    display: inline-block;
}

#worklist li, #interests li {
    padding-bottom: 20px;
}

#keyskillsaccordion .accordion-item {
    border-bottom: 0;
}

#interestlist {
    background-color: white;
}

#qualifications, #courses, #personalproject, #groupproject, #employment, #techskills, #personalskills, #interests {
    scroll-margin-top: 75px;
}

#groupproject a, #personalproject a {
    color: black;
}

/* Font Awesome icon styling */

i {
    font-size: 150%;
}

footer {
    background-color: white;
}

footer p {
    margin: 10px 0;
}

/* Media queries for different screen sizes */

@media only screen and (min-width: 577px) {
    
    .carousel-item p {
        width: 70%;
    }

    .boxstyling {
        padding: 30px;
    }

    .card {
        width: 45%;
    }

}

@media only screen and (min-width: 991px) {
    
    ul.dropdown-menu.show {
        position: absolute;
        left: -120px;
    }

    .card {
        width: 31%;
    }

}

@media only screen and (min-width: 1400px) {
    
    .card {
        width: 23%;
    }
}