main {
    
     display:grid;
    grid-template-areas: 
    "sec1 sec2 sec3 sec4";
    width: 100%;
}

body {
    background-color: rgb(31, 31, 31);
}


nav {
    position:sticky;
    top:0;
    display: flex;
    justify-content: space-evenly;
    background-color:rgb(131, 131, 131);
    padding:10px;
    border-radius: 25px; 
    border:white solid 3px;
}

p {
    color:white;
    font-size: 1em
}

h1 {
    color:white;
    text-decoration: underline;
    text-align: center;
    font-size: 7vw;
}

div {
    background-color:rgb(66, 66, 66);
    border-radius: 25px;
    padding:10px;
    margin: 15px;
    border:white solid 3px;
}

h2 {
    color:white;
    font-size: 3em;
    text-align: center;
}

#Section1 {
    grid-area: sec1 ;
}
#Section2 {
    grid-area: sec2;
}
#Section3 {
    grid-area: sec3;
}
#Section4 {
    grid-area: sec4;
}

.toplinks {
    margin-top: 10px;
    text-decoration:none;
    color: rgb(61, 61, 61);
    font-weight:bolder;
    font-size: 2vw;
}

#images {
    display:flex;
    justify-content: center;
}


@media screen and (max-width:599px) {
    main {
        grid-template-areas: 
        "sec1"
        "sec2"
        "sec3"
        "sec4";
        
    }

    #images {
        display:none;
    }
}

@media screen and (min-width:600px) and (max-width:1199px) {
    main {
        grid-template-areas: 
        "sec1 sec2"
        "sec3 sec4"
    }

    #secondguy::before {
        display:none;
    }
}