@charset "utf-8";
/* CSS Document */

html {
    width: 100%;
    height: 100%;
}

body {
    background-color: oldlace;
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 3vw;
    box-sizing: border-box;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* Header */

header {
    margin-top: 2vh;
    margin-bottom: 22vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

section {
    margin-top: calc(0.5vh + 5pt);
    margin-bottom: 4vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 95%;
	flex-wrap: wrap;
	gap:2vh;
}


/* Links */

a {
    text-decoration: none;
}

a:hover {
    cursor: pointer;
}


/* Logo */

#logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 3vw, 2rem);
    width: 100%;
    max-width: 100%;
}


/* Allow logo images to shrink */

#logo img {
    min-width: 0;
    flex-shrink: 1;
}

.photo-of-me {
	display: flex;
	width: calc(90% + 3pt);
	justify-content: center;
	margin-bottom: calc(4vh + 5pt);
}


/* Animated logo */

.gif-image {
    width: 20%;
    max-width: 80px;
    height: auto;
}

.award-icon {
	max-height: 120px;
	width: auto;
	border-radius: 50%;
	background-color:#3D004C;
	padding: calc(0.1vw + 8pt);
}

.social-image {
	max-width: 110px;
	border-radius:15%;
	padding: calc(0.1vw + 6pt);
	background-color:#3D004C;
	margin-bottom: 3vh;
}

/* SVG logotype */

#logo img:last-child {
    width: 80%;
    max-width: 400px;
    height: auto;
    display: block;
}


/* Main content links */

#centre-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 3vw, 2rem);
    margin: 7vh 0 7vh;
    width: 100%;
    flex-flow: wrap;
}


/* Content GIFs */

.large-gif-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 20px;
}


.text-container,
#bottom-paragraph {
	font-size:calc(95% + 4pt);
	font-family:Mukta Mahee, sans-serif;
	page-break-after: auto;
	width: calc(88% + 25pt);
	margin: 0.5vh 0 auto;
	line-height:1.5;
}

.section-title {
	font-size:calc(180% + 5pt);
	font-weight:600;
	color:#3D004C;
	font-family:Merriweather Sans, sans-serif;
	margin-top: 1.8vh;
}

#jackal-photo {
	max-width: 99%;
}

#opening-paragraph {
	margin-bottom: 0vh;
}

#made-it-award {
	border-radius:0;
}

#derby-uni-award {
	border-radius:0;
}

#bottom-paragraph {
	margin-bottom: 10vh;
}

#instagram-link {
	border-radius:20%;
}

/* Narrow screens */

@media (max-width: 500px) {

    #logo {
        flex-direction: column;
    }

}