/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.links {
    ul {
        list-style-type: none;
            
        li a {
            /* color: rgb(90, 67, 105); */
            color: rgb(79, 46, 154);
        }
    }
}

/* grid */
.grid {
    display: grid;
    grid-template-areas:
    "update quote"
    "update main"
    "gif main"
    "gif main"
    "todo main"
    "blinkies blinkies";
    grid-template-columns: 1fr 3fr;
    /* grid-template-rows: 1fr 1fr 3fr 3fr 1fr 1fr; */
    gap: 10px 8px;
    & > div {
        background-color: #ced0cb98;
        padding: 15px;
        /* border: 2px solid rgb(82, 80, 83);
        padding: 10px; */
        font-size: 17px;
    }

    & > div.update {
        grid-area: update;
        div {
            max-height: 150px;
            overflow-y: scroll;
            scrollbar-color: rgb(91, 44, 111) #816792;
        }    
    }
    & > div.quote {
        grid-area: quote;
        div {
            border-left: 5px solid rgb(182, 179, 183);
            padding-left: 10px;
        }
    }
    & > div.gif {
        grid-area: gif;
    }
    & > div.todo {
        grid-area: todo;
    }
    & > div.main {
        grid-area: main;
        max-height: 700px;
        overflow-y: scroll;
        scrollbar-color: rgb(91, 44, 111) #816792;
    }
    & > div.blinkies {
        grid-area: blinkies;
        display: flex;
        max-width: 1500px;
        overflow-x: scroll;
        scrollbar-color: rgb(91, 44, 111) #816792;
    }
}

.flex-container {
    display: flex;
    /* justify-content: space-between; */
    & > div {
        padding: 10px;
        margin: 5px;
        position: relative;
        
    }
}

.flex-horizontal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    & > div > a > img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.boxed {
    border: 2px solid rgb(82, 80, 83);
    padding: 10px;
    background-color: rgb(172, 160, 160);
    /* border-style: none, none, dotted, none; */
}

.gallery {
    display: flex;
    padding: 0 4px;

}

.col {
    flex: 50%;
    max-width: 50%;
    padding: 0 4px;

    img {
        vertical-align: middle;
        margin: 5px;
    }
}


section {
    border-bottom: 4px dotted rgb(82, 80, 83);
}

body {
    background-image: url(/images/purple-background.jpg);
    margin: 80px 180px;
    font-family: 'Times New Roman', Times, serif;
}

header {
    position: relative;
    text-align: center;
    height: 150px;
    background-image: url(/images/header.jpg);
    background-size: cover;
    background-position: center;
    & > div {
        background-color: aliceblue;
        & > h1 {
            font-size: 35px;
        } 
    }
}

/* nav bar */
nav {
    ul {
        list-style-type: none;
        position: sticky;
        top: 0;
        bottom: 0;
        padding: 0;
        overflow: hidden;
        background-color: #1d1a1a;
    }

    ul li {
        float: left;
        
    }

    ul li a {
        display: block;
        color: rgb(233, 233, 233);
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 20px;
    }

    /* Change the link color to #111 (black) on hover */
    ul li a:hover {
        background-color: #111;
    }
}

footer {
    color: white;
    a {
        color: white;
    }
    
}

a {
    color: rgb(79, 46, 154);
}