* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

:root {
    --primary-color: #7FD1B9;
    --secondary-color: #463c3b;
    --accent1-color: #ECE2D0;
    --accent2-color: #D3A588;
}

header,
main,
footer {
    font-size: medium;
}

#course-title {
    display: block;
    width: 100%;
    background-color: var(--primary-color);
    padding: 1rem;
    font-size: 40px;
    font-weight: bolder;
    text-align: center;
    color: var(--secondary-color);
    border: 4px solid rgb(0 0 0 / 0.2);
    text-shadow: 2px 2px 3px var(--accent2-color);
}

header nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: var(--secondary-color);
}

header nav a {
    color: var(--accent1-color);
    padding: 20px;
    font-size: 20px;
    border: 4px solid rgb(0 0 0 / 0.2);
}

header nav a:hover {
    background-color: var(--primary-color);
    text-decoration: overline;
}

.card1 {
    border: 4px solid rgb(0 0 0 / 0.2);
    width: 80%;
    margin: 50px 0px 50px 50px;
    justify-self: right;
}

h1{
    justify-self: center;
    width: 80%;
    margin: 50px 0px 0px 50px;
    justify-self: right;
    text-shadow: 2px 2px 3px var(--secondary-color);
}

.card1 h2,
.card2 h2 {
    background-color: var(--primary-color);
    color: var(--accent2-color);
    padding: 20px;
    text-shadow: 2px 2px 3px var(--secondary-color);
}

.profile {
    margin: 10px;
    border: 4px solid rgb(0 0 0 / 0.2);
    max-width:inherit;
}

section p {
    margin: 15px;
    text-align: left;
}

.flag {
    width: 300px;
    height: auto;
    margin: 10px;
    border: 4px solid rgb(0 0 0 / 0.2);
}

.card2 {
    
    border: 4px solid rgb(0 0 0 / 0.2);
    width: 60%;
    margin: 50px;
    height: 90%;
    min-height:fit-content;
    justify-self: left;
}

.card2 nav{
    display: grid;
    flex-direction: column;
}

.card2 nav a{
    padding: 45px 15px;
}

.card2 nav a:hover {
    background-color: var(--primary-color);
    text-decoration: overline;
}

footer {
    background-color: var(--primary-color);
    padding: 1rem;
    font-weight: 700;
}

div{
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px
}

h3{
    text-decoration: underline;
}