/*Generic Styles*/
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.center {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    justify-content: center; /*horrizontal*/
    align-items: center; /*vertical*/
    text-align: center;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
}


/*Dropdown Button Styles*/
.dropbtn {
    background-color: rgba(0, 0, 0, 0);
    border: none;
}

.dropdown {
    position: absolute;
    display: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #F1F1F1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

.hbline {
    display: block;
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

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

.dropdown:hover .dropbtn {
    background-color: #ddd;
}


/*Header Styles*/
.header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #D3D3D3;
    padding: 10px;
    z-index: 1;
}

.footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: #D3D3D3;
    /*background-color: red;*/
    z-index: 1;
}

.socials {
    text-decoration: none;
    font-size: 0;
}

.row-content {
    color: black;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 14px;
    line-height: 40px;
    border-radius: 4px;
}

.row2 a:hover {
    background-color: #ddd;
    color: black;
}

.row2 .active {
    background-color: dodgerblue;
    color: white;
}


/*Desktop View Styles*/
.desktopview {
    margin: 10px;
    margin-bottom: 60px;
}

.dv-container {
    display: grid;
    grid-template-areas:
        'row1 row1 row1 row1 row1'
        'row2col1 row2col2 row2col3 row2col4 row2col5'
        'row3col1 row3col2 row3col3 row3col4 row3col5';
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /*background-color: lightblue;*/
}

.dv-container .dv-item{
    text-align: center;
}

.dv-row1 {
    grid-area: row1;
    /*background-color: red;*/
}

.dv-row2col1 {
    grid-area: row2col1;
    /*background-color: orange;*/
}

.dv-row2col2 {
    grid-area: row2col2;
    /*background-color: yellow;*/
}

.dv-row2col3 {
    grid-area: row2col3;
    /*background-color: lightgreen;*/
}

.dv-row2col4 {
    grid-area: row2col4;
    /*background-color: blue;*/
}

.dv-row2col5 {
    grid-area: row2col5;
    /*background-color: purple;*/
}

.dv-row3col1 {
    grid-area: row3col1;
    /*background-color: darkorange;*/
}

.dv-row3col2 {
    grid-area: row3col2;
    /*background-color: darkgoldenrod;*/
}

.dv-row3col3 {
    grid-area: row3col3;
    /*background-color: green;*/
}

.dv-row3col4 {
    grid-area: row3col4;
    /*background-color: navy;*/
}

.dv-row3col5 {
    grid-area: row3col5;
    /*background-color: mediumvioletred;*/
}


/*Animation Desktop View Styles*/
.a-dv-container {
    display: grid;
    grid-template-areas:
        'col1 col2';
    grid-template-columns: min-content auto;
    height: calc(100% - 300px);
    overflow: hidden;
    /*background-color: lightblue;*/
}

.a-dv-container .a-dv-item {
    text-align: center;
}

.a-dv-col1 {
    /*background-color: pink;*/
}

.a-dv-col2 {
    /*background-color: yellow;*/
}



/*Small Desktop Layout*/
@media screen and (max-width: 1600px) {
    .dv-container {
        grid-template-areas:
            'row1 row1 row1'
            'row2col2 row2col3 row2col4'
            'row3col2 row3col3 row3col4';
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dv-row2col1 {
        display: none;
    }

    .dv-row2col5 {
        display: none;
    }

    .dv-row3col1 {
        display: none;
    }

    .dv-row3col5 {
        display: none;
    }
}


/*Mobile View Styles*/
/**@media screen and (max-width: 768px) and (orientation: portrait) {
    .dropdown {
        display: block;
    }

    .row2 {
        display: none;
    }
}*/