:root {
    /* Declare global variables */
    --c_purple: #5B29FF;
    --c_purple_pastel: #D1D1FF;
    --c_purple_light: #C6BDFF;
    --c_purple_dark: #4700B3;
    --c_blue: #0044FF;
    --c_blue_pastel: #B8E0FF;
    --c_blue_light: #73E8FF;
    --c_blue_dark: #003ADB;
}

*{
    box-sizing: border-box;
}

body {
    font-family: Arial;
    padding: 10px;
    background: var(--c_purple_pastel);
}

h1 {
    font-size: 4vh;
}

h2 {
    font-size: 2.4vh;
}

h3 {
    font-size: 2vh;
    margin: 1vh;
}

h4 {
    font-size: 1.5vh;
    margin: 1vh;
}

h5 {
    font-size: 1.25vh;
    margin: 1vh;
}

/* Header/Blog Title */
.header {
    padding: 1vh;
    text-align: center;
    background-color: var(--c_purple_light);
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: var(--c_purple);
    border-bottom-left-radius: 2.5vh;
    border-bottom-right-radius: 2.5vh;
    flex-wrap: wrap;
}

/* Style the topnav links */
.topnav a, .topnav label {
    float: left;
    display: block;
    color: white;
    text-align: center;
    /* padding: 14px 16px; */
    text-decoration: none;
}
.topnav a {
    padding: 3vh 2vw;
}
/* Change color on hover */
.topnav a:hover {
    background-color: var(--c_purple_light);
    color: var(--c_purple_dark);
}

.topnav .container {
    max-width: 20%;
    height: 100%;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
    float: left;
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    /* min-width: fit-content; */
    align-items: center;
    justify-content: center;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 30%;
    display: flex;
    flex-wrap: wrap;
    /* min-width: fit-content; only on store?? */
    /* background-color: #f1f1f1; */
    padding-left: 20px;
    height: fit-content;
    align-items: center;
    justify-content: center;
}

/* Fake image */
.fakeimg {
    background-color: var(--c_purple_light);
    width: 100%;
    padding: 20px;
}

img, video {
    border-radius: 3vh;
}

/* header image */
img.header-logo {
    max-height: 15vh;
}

/* icon images */
.img-icon {
    max-width: 5vh;
    max-height: 5vh;
    border-radius: 1vh;
}

.container-icon-label {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.container-icon-label > * {
    display: inline-flex;
    margin-left: 1vh;
    margin-right: 1vh;
}

.header > .container:first-of-type {
    max-width: 25%;
    justify-self: left;
}
.header > .container:last-of-type {
    max-width: 75%;
    justify-self: left;
}

/* Add a card effect for articles */
.card {
    background-color: white;
    padding: 1vh;
    margin-top: 3vh;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4vh;
    min-width: fit-content;
}

.card.subcard {
    margin-top: 0;
}

.header.card {
    border-radius: 2.5vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.container {
    flex: 1;
    margin: 0px;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100%;
    min-width: fit-content;
}

.column {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex; 
    flex-direction: row;
    width: 100%;
    min-width: fit-content;
}

.container > .card:first-of-type {
    margin-top: none;
}

/* Clear floats after the columns 
.row:after {
    content: "";
    display: table;
    clear: both;
}
*/
/* Footer */
.footer {
    padding: 1vh;
    text-align: center;
    background: var(--c_purple_light);
    margin-top: 20px;
    border-radius: 2.5vh;
}

.footer > h4, h5 {
    padding: 0;
    margin: 1vh;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        /* padding: 0; */
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}

/* input container 
    margin-top: 3vh;
    */
.container-input {
    padding: 1vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.container-input > label {
    width: 100%;
    margin-bottom: 1vh;
    margin-top: 0;
}

.container-input:not(:nth-child(3)) > label {
    margin-top: 1vh;
}

.container-input > input, .container-input > textarea {
    border: 2px solid var(--c_purple);
    max-width: 50%;
    min-width: 40%;
    padding: 1vh;
}

.label-title {
    width: 100%;
}

button, .btn-submit, input[type="submit"] {
    font-size: 20px;
    font-weight: bold;
    border: 4px solid;
    border-radius: 2vh;
    padding: 1vh 2vh 1vh 2vh;
    margin: 0.5vh;
    background-color: var(--c_blue_pastel);
    color: var(--c_blue_dark);
    border-color: var(--c_blue_dark);
}

/* Overlay modal */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 999;
}