main.css

body
{
    margin: 0;
    height: 400vh;
    font-family: 'Montserrat', sans-serif;
    color: white;
    background: black;
}

.grid-container
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr repeat(16, 4fr) ;
    height: 400vh;
    grid-template-areas: "header header header header header ic"
                         "vs cs cst cst cst cst"
                         "vs cs cst cst cst cst"
                         "vs ct ct ct ct c"
                         "vs ct ct ct ct c"
                         "control g g g g g"
                         "control gt gt gt gt gt"
                         "languages languages languages languagesImg languagesImg languagesImg"
                         "languages languages languages languagesImg languagesImg languagesImg"
                         "p1 p1 p2 p2 p3 p3"
                         "p4 p4 p5 p5 p6 p6"
                         "aP aP aP aP aP aP"
                         "xp xp xp xpT xpT xpT"
                         "xp xp xp xpT xpT xpT"
                         "ed1 ed1T ed2 ed2T ed3 ed3T"
                         "ed4 ed4T . . . ."
                         "ft ft ft ft ft ft";
}

header
{
    grid-area: header;
    font-size: x-large;
}

section.icons
{
    grid-area: ic;
    justify-self: right;
}

img
{
    width: 200px;
}
img.map
{
    width: 1000px;
}
img.net
{
    width: 700px;
}
img.icon
{
    width: 40px;
}

section.VisualStudio
{
    grid-area: vs;
    place-self: center;
}

section.CSharp
{
    grid-area: cs;
    justify-self: left;
    align-self: center;
}

section.CSharpText
{
    grid-area: cst;
    justify-self: left;
    align-self: center;
    font-size: xx-large;
}

section.Cplusplus
{
    grid-area: c;
    justify-self: center;
    align-self: center;
}

section.CplusplusText
{
    grid-area: ct;
    justify-self: right;
    align-self: center;
    font-size: xx-large;
}

section.VersionControl
{
    grid-area: control;
    place-self: center;
}

section.Git 
{
    grid-area: g;
    justify-self: center;
    align-self: center;
}

section.GitText
{
    grid-area: gt;
    justify-self: center;
    align-self: start;
    font-size: xx-large;
    text-align: center;
}

section.Languages
{
    grid-area: languages;
    justify-self: center;
    align-self: center;
    font-size: xx-large;
}
section.LanguagesImg
{
    grid-area: languagesImg;
    place-self: center;
}
section.project1
{
    grid-area: p1;
    font-size: medium;   
    place-self: center;
}

section.project2
{
    grid-area: p2;
    font-size: medium;
    place-self: center;
}
section.project3
{
    grid-area: p3;
}
section.project4
{
    grid-area: p4; 
}
section.project5
{
    grid-area: p5; 
}
section.project6
{
    grid-area: p6; 
}
section.aP
{
    grid-area: aP;
    justify-self: center;
    align-self: center;
}
section.experience
{
    grid-area: xp;
    justify-self: center;
    align-self: center;
}
section.experienceText
{
    grid-area: xpT;
    justify-self: left;
    align-self: center;
    font-size: xx-large;
}

section.edu1
{
    grid-area: ed1;
    justify-self: center;
    align-self: center;
}
section.edu1T
{
    grid-area: ed1T;
    justify-self: left;
    align-self: center;
    font-size: large;
}

section.edu2
{
    grid-area: ed2;
    justify-self: center;
    align-self: center;
}
section.edu2T
{
    grid-area: ed2T;
    justify-self: left;
    align-self: center;
    font-size: large;
}

section.edu3
{
    grid-area: ed3;
    justify-self: center;
    align-self: center;
}
section.edu3T
{
    grid-area: ed3T;
    justify-self: left;
    align-self: center;
    font-size: large;
}

section.edu4
{
    grid-area: ed4;
    justify-self: center;
    align-self: center;
}
section.edu4T
{
    grid-area: ed4T;
    justify-self: left;
    align-self: center;
    font-size: large;
}
footer
{
    grid-area: ft;
    align-self: flex-end;
    font-size: large;
}
button
{
    background: rgb(11, 11, 56);
    color: #ccc;
    width: 240px;
    height: 80px;
    border: 1px solid rgb(41, 41, 95);
    font-size: 18px;
    border-radius: 4px;
    transition: .6s;
    overflow: hidden;
}

button.b2
{
    background: rgb(68, 68, 71);
    color: #ccc;
    width: 1080px;
    height: 80px;
    border: 1px solid rgb(101, 101, 104);
    font-size: 18px;
    border-radius: 4px;
    transition: .6s;
    overflow: hidden;
}

button:focus
{
    outline: none;
}


button:hover
{
    background: rgb(41, 41, 95);
    cursor: pointer;
}

button.b2:hover
{
    background: rgb(68, 68, 71);
    cursor: pointer;
}

button:hover::before
{
    transform: translateX(300px) skewX(-15deg);
    opacity: .6;
    transition: .7s;
}

button:hover::after
{
    transform: translateX(300px) skewX(-15deg);
    opacity: 1;
    transition: .7s;
}

@media (max-width: 1440px)
{
    header
    {
        font-size: x-large;
    }
    img
    {
        width: 150px;
    }
    img.map
    {
        width: 600px;
    }
    img.net
    {
        width: 400px;
    }
    img.icon
    {
        width: 30px;
    }
    section.CSharpText
    {
        font-size: x-large;
    }
    section.CplusplusText
    {
        font-size: x-large;
    }
    section.GitText
    {
        font-size: x-large;
    }
    section.Languages
    {
        font-size: x-large;
    }
    section.project1
    {
        font-size: small;
    }
    section.project2
    {
        font-size: small;
    }
    section.experienceText
    {
        font-size: x-large;
    }
    section.edu1T
    {
        font-size: medium;
    }
    section.edu2T
    {
        font-size: medium;
    }
    section.edu3T
    {
        font-size: medium;
    }
    section.edu4T
    {
        font-size: medium;
    }
    footer
    {
        font-size: medium;
    }
    button
    {
        width: 200px;
        height: 60px;
        font-size: 16px;
    }
    button.b2
    {
        width: 720px;
        height: 60px;
        font-size: 16px;
    }
}

@media (max-width: 1080px)
{
    header
    {
        font-size: large;
    }
    img
    {
        width: 100px;
    }
    img.map
    {
        width: 400px;
    }
    img.net
    {
        width: 200px;
    }
    img.icon
    {
        width: 20px;
    }
    section.CSharpText
    {
        font-size: large;
    }
    section.CplusplusText
    {
        font-size: large;
    }
    section.GitText
    {
        font-size: large;
    }
    section.Languages
    {
        font-size: large;
    }
    section.project1
    {
        font-size: x-small;
    }
    section.project2
    {
        font-size: x-small;
    }
    section.experienceText
    {
        font-size: large;
    }
    section.edu1T
    {
        font-size: small;
    }
    section.edu2T
    {
        font-size: small;
    }
    section.edu3T
    {
        font-size: small;
    }
    section.edu4T
    {
        font-size: small;
    }
    footer
    {
        font-size: small;
    }
    button
    {
        width: 160px;
        height: 40px;
        font-size: 14px;
    }
    button.b2
    {
        width: 480px;
        height: 40px;
        font-size: 14px;
    }
}

@media (max-width: 768px)
{
    .grid-container
    {
    grid-template-rows: 1fr repeat(18, 4fr) ;
    grid-template-areas: "header header header header header ic"
                         "vs cs cst cst cst cst"
                         "vs cs cst cst cst cst"
                         "vs ct ct ct ct c"
                         "vs ct ct ct ct c"
                         "control g g g g g"
                         "control gt gt gt gt gt"
                         "languages languages languages languagesImg languagesImg languagesImg"
                         "languages languages languages languagesImg languagesImg languagesImg"
                         "p1 p1 p1 p2 p2 p2"
                         "p3 p3 p3 p4 p4 p4"
                         "p5 p5 p5 p6 p6 p6"
                         "aP aP aP aP aP aP"
                         "xp xp xp xpT xpT xpT"
                         "xp xp xp xpT xpT xpT"
                         "ed1 ed1T ed1T ed2 ed2T ed2T"
                         "ed3 ed3T ed3T ed4 ed4T ed4T"
                         ". . . . . ."
                         "ft ft ft ft ft ft";
    }
    header
    {
        font-size: medium;
    }
    img
    {
        width: 50px;
    }
    img.map
    {
        width: 170px;
    }
    img.net
    {
        width: 150px;
    }
    img.icon
    {
        width: 20px;
    }
    section.CSharpText
    {
        font-size: medium;
    }
    section.Cplusplus
    {
        justify-self: left;
    }
    section.CplusplusText
    {
        font-size: medium;
    }
    section.GitText
    {
        font-size: medium;
    }
    section.Languages
    {
        font-size: medium;
    }
    section.project1
    {
        font-size: xx-small;
    }
    section.project2
    {
        font-size: xx-small;
    }
    section.experienceText
    {
        font-size: medium;
    }
    section.edu1T
    {
        font-size: x-small;
    }
    section.edu2T
    {
        font-size: x-small;
    }
    section.edu3T
    {
        font-size: x-small;
    }
    section.edu4T
    {
        font-size: x-small;
    }
    footer
    {
        font-size: x-small;
    }
    button
    {
        width: 120px;
        height: 20px;
        font-size: 12px;
    }
    button.b2
    {
        width: 360px;
        height: 20px;
        font-size: 12px;
    }
}