@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=block');


:root {
    --main-bg-color: rgb(61, 124, 199);
    --light-color: rgb(210, 223, 241); 
  }

  body {
    margin:0px;
    padding: 0px;
}

.whole {
    padding-bottom: 50px;
}

.primary-image {
    margin-top:30px;
    height:60vh;
    object-fit: cover;
    max-width: 100%;
}

.primary-image-section {
    display:flex;
    flex-direction: column;
    flex-grow:0;
    align-items: left;
}

.first-name {
    font-family: 'Nunito', sans-serif;
    font-size: 20vw;
    color: var(--light-color);
    align-items: center;
    text-align: center;
    margin-top:0px;
}
.middle-last-name {
    font-family: 'Nunito', sans-serif;
    font-size: 6vw;
    color: var(--light-color);
    align-items: center;
    text-align: center;
    margin-top:-20px;
}


.time {
    font-family: 'Nunito', sans-serif;
    font-size: 4.5vw;
    color: var(--light-color);
    text-align: center;
}

.weight {
    font-family: 'Nunito', sans-serif;
    font-size: 4.5vw;
    color: var(--light-color);
    text-align: center;
    margin-left: 20px;
}

.name-and-details-section {
 display:flex;
 flex-direction: column;
 flex-grow: 1;
 align-items: center;
 justify-content: center;
 padding-bottom:30px;
}

.details-section {
    margin-top: 10px;
    display:flex;
    direction: row;
}

#frame1 {
    background-color: var(--main-bg-color);
    height: 90vh;
    padding:0px;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.contents {
    padding:0px;
    display:flex;
    flex-direction: column;
    width:100%;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.photoframe {
    background-color: white;
    padding-top:25px;
    align-items: center;
    display:flex;
    justify-content: center;
    width:100%;
    clear:both;
    padding-bottom:25px;
}

.photoframecontents {
    display:flex;
    width:85%;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
}

.gimage {
    width:100%;
    margin-top:25px;
    margin-bottom:25px;
}

.port {
    object-fit: contain;
}

.frame1-2 {
    width: 100%;
    background-color: white;
    font-family: 'Nunito', sans-serif;
    font-size: 4vw;
    color: var(--main-bg-color);
    text-align: center;
    margin: 0px;
}

.frame2-3 {
    width: 100%;
    background-color: white;
    font-family: 'Nunito', sans-serif;
    font-size: 4vw;
    color: var(--main-bg-color);
    text-align: center;
    margin: 0px;
}


/* TABLETS etc */
@media (min-width: 576px) {


.first-name {
    font-family: 'Nunito', sans-serif;
    font-size: 16vw;
    color: var(--light-color);
    align-items: center;
    text-align: center;
    margin-top:0px;
}
.middle-last-name {
    font-family: 'Nunito', sans-serif;
    font-size: 4vw;
    color: var(--light-color);
    align-items: center;
    text-align: center;
    margin-top:-20px;
}


.time {
    font-family: 'Nunito', sans-serif;
    font-size: 3vw;
    color: var(--light-color);
    text-align: center;
}

.weight {
    font-family: 'Nunito', sans-serif;
    font-size: 3vw;
    color: var(--light-color);
    text-align: center;
    margin-left: 20px;
}

}

/* SMALL DESKTOP */
@media (min-width: 768px) { 

    .first-name {
        font-family: 'Nunito', sans-serif;
        font-size: 12vw;
        color: var(--light-color);
        align-items: center;
        text-align: center;
        margin-top:0px;
    } 

    .middle-last-name {
        font-family: 'Nunito', sans-serif;
        font-size: 4vw;
        color: var(--light-color);
        align-items: center;
        text-align: center;
        margin-top:-20px;
    }
    
    
    .time {
        font-family: 'Nunito', sans-serif;
        font-size: 2.5vw;
        color: var(--light-color);
        text-align: center;
    }
    
    .weight {
        font-family: 'Nunito', sans-serif;
        font-size: 2.5vw;
        color: var(--light-color);
        text-align: center;
        margin-left: 20px;
    }
}


/* DESKTOP */
@media (min-width: 992px) { 

    body {
        margin:0px;
        padding: 0px;
    }

    .primary-image {
        height:100vh;
        width:75vh;
        margin-top:0px;
        /*border:20px solid var(--light-color);*/
    }

    .primary-image-section {
        display:flex;
        flex-direction: column;
        flex-grow:0;
        align-items: left;
    }

    .first-name {
        font-family: 'Nunito', sans-serif;
        font-size: 16vw;
        color: var(--light-color);
        align-self: center;
    }
    .middle-last-name {
        font-family: 'Nunito', sans-serif;
        font-size: 3.5vw;
        margin-top:-50px;
        color: var(--light-color);
        align-self: center;
        text-align: center;
    }

    .time {
        font-family: 'Nunito', sans-serif;
        font-size: 2vw;
        color: var(--light-color);
        align-self: center;
        text-align: center;
    }

    .weight {
        font-family: 'Nunito', sans-serif;
        font-size: 2vw;
        color: var(--light-color);
        align-self: center;
        text-align: center;
    }

    .name-and-details-section {
     display:flex;
     flex-direction: column;
     flex-grow: 1;
     align-items: center;
     justify-content: center;
    }

    .details-section {]
        display:flex;
        margin-top: 50px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #frame1 {
        background-color: var(--main-bg-color);
        height: 100vh;
        padding:0px;
        display:flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .contents {
        padding:0px;
        display:flex;
        flex-direction: row;
        width:100%;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
    }

    .photoframe {
        background-color: white;
        padding-top:50px;
        clear:both;
    }

    .photoframecontents {
        display:flex;
        width:100%;
        flex-wrap:wrap;
        align-items: center;
        justify-content: center;
    }

    .gimage {
        height:100vh;
        object-fit: cover;
        width:100%;
        margin-top:50px;
        margin-bottom:50px;
    }

    .port {
        object-fit: contain;
    }

}


@media (min-width: 1200px) { 

    body {
        margin:0px;
        padding: 0px;
    }

    .primary-image {
        height:100vh;
        width:75vh;
        margin-top:0px;
        /*border:20px solid var(--light-color);*/
    }

    .primary-image-section {
        display:flex;
        flex-direction: column;
        flex-grow:0;
        align-items: left;
    }

    .first-name {
        font-family: 'Nunito', sans-serif;
        font-size: 16vw;
        color: var(--light-color);
        align-self: center;
    }
    .middle-last-name {
        font-family: 'Nunito', sans-serif;
        font-size: 3.5vw;
        margin-top:-50px;
        color: var(--light-color);
        align-self: center;
        text-align: center;
    }

    .time {
        font-family: 'Nunito', sans-serif;
        font-size: 2vw;
        color: var(--light-color);
        align-self: center;
        text-align: center;
    }

    .weight {
        font-family: 'Nunito', sans-serif;
        font-size: 2vw;
        color: var(--light-color);
        align-self: center;
        text-align: center;
    }

    .name-and-details-section {
     display:flex;
     flex-direction: column;
     flex-grow: 1;
     align-items: center;
     justify-content: center;
    }

    .details-section {]
        display:flex;
        margin-top: 50px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #frame1 {
        background-color: var(--main-bg-color);
        height: 100vh;
        padding:0px;
        display:flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .contents {
        padding:0px;
        display:flex;
        flex-direction: row;
        width:100%;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
    }

    .photoframe {
        background-color: white;
        padding-top:50px;
        clear:both;
    }

    .photoframecontents {
        display:flex;
        width:100%;
        flex-wrap:wrap;
        align-items: center;
        justify-content: center;
    }

    .gimage {
        height:100vh;
        object-fit: cover;
        width:100%;
        margin-top:50px;
        margin-bottom:50px;
    }

    .port {
        object-fit: contain;
    }

}