@import url(general.css);

.static__example{
    position: static;
}

.relative__example-left {
    position: relative;
    left: 10px;
}

.relative__example-top {
    position: relative;
    top: 10px;
}

.relative__example-right {
    position: relative;
    right: 10px;
}

.fixed__example-middle-right {
    position: fixed;
    bottom: 13%;
    padding-left: 10px;
    padding-right: 10px;
    width: 250px;
    background-color: var(--secondary-button);
    z-index: 1;
}

.absolute__example-parent {
    position: relative;
    height: 80px;
    border: 1px solid;
}

.absolute__example {
    position: absolute;
    left: 100px;
}

.sticky__example-top {
    position: sticky;
    bottom: 0;
}

.menu-btn-position, .menu-btn-position:hover {
    background-color: var( --primary-button);
    color: var(--secondary-button);
}

@media screen and (max-width: 400px) {
    .absolute__example {
        min-width: 140px;
    }
}

@media screen and (max-width: 600px) {
    .absolute__example {
        left: 100px;
    }
}