h1 {
    font-family: 'Arial';
}

/*regular text*/
p {
    font-family: 'Arial';
}

/*link formatting*/
* {
    a:link {
      color: black;
      background-color: transparent;
      text-decoration: none;
    }
    a:hover {
      color: red;
      background-color: transparent;
      text-decoration: none;
    }
    a:visited {
      color: black;
      background-color: transparent;
      text-decoration: none;
    }
}

/*light text*/
.lighttext{
    
    a:link {
        color: lightgray;
        background-color: transparent;
        text-decoration: none;
    }
    
    a:hover {
        color: gray;
        background-color: transparent;
        text-decoration: none;
    }
    
    a:visited {
        color: lightgray;
        background-color: transparent;
        text-decoration: none;
    }
    
    padding: 15px;
}

/*page formatting*/
.page {
    display: flex;
    flex-flow: row wrap;
}

div.gallery {
    display: flex;
    flex-flow: column;
}

div.page {
    font-family: 'Arial';
    margin: 20px;
    padding: 20px;
}

.sidebar {
    display: flex;
    flex-direction: column;
    flex-flow: column;
    margin: 20px 60px 20px 0;
}

.mainbody {
    display: flex;
}



/*dropdowns*/
.dropdown {
    position: relative;
    padding: 15px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 200%;
    overflow: auto;
    margin-top: -20px;
    margin-left: 50px;
    padding: 12px 16px;
    box-shadow: 4px 6px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
    color: red;
}

.listitem {
    padding-top: 5px;
    padding-bottom: 5px;
}


@media (max-width: 725px) {
    .sidebar {
    flex-direction: row;
    }
    
    .dropdown-content {
        margin-top: 2px;
        margin-left: 0;
    }
    
    .gallery {
        width: 100%;
    }
}