main {
    text-align: center;
}

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#container p {
    font-size: 20px;
}

#project-navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    scale: 1;
}
#project-navigation > a {
    color: white;
    text-decoration: none;
    padding: 0px 40px 0px 40px;
    font-size: 2em;
}
#project-navigation a:hover {
    color: rgb(207, 207, 207);
    transform: scale(1.3);
    transition: transform 0.5s ease;
}


.side-by-side, .side-by-side-square {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.side-by-side img {
    margin: 0px 10px 0px 10px;
    width: 45%;
}
.side-by-side-square img {
    margin: 0px 10px 0px 10px;
    width: 30%;
}

.tech-used {
    background-color: rgb(88, 88, 90);
    border-radius: 15px;
    padding: 0px 20px 0px 20px;
}

/*fading in elements*/
#container p, 
#container img,
#container #tech-div {
    opacity: 0;
    margin-top: 5px;
    transition: opacity 0.5s ease-in, margin-top 0.3s ease-in;
}

#container p.load,
#container img.load,
#container #tech-div.load {
    opacity: 1;
    margin-top: 0px;
}

/*setting the widths of SINGLE images that are square*/
.smaller {
    width: 20%;
}
.larger {
    width: 40%;
}

/*apply to SINGLE images that are wider (eg. whole screen width)*/
.img-wide {
    width: 50%;
}

@media screen and (max-width: 700px) {
    .side-by-side {
        flex-direction: column;
        align-items: center;
    }
    .side-by-side img {
        margin: 10px 0px 10px 0px;
        width: 80%;
    }

    #container p {
        font-size: 3vw;
    }

    #container img {
        width: 80%;
    }

    /*makes smaller square image fill screen better in narrower resolutions*/
    .img-square {
        width: 70%;
    }
}

@media only screen and (max-width: 900px) {
    #project-navigation > h1 {
        font-size: 2.5vw;
    }
    #project-navigation > a {
        font-size: 2.5vw;
    }
}

/*set font size relative to screen width when under 1000px, otherwise keep same*/
@media screen and (max-width: 1000px) {
    #container > h1 {
        font-size: 5vw;
    }
    .tech-used > h3 {
        font-size: 3vw;
    }
}