* {
    padding: 0;
    margin: 0;
}

html {
    background-color: #f7f7f5;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

header {
    display: flex;
    justify-content: space-between;

    padding: 1rem;
}

img#logo-shifter {
    width: 10rem;
}

h1 {
    width: 50%;
    color: #080349;
}

p {
    color: #080349;
    margin: 1rem;
}

header div.header-blank {
    width: 10rem;
}

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

details {
    background-color: rgb(255, 255, 255);
    color:rgb(24, 48, 102);
    border-radius: 7px;
    width: 45vw;
    padding: 10px;
    margin: 1rem;
    min-width: 20rem;
    cursor: pointer;

    display: flex;
    flex-direction: column;

    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.15);
}

summary {
    user-select: none;
}

div.pdf {
    margin-left: 1rem;
}

a.iphone-hidden {
    display: none;
}

.hidden {
    color: transparent;
}

main > p {
    max-width: 70rem;
}

@media (width < 1100px) {
    header div.header-blank {
        display: none;
    }
}

@media (width < 700px) {
    header {
        flex-direction: column;
    }
}

@media (width < 500px) {
    h1 {
        width: 100%;
    }

    details {
        width: 80vw;
    }
}