:root {
    --text-color: #0d0d0d;
    --link-color: #0d0d0d;
    --background-color: #C9DBFF;
    --border-color: #FFFFFF;
    --content-background-color: #C6D9F2;
    --column-variable: 2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 1.041666667vw;
}

body {
    font-family: 'Shantell Sans', sans-serif;
    font-weight: 400;
    background-color: var(--background-color);
    background-image: url('images/Background_Image.png');
    background-size: 100vw;

    display: flex;
    justify-content: center;
    gap: 2.083333333vw;

    max-width: 100%;
    margin-top: 5.5vh;
}

h1, h2, p, ul, h3, a {
    font-weight: normal;
}

h1 {
    font-size: 2.4rem;
}

h2 {
    font-size: 1.8rem;
}

p, a, ul {
    font-size: 1rem;
}



.portcontent {
    /* Set up background for all portfolio content */
    background-color: var(--content-background-color);
    outline: var(--border-color) solid 0.8333333333vw;
    border-radius: 1.5vw;
    height: 40vw; /* Tested it out until I was happy. Don't worry, Denis. There was no math behind this...*/
}




/* CSS for Quick Info */
#qkinfo {
    /* Set up the body */
    width: 18.75vw;

    /* Set up the content */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#qkinfo p, #qkinfo a {
    width: 12.45vw;
    margin-top: 2.3vh;
}

#qkinfo h3 {
    margin-top: 2.3vh;
}

#qkinfo img {
    margin-top: 5.1vh;
    width: 13.95833333vw;
}

img {
    border-radius: 1.67vw;
}




/* CSS for Design Content */
#designcontent {
    /* Set up the body */
    width: 54vw;

    /* Set up the content */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;

    /* Hide the scrollbar */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
}

#designcontent::-webkit-scrollbar {
    /* Hide the scrollbar */
    display: none;
}

#designcontent h1, #designcontent h2, #designcontent p {
    width: 46.7vw;
}

#designcontent h1 {
    margin-top: 5.1vh;
}

#designcontent h2, #designcontent video {
    margin-top: 2.2vh;
}

#designcontent p {
    margin-top: 1.4vh;
}

#designcontent video {
    border-radius: 1.3vw;
}

.music {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 34.5vw;
    margin-top: 15px;
}

.gallery {
    margin-top: 1.4vh;
    display: grid;
    grid-template-columns: repeat(var(--column-variable), 1fr);
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.gallery img {
    width: 18.22916667vw;
}

#doublecolumn {
    grid-column: 1/3;
    justify-self: center;
    width: 36.45833334vw;
}

#ending {
    margin-bottom: 5vh;
}



/* CSS for About Me */
#aboutme {
    /* Set up the body */
    width: 54vw;

    /* Set up the content */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;

    /* Hide the scrollbar */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
}

#aboutme h1, #aboutme h2, #aboutme p {
    width: 46.7vw;
}

#aboutme h1 {
    margin-top: 5.1vh;
}

#aboutme h2 {
    margin-top: 6vh;
}

#aboutme p, #aboutme img {
    margin-top: 1.4vh;
}

#smallimage {
    height: 13vw;
}

#mediumimage {
    height: 16vw;
}

#largeimage {
    height: 23vw;
}


/* CSS for Exit button*/
#exitbutton {
    width: 6.041666667vw;
    height: 3.75vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

#exitbutton a {
    font-size: 2.5rem;
}