/*Colors:
#FBF5DD-rgb(251, 245, 221)
#A6CDC6-rgb(166, 205, 198)
#16404D-rgb(22, 64, 77)
#DDA853-rgb(221, 168, 83)
*/


html {
    background:#A6CDC6;
    height: fit-content;
    scroll-behavior : smooth;
}

body{
    font-family:sans-serif;
}

nav {
    display:flex;
    justify-content:center;
    flex-direction: column-reverse;
    align-items: center;
    position:sticky;
    top:0;
}

nav .page-button{
    background-color:#16404D;
    font-size:18px;
    color:white;
    outline:none;
    border:none;
    margin:15px;
    padding:5px;
    transition:0.5s;
    cursor:pointer;
    border-radius:10px/10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
}

nav .page-button:hover{
    transform:scale(1.1);
}

nav .page-button svg{
    height:22px;
    border:none;
}

nav .sliding_menu{
    transition: 0.5s;
    width:0;
    height:0;
    z-index:0;
    top:0;
    left:center;
    background-color:#DDA853;
    overflow-y:hidden;
    display: flex;
    flex-direction: row;
    border-radius:20px/20px;
}

#menu-button {
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color:rgb(128,128,128,.5);
    outline:none;
    border-radius:10px/10px;
    border:none;
    cursor:pointer;
}

#menu-button:hover {
    transform:scale(1.2);
}


nav .OpenNavButton {
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background:none;
    outline:none;
    border:none;
    cursor:pointer;
    transform:rotate(180deg);
}

nav .OpenNavButton:hover {
    transform:scale(1.2) rotate(180deg);
}


.row{
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    position:relative;
}

.description{
    width:50%;
    padding:25px;
}

.slideshow{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    height:fit-content;
    width:30%;
}

.slide{
    display:none;
    position:relative;
}

.prev{
    cursor:pointer;
    scale:2;
    transition:0.5s;
    border:none;
    background:none;
    cursor: pointer;
    position: absolute;
    color:grey;
    left:10px;
    top:50%;
}

.next{
    cursor:pointer;
    scale:2;
    transition:0.5s;
    border:none;
    background:none;
    cursor: pointer;
    position: absolute;
    color:grey;
    right:10px;
    top:50%;
}

.prev:hover,.next:hover{
    transform:scale(1.2);
}


@media screen and (max-width: 600px) {
    .description {
      flex:100%;
    }
  }