@charset "UTF-8";

*:focus {
    outline: none !important;
}

body {
    background-color: #C5AFCC;
    background-size: 4px 4px;
    min-width: 100vw;
    background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
    min-width: 100vw;
    color: #4D493E;
    font-family: "Noto Sans", sans-serif;
    font-weight: 300;
    margin: 0;
    min-height: 100vh;
    min-width: calc(15px + 0.390625vw);
    width: 100vw;
    display: flex;
    box-shadow: inset 0 0 150px rgba(77, 73, 62, 0.4), inset 0 0 150px rgba(77, 73, 62, 0.3);
    min-height: 100vh;
    min-width: calc(15px + 0.390625vw);
    flex-direction: column;
    letter-spacing: 0.1rem;
}

.thumbnail-land {
    width: 300px;
    height: 200px;
    position: relative;
} 

.thumbnail-land:hover {
    transform: scale(1.3);
    display:inline-block;
    z-index:999;
    cursor: pointer;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}

.thumbnail-ver {
    width: 200px;
    height: 300px;
    position: relative;
} 

.thumbnail-ver:hover {
    transform: scale(1);
    display:inline-block;
    z-index:999;
    cursor: pointer;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}

.thumbnail-square {
    width: 300px;
    height: 300px;
    position: relative;
} 

.thumbnail-square:hover {
    transform: scale(1.3);
    display:inline-block;
    z-index:999;
    cursor: pointer;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}


.container {
    text-align: center;
}

header {
    
}

h1 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 450;
    letter-spacing: 0.5rem;
    text-shadow: 0.3rem 0.3rem 0 rgba(77, 73, 62, 0.3);
}

h1 span {
    font-size: calc(15px + 0.390625vw);
}

h1 small {
    display: none;
    font-size: 3vw;
    font-weight: 400;
    text-transform: none;
    text-align: center;
    text-shadow: none;
    letter-spacing: 0.1rem;
}

h1 small::before {
    content: "";
}

.pattern {
    border-top: 2px solid #4D493E;
}

.pattern-inner {
    height: 40px;
    background-size: 50px 3px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px;
    background-position: 0 0, 22px 4px, 22px 5px, 22px 6px, 22px 7px, 28px 12px, 28px 13px, 28px 14px, 28px 15px;
    background-image: linear-gradient(90deg, #4D493E, #4D493E 10px, transparent 10px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.4) 12px, rgba(77, 73, 62, 0.4) 13px, rgba(77, 73, 62, 0.8) 13px, rgba(77, 73, 62, 0.8) 14px, rgba(77, 73, 62, 0.9) 14px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.4) 15px, rgba(77, 73, 62, 0.4) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #4d493e 1px, #4d493e 2px, #4d493e 2px, #4d493e 3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.9) 12px, rgba(77, 73, 62, 0.9) 13px, #4d493e 13px, #4d493e 14px, #4d493e 14px, #4d493e 15px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.9) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #4d493e 1px, #4d493e 2px, #4d493e 2px, #4d493e 3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.9) 12px, rgba(77, 73, 62, 0.9) 13px, #4d493e 13px, #4d493e 14px, #4d493e 14px, #4d493e 15px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.9) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.4) 12px, rgba(77, 73, 62, 0.4) 13px, rgba(77, 73, 62, 0.8) 13px, rgba(77, 73, 62, 0.8) 14px, rgba(77, 73, 62, 0.9) 14px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.4) 15px, rgba(77, 73, 62, 0.4) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #4d493e 1px, #4d493e 2px, #4d493e 2px, #4d493e 3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #4d493e 1px, #4d493e 2px, #4d493e 2px, #4d493e 3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px);
    background-repeat: repeat-x;
}

button {
    cursor: pointer;
    font: inherit;
    border: none;
    padding: 0.4rem 1rem;
    background-color: rgba(77, 73, 62, 0.35);
    color: #4D493E;
    box-sizing: content-box;
    position: relative;
    border: 1px solid transparent;
    border-left: none;
    border-right: none;
}

button::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 0;
    background-color: #4D493E;
    transition: width 0.2s;
}

button::after {
    content: "";
    display: none;
    position: absolute;
    background: #4D493E;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: -4px;
}

button:hover,
button:focus {
    background-color: transparent;
    color: #C8C2AA;
    border-color: #4D493E;
}

button:hover::before,
button:focus::before {
    width: 100%;
}

main {
    flex: 1;
}

.content {
    margin-bottom: 2rem;
}

img {
    box-shadow: 3px 3px 0 rgba(77, 73, 62, 0.6);
}

.menubar {
    display: grid;
    grid-template-rows: 1;
    grid-template-columns: auto auto;
    column-width: 60px;
    column-gap: 1rem;
}