@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', monospace;
}
html,body{
    display: flex;
    flex: 1;
    height: 100%;
}

main{
    width: 100%;
}

.UpperPortfolio{
    display: flex;
    text-decoration: none;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 10%;
    width: 100%;
    background-color:  whitesmoke;
    transition: 0.5s;

}

.UpperPortfolio h1{
    text-align: center;
    font-size: 3em;
    color: #031B50;
    transition: 0.5s;
}

.UpperPortfolio:hover{
    background-color: #031B50;
    transition: 0.5s;

}

.UpperPortfolio h1:hover{
    color: whitesmoke;
    transition: 0.5s;
}


.thefourdivs{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    height: 100%;
    transition: 0.5s;

}

.musicdiv{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 45%;
    background-color: #031B50;
    transition: 0.5s;
}

.photoandvideodiv{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 45%;
    background-color: #0c3a74;
    transition: 0.5s;

}

.webdiv{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 45%;
    background-color: #116daa;
    transition: 0.5s;
}

.gamediv{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    height: 45%;
    width: 50%;
    background-color: #4899C4;
    transition: 0.5s;
}

.musicdiv h1,
.webdiv h1,
.gamediv h1{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    letter-spacing: -2px;
    font-size: 3.5em;
    color: white;
    font-weight: 700;
    text-align: center;
    transition: 0.5s;
}

.photoandvideodiv h1{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    line-height: 7.5vh;
    letter-spacing: -2px;
    font-size: 3.5em;
    color: white;
    font-weight: 700;
    text-align: center;
    transition: 0.5s;
}

.musicdiv h1:hover{
    letter-spacing: 10px;
    color: #031B50;
    transition: 0.5s;
}
.photoandvideodiv h1:hover{
    letter-spacing: 10px;
    color: #0c3a74;
    transition: 0.5s;
}

.webdiv h1:hover{
    letter-spacing: 10px;
    color: #116daa;
    transition: 0.5s;
}

.gamediv h1:hover{
    letter-spacing: 10px;
    color: #4899C4;
    transition: 0.5s;
}

.musicdiv:hover
{
    border:3vh solid #031B50;
    background-color: whitesmoke;
    cursor: pointer;
    transition: 0.5s;
}
.photoandvideodiv:hover
{
    border:3vh solid #0c3a74;
    background-color: whitesmoke;
    cursor: pointer;
    transition: 0.5s;
}
.webdiv:hover
{
    border:3vh solid #116daa;
    background-color: whitesmoke;
    cursor: pointer;
    transition: 0.5s;
}
.gamediv:hover
{
    border:3vh solid #4899C4;
    background-color: whitesmoke;
    cursor: pointer;
    transition: 0.5s;
}

footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 2vh;
}

.copyrightText{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content:  center;
    width: 100%;
    font-size: 0.75em;

}

@media only screen and (max-width: 900px){

    .UpperPortfolio h1{
        font-size: 2em;
        color: white;
    }


    .thefourdivs{
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .musicdiv,
    .photoandvideodiv,
    .webdiv,
    .gamediv{
        width: 100%;
        height: 22.5%;

    }

    .musicdiv h1,
    .photoandvideodiv h1,
    .webdiv h1,
    .gamediv h1{
        line-height: 6vh;
        font-size: 2.5em;
    }

}


@media only screen and (max-width: 375px){

    .musicdiv h1,
    .photoandvideodiv h1,
    .webdiv h1,
    .gamediv h1{

        font-size: 2em;
    }

    .UpperPortfolio h1{
        font-size: 1.5em;
        color: white;
    }

}