/*
Tauno Erik
15.09.2025

Clip Path kujundid:
https://bennettfeely.com/clippy/

Grid:
https://css-tricks.com/snippets/css/complete-guide-grid/
*/
body {
    background-color: #faf0ca;
}

.container {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1 osa */
    grid-template-rows: repeat(3, auto);
    gap: 10px;
}

.grid-item {
    display: grid;
    /* border: 1px solid black; */
    justify-items: center; /* horinsontaalselt */
    align-items: center; /* vertikaalselt */
}

.header {

}

.menu {
    display: grid;
    grid-template-columns: repeat(2, 180px);
    grid-template-rows: repeat(1, auto);
    gap: 10px;
}

.logo {
    width: 50px;
    height: 50px;
    background-color: #f4d35e;
    clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
    justify-self: start;
}

.triibud {
    width: 50px;
    height: 50px;
    background-color: #f4d35e;
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    justify-self: end;
}

.viisnurk {
    width: 300px;
    height: 300px;
    background-color: #f4d35e;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.main {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1 osa */
    grid-template-rows: repeat(4, auto);
    gap: 10px;
}

.frame {
    width: 300px;
    height: 300px;
    background-color: #f4d35e;
    clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}

.bevel {
    width: 200px;
    height: 200px;
    background-color: #f4d35e;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

.message {
    width: 300px;
    height: 300px;
    background-color: #f4d35e;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

.socialmedia div {
    display: inline-block;
    width: 90px;
    height: 90px;
    background-color: #f4d35e;
    clip-path: circle(50% at 50% 50%);
}