p{
font-family: "Exo", sans-serif;
    color:aliceblue;
    font-size: 10pt;
    margin: 0;
    padding: 0;
}

a:link{
    font-family: "Exo", sans-serif;
    color: aliceblue;
}

a:hover{
    font-family: "Exo", sans-serif;
    color: aliceblue;
}

a:visited{
    font-family: "Exo", sans-serif;
    color: aliceblue;
}

h1{
font-family: "Exo", sans-serif;
    color:aliceblue;
    font-size: 12pt;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

body{
    background-color: #0e1111;
    margin:0;
}

/* DESKTOP LAYOUT */
@media (min-width: 800px) {
    #main{
        height: min-content;
        min-width: 0;
        max-width: 1000px;
        margin: 8px 0;
        position: static;
        margin-inline: auto;
        margin-top: 75px;
    }

    /* LEFT SIDE */

        #left{
            width: 39%;
            float: left;
            height: min-content;   
        }

        .selfie {
            width: 90%;
            height: auto;
            padding-top: 5%;
            padding-left: 2%;
        }

    /* RIGHT SIDE */

        .right-border{
            border: white;
            border-style: solid;
            border-width: 5px 0px 5px 5px;
            height: 625px;
            overflow-x: hidden; 
            overflow-y: scroll;
            padding:2%;
        }
        
            .right-border::-webkit-scrollbar {
                width: 5px;  
            }

            .right-border::-webkit-scrollbar-track {
                background-color: aliceblue;
            }

            .right-border::-webkit-scrollbar-thumb {
                background-color: rgb(78, 78, 78);
            }
        
        #right{
            width: 59%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: flex-start;
            align-content: flex-start;

        }

        /* FIRST SECTION - mobile hamburger menu*/
            
            .mobile-container{
                display:none;
            }
        
        /* SECOND SECTION - contains NHA banner logo */
            
            #big-ban{
                width: 100%;
            }
            
            .NHA-logo{
                width: 100%;
                height: 140px;
            }
            

        /* THIRD SECTION - contains about and upcoming event banners */

            .info{
                width: 100%;
                height: 215px;
                padding-top: 2%;
                padding-bottom: 1.5%;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-between;
            }

            .about{
                border-width: 3px 3px 3px 3px; 
                border-color: aliceblue;
                border-style: solid; 
                width: 42%;
                height: 180px;
                margin-left:2%;
                padding: 2%;   
            }

            .about-title{
                font-weight: 800;
                text-align: center;
                padding-bottom: 4%;
                font-size: 15pt;
                font-family: "Permanent Marker", sans-serif;
            }
            
            #about-txt{
                margin: 1% 0 0 0;
                padding: 2% 2% 2% 2%;
                width: 95%;
                height: 65%;
                overflow-x: hidden; 
                overflow-y: scroll;
                line-height: 18pt;
            }

                #about-txt::-webkit-scrollbar {
                    width: 2px;
                }

                #about-txt::-webkit-scrollbar-track {
                    background-color: aliceblue;
                }

                #about-txt::-webkit-scrollbar-thumb {
                    background-color: rgb(78, 78, 78);
                }

            .event{
                border: 3px aliceblue;
                border-style: solid; 
                width: 42%;
                height: 180px;
                margin-right: 2%;
                padding: 2%;    
            }

            .event-title{
                font-weight: 800;
                text-align: center;
                padding-bottom: 5%;
                font-size: 15pt;
                font-family: "Permanent Marker", sans-serif;
            }

            .event-txt{
                margin-top: 1%;
                padding: 2%;
                width: 95%;
                height: 65%;
                overflow-x: hidden; 
                overflow-y: scroll;
            }

            .event-txt::-webkit-scrollbar {
                width: 2px;
            }

            .event-txt::-webkit-scrollbar-track {
                background-color: aliceblue;
            }

            .event-txt::-webkit-scrollbar-thumb {
                background-color: rgb(78, 78, 78);
            }

            .event-name{
                padding: 1% 0 5% 7%;
            }

        /* FOURTH SECTION - contains nav images */

        .nav{
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            padding-top: 2%;
        }

        .ico{
            width: 28%;
            height: auto;
            padding: 0 0 5% 0;
        }

        /* FIFTH SECTION- contains mobile about and event sections */

        .aboutM{
                display:none;
            }

        .event-txtM{
            display:none;
        }

        /* SIXTH SECTION- contains social media icons */
        
        #sm{
            width:100%;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            padding: 4% 0 0 0;
        }

        .sm-ico{
            width: 40px;
            padding: 10px;
            padding-bottom: 0px;
            padding-top: 0px;
        }
}

/* MOBILE LAYOUT */
@media (max-width: 799px) {

    #main{
        height: auto;
        min-width: 0;
        max-width: 400px;
        padding:0%;
        margin:1%;
        margin-inline: auto;
    }

    #left{
        display:none;
    }

    /* FIRST SECTION - mobile hamburger menu */

    .mobile-container {
        max-width: auto;
        height:auto;
        margin: auto;
    }

    .topnav {
        height:auto;
        position: relative;
        padding-bottom: 5%;
    }

    .topnav #myLinks {
        display: none;
    }

    .topnav a {
        color: white;
        padding: 2% 0 2% 10%;
        text-decoration: none;
        font-size: 20px;
        font-family: "Exo", sans-serif;
        font-weight: 300;
        display: block;
    }

    .topnav a.icon {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    .active {
        color: white;
    }
    
    /* SECOND SECTION - contains NHA banner logo */
            
    #big-ban{
        width: 100%;
    }
            
    .NHA-logo{
        width: 80%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    } 

    /* THIRD SECTION - nav */

    .nav{
        width: 100%;
        margin-top: 5%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content:space-evenly;
    }
    
    .ico{
        max-width: 35%;
        max-height: auto;
        padding: 3% 2% 4% 2%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* FOURTH SECTION - upcoming events */

    .aboutM{
        width: 80%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto; 
        text-align: justify;
        margin-bottom: 5%;
        margin-top: 5%;
    }

    .about-txtMtitle{
        font-weight: 800;
        text-align: center;
        padding-bottom: 5%;
        font-size: 20pt;
        font-family: "Permanent Marker", sans-serif;
    }

    .about-txtM{
        font-weight: 400;
        font-size: 12pt;
        padding-bottom: 5%;
        line-height: 20pt;
    }

    .info{
        display: none;
    }

    .event-txtM{
        width: 80%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto; 
        text-align: justify;
        margin-bottom: 5%;
        margin-top: 5%;
    }

    .event-txtMtitle{
        font-weight: 800;
        text-align: center;
        padding-bottom: 5%;
        font-size: 20pt;
        font-family: "Permanent Marker", sans-serif;
    }

    .eventM-title{
        font-weight: 600;
        padding: 2% 0 5% 2%;
    }

    .eventM-name{
        font-weight: 400;
    }

    /* FIFTH SECTION - social media */
    #sm{
        width: 100%;
        padding-bottom: 3%;
        padding-top: 3%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .sm-ico{
        width: 10%;
        padding: .5%;
    }
}