@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&family=Londrina+Shadow&display=swap');

body {
    background-color: #F9F8F6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23efe9e3' fill-opacity='0.45'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    margin: auto;
    font-family: "Darker Grotesque", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

}

header {
    font-family: "Londrina Shadow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.125em;
    color: #ffffff;
    text-shadow: #000000 0px 0px 0.5px;
    text-align: center;
    margin: auto;
    margin-bottom: -80px;
    width: 50%;
    padding: .875em;

}

nav {
    overflow: hidden;
    width: 100%;
    margin: auto;
    margin-bottom: -20px;
}

nav ul {
    list-style-type: none;
    display: flex;
    justify-content: center;

}

nav li {
    float: left;
}

nav li a {
    display: block;
    font-weight: bold;
    text-align: center;
    padding: 14px 25px;
    position: relative;
    color: #C9B59C;
    text-shadow: #b4b4b4 0px 0px 1px;
    text-transform: uppercase;
    letter-spacing: .21875em;
    text-decoration: none;
    position: relative;
    transition: all 0.5s ease-in-out;
    animation-duration: 0.9s;
}

nav li a:hover {
    animation-name: pulse79;
    animation-iteration-count: infinite;
}

@keyframes pulse79 {
  0% { transform: scale(1); }
  50% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

section {
    background-color: #EFE9E3;
    width: 50%;
    margin: auto;
    padding: 30px;
    text-align: justify;
    letter-spacing: 1px;
    line-height: 1.6;
    border-right: #D9CFC7 3px dashed;
    border-left: #D9CFC7 3px dashed;
    border-top: #D9CFC7 2px solid;
}

footer {
    background-color: #EFE9E3;
    margin: auto;
    margin-bottom: 20px;
    width: 50%;
    padding: 30px;
    text-align: center;
    text-transform: uppercase;
    font-size: .75em;
    letter-spacing: 3px;
    border-right: #D9CFC7 3px dashed;
    border-left: #D9CFC7 3px dashed;
    border-bottom: #D9CFC7 2px solid;

}

footer a {
    color: #000000;
}

a {
    color:#000000;
}

a:hover {
    color: #C7BEA2;
}

h1 {
    letter-spacing: 5px;
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
    color: #C9B59C;
    text-shadow: #8b8b8b 0px 0px 1px;
    margin-left: 15px;
}

.huomio {
    text-align: left;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    padding: 8px;
    line-height: 1.6;
}

.otsikko {
    width: 80%;
    padding: 10px;
}

.uutiset {
    background-color: #f9f8f648;
    padding: 10px;
    border-radius: 8px;
    border: #D9CFC7 1px dashed;
}

.laatikon {
    flex: 1;
    padding: 15px;
    height: auto;
    color: #000000;
    text-shadow: #484c52 0px 0px 1px;
    text-align: justify;
    box-sizing: border-box;
}

.kilpailut {
      display: flex;
      gap: 10px;
      padding: 5px;
    }

.laatikko {
    background-color: rgb(255, 255, 255);
    flex: 1;
    padding: 15px;
    height: auto;
    color: #000000;
    text-shadow: #484c52 0px 0px 1px;
    text-align: justify;
    box-sizing: border-box;
    font-size: 13px;
}

table {
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
    border-radius: 8px;
    border: #D9CFC7 1px dashed;
    background-color: #f9f8f648;
}

table tr {
    border: 1px solid #ddd;
    padding: .35em;
}

table th, table td {
    padding: .3125em;
    text-align: left;
}

table th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: normal;
    color: #9A9483;
    padding: .35em;
}

/* MOBIILI */
@media all and (max-width: 1400px) {
    header {
        width: 100%;
        margin: auto;
	padding: 0;
    }

    nav {
        width: 100%;
        position: absolute;
        margin: auto    
    }
    nav li {
	width: 100%;
	margin: auto;
}

    nav li a {
        font-size: 12px;
    }

    section {
	width: 100%;

    footer {
        width: 100%;
    }
}