/* 
dear person trying to clean up this file
good luck
i wrote this in order of when i styled the html, not even any meaningful file seperation
but to make life somewhat easier, i added ids to a bunch of elements and didnt use them (oops)
*/


nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
    background: #90B0DB;
	}

	nav li {
		display: inline-block;
	}

	nav li a {
		color: rgb(0, 0, 0);
		display: block;
		padding: 10px 20px;
		text-decoration: none;
		font-size:20px;
	}
    nav li a:hover {
        color: 	#232C4D
    }
    #logo-img {
        vertical-align: middle;
        position: relative;
    }
    nav ul li a span {
        vertical-align: middle;
        position: relative;
    }
    .erica-one-regular {
        font-family: "Erica One", sans-serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: underline;
        text-decoration-color: 	#90B0DB;
        text-decoration-thickness: 10px;
    }
    
    .title {
         font-family: "Google Sans Flex", sans-serif;
         font-optical-sizing: auto;
         font-weight: 750;
         font-style: normal;
         font-variation-settings:
            "slnt" 0,
            "wdth" 100,
            "GRAD" 0,
            "ROND" 0;
        }
    .role {
        font-family: "Google Sans Flex", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        position: relative;
        bottom: 15px;
        font-variation-settings:
            "slnt" 0,
            "wdth" 100,
            "GRAD" 0,
            "ROND" 0;
    }
    .description {
        font-family: "Google Sans Flex", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        position: relative;
        bottom: 20px;
        font-variation-settings:
            "slnt" 0,
            "wdth" 100,
            "GRAD" 0,
            "ROND" 0;
    }    
    .big {
        font-family: "Google Sans Flex", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        position: relative;
        font-variation-settings:
            "slnt" 0,
            "wdth" 100,
            "GRAD" 0,
            "ROND" 0;
        padding: 10px
    }
    .sidebar {
        padding: 5px;
        width: fit-content;
        gap: 15px;
        display: flex;
        margin-top: 5px;
    }
    /* great class name btw*/
    .big {
      font-size: 1.17em;
      font-weight: bold;
      margin: 0;
    }

    #left-sidebar img {
        width: 400px;
        height: auto;
    }
    #left-sidebar {
        background-color: rgb(244,244,244);
        gap: 5px;
        flex: 0 1 auto;
        display: flex;
        flex-direction: column;
        height: fit-content;
        padding: 10px;
    }
    @media (max-width: 800px) {
        .sidebar {
            flex-direction: column;
        }
    }

    @media (max-width: 415px) {
        #left-sidebar img {
            width: 325px;
        }
        .sponsor-img {
            width: 325px;
        }
    }
    
    @media (max-width: 850px) {
        #left-sidebar img {
            width: 325px;
        }
    }
    @media (max-width: 375px) {
        #left-sidebar img {
            width: 315px;
        }
        .sponsor-img {
            width: 315px;
        }
    } 

    #middle-bar {
        margin-bottom: 10px;
        display: flex;
        background-color: rgb(244,244,244);
        flex-direction: column;
        height: fit-content;
    }

    .schedule {
       display: flex;
       flex-direction: column;
       gap: 12px;
    }

    #schedule-text {
        font-size: 1.5em;
        font-weight: bold;
        margin: 0;
        gap: 15px;
    }

    .right-bar {
        display: flex;
        flex-direction: column;
        background-color: rgb(244,244,244);
        height: fit-content;
        width: fit-content;
    }

    .far-right-bar {
        display: flex;
        flex-direction: column;
        background-color: rgb(244,244,244);
        height: fit-content;
    }

    .fa {
        padding: 20px;
        width: 20px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        background: #90B0DB;
        margin-left: 10px;
        margin-bottom: 5px;
        color: 	#121C43;
        margin-right: 10px;
        height: 20px;
    }

    .resource-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .resource-links a:hover {
        color: #5B7099;
    }

    .resource-links a {
        color: #90B0DB;
    }

    #live-meeting-bar {
        display: none;
        background: #5B7099;
        gap: 20px;
        flex-direction: column;
        padding: 5px;
        margin-top: 10px;
    }

    .extra-big {
      font-size: 2.5em;
      gap: 5px;
      font-weight: bold;
      padding-left: 5px;
      margin: 0;
      font-family: "Google Sans Flex", sans-serif;
      font-optical-sizing: auto;
      font-style: normal;
      position: relative;
      font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "ROND" 0;
      padding: 10px
    }

    #meeting-join-link:hover {
        color:	#121C43;        
    }

    #meeting-join-link {
        color: 	#232C4D;
    }

    h1 {
        font-family: "Google Sans Flex", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        position: relative;
        font-variation-settings:
            "slnt" 0,
            "wdth" 100,
            "GRAD" 0,
            "ROND" 0;
        padding: 10px
    }

    .sponsor-img {
        width: 335px;
        height: auto;
        gap: 10px;
        margin-right: 10px;
        margin-left: 10px;
    }

    .sponsors img {
        gap: 15px;
    }