/* --- Resets: ----------------------------------------------------------------
------------------------------------------------------------------------------- */

/* --- All: -------------------------------------------------------------------
------------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	text-underline-offset: 3px;
	padding: 0;
}

*:not(dialog),
*::before,
*::after {
	margin: 0;
	margin-block: 0;
}

/* --- Images: ----------------------------------------------------------------
------------------------------------------------------------------------------- */
img {
	max-width: 100%;
}

/* --- Lists: -----------------------------------------------------------------
------------------------------------------------------------------------------- */
ol,
ul,
menu {
	list-style-type: none;
}

/* --- General elements: ------------------------------------------------------
------------------------------------------------------------------------------- */
:root {
    font-family: system-ui;
}

body{
    position: relative;
    min-height: 100vh;
    font-size: 20px;
    font-weight: 200;
}

/* --- The logo-section: ------------------------------------------------------
------------------------------------------------------------------------------- */
.logo {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    position: fixed;
    top: -15rem;
    left: -15rem;

    aspect-ratio: 1 / 1;
    width: 30rem;
    transform: rotate(-45deg);
    background-color: hsl(225, 73%, 57%);
}
.page-title {
    padding: 15px;
    font-size: 3rem;
    font-weight: 200;
    color: hsl(0, 0%, 100%);
}

/* --- The <header>-section: --------------------------------------------------
------------------------------------------------------------------------------- */
header {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    height: 21.21rem;
}

/* --- The <nav>-section: -----------------------------------------------------
------------------------------------------------------------------------------- */
.main-menu ul {
    display: flex;
    flex-direction: row;
}
.main-menu__item {
    padding: .25rem 2rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: border-color .5s ease;
}
.main-menu__item:hover {
    border-bottom-color: black;
}