body{
    font-family: 'Courier New', Courier, monospace;
    background-image: url(/P/bg_icons/face.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    opacity: 0.785;

}
* a{
    text-decoration: none;
    color: #000000;
}
* a:hover{
    color: #000000;
   
}
header{
    columns: 3;
    column-gap: 10px;
    column-rule: 1px solid #000000;
    column-span: all;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    font-style: bold;
    
}
h1{
    text-align: inherit;
    font-weight: 400;
    font-family: 'Courier New', Courier, monospace;
}
sub{
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
}
h2{
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    font-family: 'Courier New', Courier, monospace;
}
.home-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: blueviolet dotted 3px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 18px;
  }

  .home-button:hover {
    background-color: #4cbbb9c7;
    border: dotted 2px darkmagenta;
    
  }
.nav1{
    display: block;

    -ms-flex-align: center;

    list-style-type: none;

}
.nav1 ul li{
    display: inline-block;
    border: #21084ee0 solid 3px;
    border-radius: 25px;
    background-color: #ffffff;
    padding: 10px;
    margin: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 25px;
    font-style: normal;
    font-weight: 800;
    text-align: center;
}
.nav1 li:hover{

    box-shadow: #d5a4e9 5px 5px 5px;
    background-color:#d5a4e9; 
    color: hsl(0, 0%, 0%);
    font-weight: 500;
    text-decoration: underline;
}

.hearts{
  background-color: rgb(202, 118, 206);
    color: #000000;
}
.hearts:hover{
    background-color: #ffffff;
    color: rgb(129, 27, 100);
    text-transform: uppercase;
}
.korr{
    background-color: #000000;
    color: #ffffff;
}
.korr:hover{
    background-color: #ffffff;
    color: #000000; 
}   
.strange{
    background-color: #91d89a;
    color: #000000; 
}
.strange:hover{
    background-color: #000000;
    color: #91d89a;
}
.tile{
    background-color: #f1c25c;
    color: #a55200;
}
.tile:hover{
    background-color: #fffd86;
    color: #000000;
}
.container{
    display: block;
    align-items: center;
    
    writing-mode: horizontal-tb;
    font-family: 'Courier New', Courier, monospace;
    list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: #ffffff;
    font-size: 15px;
}
h3{ 
        font-family: 'Courier New', Courier, monospace;
        font-size: 11px;
        font-weight: 400;
}

.footercontainer{
    display: inline-block;
    block-size: auto;
    writing-mode: horizontal-tb;
    font-family: 'Courier New', Courier, monospace;
    list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: #ffffff;
    font-size: 15px;
}
.dropdown{ 
    float: inline-end;
    margin: 1px;
    padding: 5px;
}
.qr{
    float: inline-start;
    margin: 1px;
    padding: 10px;

}
footer {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
}