@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&family=Parkinsans:wght@300..800&family=Permanent+Marker&display=swap');

html, body {
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

html::-webkit-scrollbar, 
body::-webkit-scrollbar {
    display: none;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; 
    justify-content: space-around; /* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/justify-content */
    background-color: #1a4eb6;
}

header {
    background-color: #1a4eb6;
}

header a {
    display: block;
    color: aliceblue;
    padding: 12px 14px;
    text-decoration: none;
    text-align: center;
    justify-content: space-around; /* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/justify-content */
}

footer a {
    color: #C9C9C9;
}

a:hover {
    background-color: #b4bcd2;
    color:#4b6bba;
    border-radius: 10px;
}

header a:hover {
    background-color: #1a4eb6;
}

body {
    font-family: Parkinsans, sans-serif;
    max-width: 1000px;
    padding: 0;
    margin: 0 auto;
    padding: 0 15px;
}

/* footer was copied from the header in the online new.css to extend the borders to the edges of the screen */

/* this is why we used the unexpected calc function and 'vw', 'rem' */
footer {    
	background: #1a4eb6;
	color: white;
	padding: 2rem 1.5rem;
	margin: 0 calc(50% - 50vw);
	padding-left:  calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

/* image right next to text: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display */
.image-text {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

/* how to center an image: https://www.w3schools.com/css/css3_image_center.asp */
.center {
    display: block;
    margin: auto;
}

fieldset {
    border: 4px solid black;
}

/* transition for box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition */
img {
    transition: box-shadow 0.3s ease-out;
    transition: transform 0.25s ease;
    margin: 10px;
    border: 20px;
    outline: none;
    width: 50%;
    max-width: 100%;
    height: 50%;
    max-height: 100%;
}

img:hover {
    box-shadow:
        0 0 30px #d5ecff67,
        0 0 60px #296aec56,
        0 0 1000px #2260db57;
}

img.zoom {
    transform: scale(1.02);
}

p, li, b {
    line-height: 1.7;
    font-size: 20px;
}

textarea {
    resize: none;
}

button {
    background-color: #2375D1;
}

@media (max-width: 666px) {
    nav ul {
        flex-direction: column;
        align-items: stretch;
    }

    header a {
        text-align: center;
        padding: 6px 0;
    }

    header a:last-child {
        border-bottom: none;
    }

    .image-text {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}