body{
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.content{
    width: 1200px;
    margin: auto;
}
nav{
    width: 1200px;
    height: 100px;
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin: auto;
    place-items: center;
    background-color: #ABC4AA;
}
nav div{
    padding: 10px;
    text-align: center;
    align-self: center;
    text-decoration: none;
    font-weight: 800;
}

nav input[type=button]{
    font-size: x-large;
}

input[type="button"]{
    margin: 5px;
    background-color: #4e6e4d;
    border: 2px solid #675D50;
    color: #F3DEBA;
    cursor: pointer;
    text-decoration: none;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-style: normal;
}

input[type="button"]:hover{
    color: #4e6e4d;
    background-color: #F3DEBA; 
}

a, a:visited{
    color: #675D50;
}

h1{
    text-align: center;
    color: #675D50;
}
h2, h3{
    text-align: center;
    color: #3a342c;
}

/*INDEX*/
            #main {
                width: 1200px;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr; 
                gap: 20px;
                margin-top: 10px;
                place-items: center;
                background-color: #ede0d4;
            }

            #main div {  
                padding: 10px;
                text-align: center;
            }

            #news1{
                grid-column: 1;
                grid-row: 1 / 5; 
                background-color: #F3DEBA;
            }
            #news2{
                grid-column: 4;
                grid-row: 1/5;
                background-color: #F3DEBA;
            }
            #bar{
                grid-area: 1 / 2 / 2 / 4;
                background-color: #F3DEBA;
                margin-top: 5px;
                color: #5e5e5e;
                border: 2px solid #3a342c;
                width: 500px;
                text-align: left;
            }
            .feat{
                background-color: #ABC4AA;
                height: 200px;
                width: 80%;
                border: 5px solid #A9907E;
            }
            .feat:hover{
                border: 5px solid #4e6e4d;
            }

/*FOTOFAN*/
        #layout{
            width: 1200px;
            display: grid;
            grid-template-columns: 295px 895px; 
            gap: 10px;
            margin: 5px 0px;
            }
        #layout div{
            padding: 10px;
            border: 2px solid #675D50;
        }
        #picBox{
            background-color: #ABC4AA
        }
        .gridClass{
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 10px;
        }

        .gridClass div{
            text-align: center;
            background-color: #ede0d4;
        }
            
        .gridClass div.selected {
            background-color: #A9907E;
        }
        #options{
            background-color: #ede0d4;
            font-size: 16px;
            text-align: center
        }
        #options input, select, option{
            font-size: 16px;
            margin: 5px;
            font-family: "Outfit", sans-serif;
            font-weight: 400;
            font-style: normal;
        }
        .full{
            height: 700px;
            text-align: center;
        }


/*LOGIN*/
#loginBox{
    width: 500px;
    height: 350px;
    background-color: #ABC4AA;
    margin: auto;
    padding: 10px;
    font-size: x-large;
    text-align: center;
}



/* <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name

.outfit-<uniquifier> {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/