/* Marks selected page in navigation menu */
.home_button{
    color: var(--text-soft);
    background-color: var(--bg-light); 
}



fieldset, .news, .reviews, table{
    border: var(--border) 4px solid;
    border-radius: 10px;

    margin-bottom: 25px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
}



fieldset{
    display: grid;
    grid-template-rows: auto auto auto;
    background-color: var(--bg);
}
fieldset section{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Credit to: https://dev.to/musselmanth/the-dynamic-css-grid-configuration-ive-been-looking-for-1ogd */
    gap: 5%;
    padding: 2%;
}
fieldset div{
    display: grid;
    grid-template-columns: 90px auto;
    gap: 1%;

    align-content: center;
    align-items: center;
    justify-items: stretch;
}
legend{
    color: var(--text-soft);
    font-size: xx-large;
    margin: 0px auto;
}
label{
    color: var(--text);
}
fieldset section input{
    background-color: var(--bg-light);

    border: var(--border) 2px solid;
    border-radius: 5px;

    height: 30px;
    
}
.submitButton{
    color: var(--white-soft);
    background-color: var(--accent);

    border: var(--border) 2px solid;
    border-radius: 5px;

    font-size: large;
    margin: 15px auto;
    padding: 5px 10px 5px 10px;
}
.submitButton:hover{
    color: white;
    background-color: var(--accent-light);
}



.news{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(375px, 1fr)); /* Credit to: https://dev.to/musselmanth/the-dynamic-css-grid-configuration-ive-been-looking-for-1ogd */
    background-color: var(--bg-light);
}
.news div{
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
}
.news img{
    width: 100%;
    border-radius: 5px;
}
.news h1{
    text-align: center;
    margin: 0px;
}
.news p{
    color: var(--text-soft);
    padding: 0 5%;
} 



.reviews{
    background-color: var(--bg-light);
}
.reviews img{
    width: 150px;
}
.reviews h2{
    text-align: center;
    text-decoration-line: underline;
}
.reviews h3{
    color: var(--text);
}
.reviews p{
    color: var(--text-soft);
}
.reviews section{
    display: grid;
    align-items: center;

    padding: 0px 10px 10px 10px;
    margin: 10px;
    gap: 20px;

    border-bottom: var(--border-soft) 2px solid;
}
.reviews section:nth-child(9){
    border:none;
    padding-bottom: 0px;
}
.reviews section:nth-child(even){
    grid-template-columns: auto 5fr 1fr;
}
.reviews section:nth-child(odd){
    grid-template-columns: 1fr 5fr auto;
}
.reviews section:nth-child(odd) p, .reviews section:nth-child(odd) h3{
    text-align: right;
}



table{
    background-color: var(--bg);
    color: var(--text-soft);

    border-color: var(--border-soft);
    border-collapse: collapse;

    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
th, td{
    border: var(--border-soft) 2px solid;
    padding: 10px 15px;
}
tr:nth-child(1){
    text-decoration-line: underline;
    font-size: large;
}
tr:nth-child(2){
    font-size: medium;
}
tr:nth-child(even){
    background-color: var(--bg-light);
}
td{
    font-size: x-small;
    text-align: center;
}
.no_right_border{
    border-right: none;
}



aside{
    display: grid;
    max-width: 25vw;

    margin-top: 20px;
    margin-bottom: 20px;
}
table{
    margin: 40px 0px;
}
.ad{
    width: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.ad:hover{
    cursor: pointer;
    filter: brightness(90%);
}