:root {
    --storm-blue: #173a67;
}

html{
    scrollbar-width: thin;
    scrollbar-color: var(--storm-blue) transparent;
    overflow-x: hidden;
}

html::-webkit-scrollbar {
    width: 8px; 
}

html::-webkit-scrollbar-track {
    background: var(--storm-blue);
}

html::-webkit-scrollbar-thumb {
    background-color: var(--storm-blue);
    border-radius: 10px;
    border: 2px solid transparent;
}

.bloglist{
    scrollbar-width: thin;
    scrollbar-color: var(--storm-blue) transparent;
    overflow-x: hidden;
}

.bloglist::-webkit-scrollbar {
    width: 8px; 
}

.bloglist::-webkit-scrollbar-track {
    background: var(--storm-blue);
}

.bloglist::-webkit-scrollbar-thumb {
    background-color: var(--storm-blue);
    border-radius: 10px;
    border: 2px solid transparent;
}

body {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

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

.nav{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    z-index: 8;
    width: 100%;
    background-color: var(--storm-blue);
    position: fixed;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    display: flex;
    flex-direction: row;
}

.navbuttonscontainer{
    width: 93%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.navbutton{
    text-align: center;
    width: 9%;
    padding-right: 10px;
    padding-left: 10px;
    height: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto';
}

.navbutton:hover{
    transition: 0.1s all;
    background-color: #102949;
    border-bottom: solid white;
    cursor: pointer;
}

.hamburger-icon {
    display: none;
    height: 40px;
    width: auto;
    margin: 5px;
    box-sizing: border-box;
}


.tooltip-topnav {
    display: none;
    position: absolute;
    bottom: -200px;
    right: 10px;
    background-color: #444444d3;
    padding: 10px;
    border-radius: 5px;
    height: 200px;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
}

.tooltipitem{
    color: white;
    font-family: Ubuntu, Arial;
    border-bottom: 1px solid white;
    align-items: center;
    font-size: 22px;
    height: 40px;
    width: 170px;
    font-weight: bold;
    display: flex;
    cursor: pointer;
    text-decoration: none;
}

.tooltipitem:hover{
    background-color: #2c2c2cd3;
}

.tooltipitem a{
    width: 100%;
    color: white;
    text-decoration: none;
}

.navfiller{
    width: 100%;
    background-color: var(--storm-blue);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    display: flex;
    flex-direction: row;
}

.videocontainer{
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.videocontainer video {
    position: relative;
    z-index: 1;
    pointer-events: none;
}


.mainbodycontainer{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.subcontentcontainer{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.subsubcontentcontainer{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: 0px;
}

.sponsorcontainer{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    flex-direction: column;
    width: 100%;
}

.sponsorsubcontainer{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    flex-direction: row;
    width: 100%;
}

.subsubcontenttitle{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: 0px;
}

#aboutus{
    scroll-margin-top: 100px;
}

.bloglist{
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 90%;
    overflow-y: auto;
    height: 400px;
    border: 1px solid black;
    border-radius: 5px;
}

.bloglink{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    width: 80%;
    height: 600;
    border: 1px solid black;
    border-radius: 5px;
    flex-direction: column;
}

.bloglink:hover{
    background-color: rgb(247, 247, 247);
    cursor: pointer;
}

.table{
    width: 90%;
    font-family: 'Roboto';
    border-collapse: collapse;
}

.left{
    border-right: 1px solid black;
    font-family: 'Roboto';
    text-align: center;
    width: 30%;
}

tr{
    border-top: 1px solid black;
}

.right{
    border-left: 1px solid black;
    width: 70%;
    font-family: 'Roboto';
    text-align: center;
}

.videowrapper{
    width: 80%;
    aspect-ratio: 16 / 9;
}

.videowrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 900px){
    .awardlist{
        margin-bottom: 40px;
    }
    .hamburger-icon{
        display: block;
            height: 40px;
        width: auto;
        margin: 5px;
        box-sizing: border-box;
    }

    .subcontentcontainer{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .subsubcontentcontainer{
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        margin: 0px;
        flex-direction: column;
    }

    .subsubcontenttitle{
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        margin: 0px;
    }

    .navbutton{
        display: none;
    }

    .sponsorsubcontainer{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        flex-direction: column;
        width: 100%;
    }

    .videowrapper{
        width: 90%;
        aspect-ratio: 16 / 9;
    }
}