html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 18vh; /*Originall 25vw*/
}

.first-content-container, .second-content-container, .third-content-container, .fourth-content-container {
    padding-left: 10vw; /*15vw*/
    padding-right: 10vw; /*10, 15vw*/
    display: flex;
    flex-wrap: wrap-reverse; 
    min-height: 300px; /*300px*/

    justify-content: space-between;
}

.second-content-container, .fourth-content-container {
    flex-wrap: wrap;
}

.first-text-container, .second-text-container, .third-text-container, .fourth-text-container {
    height: auto;/*300px*/
    padding: 3vw; /*50px*/
    width: 50%; /*calc(300px + 20vw)*/
}

.profile-pic-container video, .second-pic-container video, .third-pic-container video, .fourth-pic-container video {
    /*centres vertically*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);

    width: calc(100px + 12.5vw); /*300px/20vw originally*/
    height: calc(100px + 12.5vw);/*100px + 10vw*/
    border-radius: 50%; 
    overflow: hidden; /* Ensures image doesn't overflow the circle */
}


@media (max-width:800px) {
    .first-content-container, .second-content-container, .third-content-container, .fourth-content-container {
        justify-content: center;
    }

    .first-text-container, .second-text-container, .third-text-container, .fourth-text-container {
        width: 90%; /*Can alter this to 80 or 100*/
        margin-bottom: 10px;
    }

    body {
        margin-bottom: 20vh; /*Originall 25vw*/
    }
}

.profile-pic-container, .second-pic-container, .third-pic-container, .fourth-pic-container { 
    padding: 2.5vw; /*50px*/
}


.fourth-content-container {
    padding-bottom: 30px;
}

.second-content-container, .fourth-content-container {
    background-color: #51ff93; 
}

/*FONT SIZES*/

.first-text-container h1 {
    font-size: calc(1.8em + 1vw); /*2vw + 1vw*/
}

.first-text-container h2, .second-text-container h2, .third-text-container h2, .fourth-text-container h2 {
    font-size: calc(1.4em + 0.25vw); /*1.5em*/
}

.first-text-container h3, .second-text-container h3, .third-text-container h3, .fourth-text-container h3 {
    font-size: calc(1em + 0.25vw); /*1.5em*/
}

.first-text-container p, .second-text-container p, .third-text-container p, .fourth-text-container p {
    font-size: calc(0.75em + 0.25vw); /*1em*/
}

/*CONTENT EDITS*/

/*Tool and dev buttons*/
.tool-btn-1, .tool-btn-2, .tool-btn-3, .tool-btn-4, .tool-btn-5,
.dev-btn-1, .dev-btn-2, .dev-btn-3, .dev-btn-4, .dev-btn-5, .dev-btn-6, .dev-btn-7, .dev-btn-8 {
    background-color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 10px 5px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    color:black;    /*font-size: calc(0.75em + 0.25vw); /*1em*/
  
}

.tool-btn-1:hover {
    background-color: #8dd3c7;
}

.tool-btn-2:hover {
    background-color: #ffffb3;
}

.tool-btn-3:hover {
    background-color: #bebada;
}

.tool-btn-4:hover {
    background-color: #fb8072;
}

.tool-btn-5:hover {
    background-color: #80b1d3;
}

.dev-btn-1:hover {
    background-color: #fdb462;
}

.dev-btn-2:hover {
    background-color: #b3de69;
}

.dev-btn-3:hover {
    background-color: #fccde5;
}

.dev-btn-4:hover {
    background-color: #d9d9d9;
}

.dev-btn-5:hover {
    background-color: #bc80bd;
}

.dev-btn-6:hover {
    background-color: #ccebc5;
}

.dev-btn-7:hover {
    background-color: #ffed6f;
}

.dev-btn-8:hover {
    background-color: #8dd3c7;
}