body{
    background: #333333;
    color: white;
}
footer {
    position: fixed;
    bottom: 5px;
    right: 10px;
    width: 95%;
    color: white;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%)
}
.centerizer {
    justify-content: center;
    text-align: center;
    font-family: monospace;
}
#copyright-symbol{
    font-size: 20px;
}
.why {
    display: flex;
    flex-direction: column;
    float: right;
    text-align: center;
    margin-right: 6%;
    font-family: monospace;
    font-size: 15px;
}
.why h3{
    margin-bottom: 5px;
}

a {
    color: white;
    text-decoration: none !important;
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
    #myBoard {
        display: none !important; /* Dont display board in smaller screens */
    }
    .why {
        display: flex;
        flex-direction: column;
        text-align: center;
	    margin-right: unset;
        font-family: monospace;
        font-size: 8px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
    #myBoard {
        display: none !important; /* Dont display board in smaller screens */
    }
    .why {
        display: flex;
        flex-direction: column;
        text-align: center;
	    margin-right: unset;
        font-family: monospace;
        font-size: 8px;
    }
}

@media screen and (min-width: 900px) and (max-width: 1440px) {
    #myBoard {
        width: 500px;
    }
    .why {
        display: flex;
        flex-direction: column;
        float: right;
        text-align: center;
        margin-right: 3%;
        font-family: monospace;
        font-size: 12px;
    }
}

/* Adjust styles for larger screens */
@media screen and (min-width: 1800px){
    #myBoard {
        width: 600px; /* Increase board size for bigger screens */
    }
}