/*background*/
body {
    background-image: url('/resources/images/global/backgroundTile.jpg');
    background-repeat: repeat;
    background-size: auto;
}

.myContainer{
    max-width: 1000px;
}

/*header*/
.myBanner {
    margin-bottom:10px;
    border: #3c311d solid 5px;
    border-radius: 10px;
    font-size: 1rem;
}

/*navbar*/
.myNav {
    background-color: #3c311d95;
    border:#3c311d solid 5px;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* nav button text*/
.navButton a {
    color:#d7caba;
    text-shadow: 0 0 5px #3c311d;
    font-family: 'lexend',Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    text-decoration: none;
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    transition: color 0.3s ease;
}

/*nav button things*/
.navButton{
    background-color: #3c311d95;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    display: flex;
    border:#3c311d solid 5px;
}

.navButton:hover{
    background-color: #d7caba95;
}

.navButton a:hover{
    color:#babaab;
}

/* contact details*/
.container.contacts{
    background-color: #3c311d95;
    border:#3c311d solid 5px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.container.contacts p{
    color:#d7caba;
    text-shadow: 0 0 5px #3c311d;
    font-family: 'lexend',Arial, Helvetica, sans-serif;
    font-size:1.2rem;
    text-align: center;
    margin:0;
}

.container.contacts b{
    color:#babaab;
    background-color:#3c311d95;
    border-radius: 5px;
    padding: 0 5px;
}

/* page contents */
.pageContent{
    background-color: #3c311d95;
    border:#3c311d solid 5px;
    border-radius: 10px;
}
/*main page png*/
.pantySniffer {
    max-width: 75%;
    padding: 20px 0px 0px 10px;
}

@media (max-width:771px) {
    .pantySniffer{
        max-width:100%;
    }
}

/*header that says links*/
.linksText {
    text-align:center;
    font-family: 'luckyBlues',Arial, Helvetica, sans-serif;
    color:#d7caba;
    text-shadow: 0 0 10px #3c311d;
    font-size: 5rem;
    
}

/*actual links*/
.linkButton{
    background-color: #3c311d95;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    margin:3px;
    border:#3c311d solid 5px;
    padding:0;
}

.linkButton a {
    color:#d7caba;
    text-shadow: 0 0 5px #3c311d;
    font-family: 'lexend',Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    text-decoration: none;
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    transition: color 0.3s ease;
    margin: 10px;
}

.linkButton:hover{
    background-color: #d7caba95;
    
}

.linkButton a:hover{
    color:#babaab;
}


/*pop up */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #d7caba98;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background-color: #3c311de0;
    border:#000000 solid 5px;
    color:#d7caba;
    text-shadow: 0 0 5px #3c311d;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-family: 'lexend',Arial, Helvetica, sans-serif;
}

.popup-button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
    border:#000000 solid 5px;
    background-color: #d7caba;
    font-family: 'lexend', Arial, Helvetica, sans-serif;
    font-weight: bold;
    transition: 0.4s;
}

.popup-button:hover{
    background-color: #3c311d;
    color: #d7caba;
    border:#d7caba solid 5px;
}